{% extends 'shared/base.html' %}
{% load static %}


{% block title %} Editing Card: {{ object.name }} {% endblock %}


{% block head %}
<link rel="stylesheet" href="{% static 'secret/css/detail_view.css' %}" />
{% endblock %}


{% block body %}
<main class="detail-page">
    <div class="container">
        <div class="detail-header">
            <a href="{% url 'secret:card_list_view' %}" class="back-link">
                &lt; Back to Listing
            </a>
            <h1>
                <span class="text-gradient-primary">{{ user.username }}</span> secure item
            </h1>
        </div>

        <div class="detail-content">
            <section class="detail-section">
                <div class="section-header">
                    <div class="section-title">
                        <h2>Card Details</h2>
                    </div>
                    <div class="section-actions">
                        <a href="{% url 'secret:card_update_view' object.slug %}" class="btn btn-outline edit-btn"
                            data-target="note-form">
                            Edit
                        </a>
                        <a href="{% url 'secret:card_delete_view' object.slug %}" class="btn btn-error save-btn"
                            data-target="note-form">
                            Delete
                        </a>
                    </div>
                </div>

                <div class="detail-form" id="form">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" value="{{ object.name }}" disabled />
                    </div>

                    <div class="form-group">
                        <label for="type">Card Type</label>
                        <input type="text" id="type" value="{{ object.get_card_type_display }}" disabled />
                    </div>

                    <div class="form-group secret-group">
                        <label for="number">Number</label>
                        <div class="secret-input-wrapper">
                            <input type="password" id="number" value="{{ object.number }}" disabled />
                            <button class="toggle-input-btn" data-target="number">
                                View
                            </button>
                        </div>
                    </div>


                    <div class="form-group-row">
                        <div class="form-group secret-group">
                            <label for="expiration">Expiration</label>
                            <div class="secret-input-wrapper">
                                <input type="password" id="expiration" value="{{ object.expiration }}" disabled />
                                <button class="toggle-input-btn" data-target="expiration">
                                    View
                                </button>
                            </div>
                        </div>

                        <div class="form-group secret-group">
                            <label for="cvv">CVV</label>
                            <div class="secret-input-wrapper">
                                <input type="password" id="cvv" value="{{ object.cvv }}" disabled />
                                <button class="toggle-input-btn" data-target="cvv">
                                    View
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="form-group secret-group">
                        <label for="bank">Bank</label>
                        <div class="secret-input-wrapper">
                            <input type="password" id="bank" value="{{ object.get_bank_display }}" disabled />
                            <button class="toggle-input-btn" data-target="bank">
                                View
                            </button>
                        </div>
                    </div>

                    <div class="form-group secret-group">
                        <label for="brand">Brand</label>
                        <div class="secret-input-wrapper">
                            <input type="password" id="brand" value="{{ object.get_brand_display }}" disabled />
                            <button class="toggle-input-btn" data-target="brand">
                                View
                            </button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="owner">Owner's Name</label>
                        <input type="text" id="owner" value="{{ object.owner }}" disabled />
                    </div>

                    <div class="form-group">
                        <label for="note">Note</label>
                        <textarea id="note" rows="3" disabled>{{ object.note }}</textarea>
                    </div>

                    <div class="form-group-row">
                        <div class="form-group">
                            <label for="created">Created</label>
                            <input type="text" id="created" value="{{ object.created }}" disabled readonly />
                        </div>

                        <div class="form-group">
                            <label for="updated">Updated</label>
                            <input type="text" id="updated" value="{{ object.updated }}" disabled readonly />
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</main>
{% endblock %}