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


{% block title %} Editing Note: {{ object.title }} {% 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:note_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>Note Details</h2>
                    </div>
                    <div class="section-actions">
                        <a href="{% url 'secret:note_update_view' object.slug %}" class="btn btn-outline edit-btn"
                            data-target="form">
                            Edit
                        </a>
                        <a href="{% url 'secret:note_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="title">Title</label>
                        <input type="text" id="title" value="{{ object.title }}" disabled />
                    </div>

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

                    <div class="form-group">
                        <label for="content">Content</label>
                        <textarea id="content" rows="6" disabled>
{{ object.content }}</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 %}