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


{% block title %} {{ action }} Page | {{ model }} {% endblock %}



{% block head %}
<link rel="stylesheet" href="{% static 'secret/css/create_view.css' %}" />
<script src="{% static 'secret/js/createView.js' %}"></script>

{% if model == 'Login Credential' %}
<script src="{% static 'secret/js/credentialCreateView.js' %}"></script>
{% elif model == 'Payment Card' %}
<script src="{% static 'secret/js/cardCreateView.js' %}"></script>
{% elif model == 'Security Note' %}
<script src="{% static 'secret/js/noteCreateView.js' %}"></script>
{% endif %}

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


{% block body %}
<main class="detail-page">
    <div class="container">
        <div class="detail-header">
            {% if model == 'Login Credential' %}
            <a href="{% url 'secret:credential_list_view' %}" class="back-link">
                &lt; Back to Listing
            </a>
            {% elif model == 'Payment Card' %}
            <a href="{% url 'secret:card_list_view' %}" class="back-link">
                &lt; Back to Listing
            </a>
            {% elif model == 'Security Note' %}
            <a href="{% url 'secret:note_list_view' %}" class="back-link">
                &lt; Back to Listing
            </a>
            {% endif %}

            {% if action == 'Adition' %}
            <h1>Add New <span class="text-gradient-primary">{{ model }}</span></h1>
            {% elif action == 'Edition' %}
            <h1>Editing <span class="text-gradient-primary">{{ model }}</span></h1>
            {% endif %}
        </div>

        <div class="detail-content">
            <section class="detail-section">
                <div class="section-header">
                    <div class="section-title">
                        <h2>{{ model }} Information</h2>
                    </div>
                </div>

                <!-- Messages -->
                {% if messages %}
                {% for message in messages %}
                <div class="alert {{ message.tags }}" role="alert">{{ message }}</div>
                {% endfor %}
                {% endif %}

                <form method="post" action="" id="credentialForm" class="detail-form">
                    {% csrf_token %}

                    <!-- Form Groups -->
                    {% for field in form %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>

                        <!-- Errors -->
                        {% if field.errors %}
                        <div class="error">
                            {% for error in field.errors %} {{ error }}<br />
                            {% endfor %}
                        </div>
                        {% endif %}

                        <!-- Fields -->
                        {{ field }}

                        <!-- Help Text -->
                        {% if field.help_text %}
                        <div class="help-text">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                                aria-hidden="true">
                                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
                                <line x1="12" y1="10" x2="12" y2="16" stroke="currentColor" stroke-width="2" />
                                <circle cx="12" cy="7" r="1" fill="currentColor" />
                            </svg>

                            {{ field.help_text }}
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}

                    {% if action == 'Edition' %}
                    <input type="hidden" name="pk" value="{{ object.pk }}" />
                    {% endif %}

                    <input id="userData" type="hidden" data-user="{{ request.user }}"
                        data-user-id="{{ request.user.id }}">

                    <!-- Form Actions -->
                    <div class="form-group form-group-full">
                        <div class="form-actions">
                            <input id="resetForm" type="reset" class="btn btn-outline" value="Reset" />

                            <input id="backForm" type="reset" class="btn btn-error" value="Back"
                                onclick="history.back()" />

                            <input type="submit" class="btn btn-primary" value="Save" />
                        </div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</main>
{% endblock %}