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


{% block title %} Homepage {% endblock %}


{% block head %}
<link rel="stylesheet" href="{% static 'home/index/css/style.css' %}" />
{% endblock %}


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

    <div class="container">
        <div class="dashboard-header">
            <a href="{% url 'home:index' %}" class="back-link">&lt; Back to Home</a>

            <h1>
                Secret type:
                <span class="text-gradient-primary">{{ model_name }}</span>
            </h1>


            {% if model_name == 'Login Credentials' %}
            <p class="text-gradient">
                Store and manage your login details in one encrypted place.
            </p>
            {% elif model_name == 'Payment Cards' %}
            <p class="text-gradient">
                Store and manage your payment cards in one encrypted place.
            </p>
            {% elif model_name == 'Security Notes' %}
            <p class="text-gradient">
                Store and manage your security notes in one encrypted place.
            </p>
            {% endif %}
        </div>

        <div class="dashboard-content">
            <!-- Credentials Section -->
            <section class="dashboard-section">
                <div class="section-header">
                    <div class="section-title">
                        <h2>{{ model_name }} stored</h2>

                        <span class="counter" id="credentials-counter">
                            {{ object_list.count }}
                        </span>
                    </div>

                    <div class="section-actions">
                        {% if model_name == 'Login Credentials' %}
                        <a href="{% url 'secret:credential_create_view' %}" class="btn btn-primary"
                            id="add-new-credential">
                            Add new
                        </a>
                        {% elif model_name == 'Payment Cards' %}
                        <a href="{% url 'secret:card_create_view' %}" class="btn btn-primary" id="add-new-credential">
                            Add new
                        </a>
                        {% elif model_name == 'Security Notes' %}
                        <a href="{% url 'secret:note_create_view' %}" class="btn btn-primary" id="add-new-credential">
                            Add new
                        </a>
                        {% endif %}
                    </div>
                </div>

                <div class="items-grid" id="credentials-grid">
                    {% for i in object_list %}

                    {% if model_name == 'Login Credentials' %}
                    <div class="item-card">
                        <h3 class="item-title">{{ i.name }}</h3>
                        <p class="item-detail">{{ i.get_service_display }}</p>
                        <p class="item-meta">{% if i.third_party_login %} 3rd Party {% else %} Self Login {% endif %}
                        </p>
                        <p class="item-meta">Last updated: {{ i.updated}}</p>

                        <br />

                        <div class="item-actions">
                            <a href="{% url 'secret:credential_detail_view' i.slug %}" class="item-action-btn">
                                Details
                            </a>
                        </div>
                    </div>

                    {% elif model_name == 'Payment Cards' %}
                    <div class="item-card">
                        <h3 class="item-title">{{ i.name }}</h3>
                        <p class="item-detail">{{ i.number }}</p>
                        <p class="item-meta">Expires: {{ i.expiration }}</p>

                        <br />

                        <div class="item-actions">
                            <a href="{% url 'secret:card_detail_view' i.slug %}" class="item-action-btn">
                                Details
                            </a>
                        </div>
                    </div>

                    {% elif model_name == 'Security Notes' %}
                    <div class="item-card">
                        <h3 class="item-title">{{ i.title }}</h3>
                        <p class="item-detail">{{ i.content|truncatechars:40 }}</p>
                        <p class="item-meta">Last updated: {{ i.updated }}</p>

                        <br />

                        <div class="item-actions">
                            <a href="{% url 'secret:note_detail_view' i.slug %}" class="item-action-btn">
                                Details
                            </a>
                        </div>
                    </div>
                    {% endif %}

                    {% empty %}
                    <div class="empty-state">
                        <p>No notes yet. Click "Add new" to get started.</p>
                    </div>

                    {% endfor %}
                </div>
            </section>
        </div>
    </div>
</main>
{% endblock %}