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


{% block title %} Editing Credential: {{ 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:credential_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>Credential Details</h2>
                    </div>
                    <div class="section-actions">
                        <a href="{% url 'secret:credential_update_view' object.slug %}" class="btn btn-outline edit-btn"
                            data-target="form">
                            Edit
                        </a>
                        <a href="{% url 'secret:credential_delete_view' object.slug %}" class="btn btn-error save-btn"
                            data-target="form">
                            Delete
                        </a>
                    </div>
                </div>

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

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

                    <div class="form-group checkbox-group">
                        <label for="third-party">Third-party Login</label>
                        <input type="checkbox" id="third-party" checked disabled />
                    </div>

                    {% if object.third_party_login %}

                    <div class="form-group secret-group">
                        <label for="third-party-login-name">Third-party Login Name</label>
                        <div class="secret-input-wrapper">
                            <input type="password" id="third-party-login-name" value="{{ object.third_party_login_name }}" disabled />
                            <button class="toggle-input-btn" data-target="third-party-login-name">
                                View
                            </button>
                        </div>
                    </div>

                    {% else %}

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

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

                    {% endif %}

                    <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 %}