{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}{{ block.super }}
<style>
    .gf-admin-hero {
        background: linear-gradient(125deg, #0a2233 0%, #1a6fa5 100%);
        border-radius: 12px;
        padding: 24px 30px;
        color: #ffffff;
        margin-bottom: 24px;
        box-shadow: 0 4px 20px rgba(10, 34, 51, 0.12);
    }
    .gf-admin-hero h2 {
        color: #ffffff !important;
        font-weight: 700;
        margin-bottom: 8px;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .gf-admin-hero p {
        color: rgba(255, 255, 255, 0.88);
        margin: 0;
        font-size: 0.9rem;
        max-width: 720px;
    }
    .gf-quick-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }
    .gf-stat-card {
        background: #ffffff;
        border-radius: 10px;
        padding: 16px 20px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 10px rgba(10, 34, 51, 0.04);
        display: flex;
        align-items: center;
        gap: 16px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        text-decoration: none !important;
        color: inherit !important;
    }
    .gf-stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(10, 34, 51, 0.08);
        border-color: #cbd5e1;
    }
    .gf-stat-icon {
        width: 46px;
        height: 46px;
        border-radius: 10px;
        background: rgba(26, 111, 165, 0.1);
        color: #1a6fa5;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
    }
    .gf-stat-info h3 {
        font-size: 0.8rem;
        text-transform: uppercase;
        color: #64748b;
        margin: 0 0 4px 0;
        font-weight: 600;
        letter-spacing: 0.03em;
    }
    .gf-stat-info span {
        font-size: 1.05rem;
        font-weight: 700;
        color: #0a2233;
    }
</style>
{% endblock %}

{% block content %}
<div id="content-main">

    <!-- Header Banner GiniFollow Admin -->
    <div class="gf-admin-hero">
        <h2><i class="bi bi-shield-check"></i> Espace d'Administration GiniFollow</h2>
        <p>Bienvenue dans l'interface de gestion de la plateforme GiniFollow. Supervisez les comptes utilisateurs, validez les demandes d'adhésion, planifiez les rendez-vous et publiez vos ressources éducatives.</p>
    </div>

    <!-- Quick Shortcuts Cards -->
    <div class="gf-quick-stats">
        <a href="{% url 'admin:follow_demandeadhesion_changelist' %}" class="gf-stat-card">
            <div class="gf-stat-icon"><i class="bi bi-file-earmark-check"></i></div>
            <div class="gf-stat-info">
                <h3>Demandes d'adhésion</h3>
                <span>Gérer les souscriptions</span>
            </div>
        </a>
        <a href="{% url 'admin:follow_rendezvous_changelist' %}" class="gf-stat-card">
            <div class="gf-stat-icon" style="background: rgba(32, 178, 170, 0.12); color: #20b2aa;"><i class="bi bi-calendar-check"></i></div>
            <div class="gf-stat-info">
                <h3>Rendez-vous</h3>
                <span>Planning &amp; visios</span>
            </div>
        </a>
        <a href="{% url 'admin:follow_user_changelist' %}" class="gf-stat-card">
            <div class="gf-stat-icon" style="background: rgba(13, 110, 253, 0.1); color: #0d6efd;"><i class="bi bi-people"></i></div>
            <div class="gf-stat-info">
                <h3>Utilisateurs</h3>
                <span>Patients &amp; équipe</span>
            </div>
        </a>
        <a href="{% url 'admin:follow_ressourceeducative_changelist' %}" class="gf-stat-card">
            <div class="gf-stat-icon" style="background: rgba(245, 158, 11, 0.15); color: #d97706;"><i class="bi bi-journal-richtext"></i></div>
            <div class="gf-stat-info">
                <h3>Blog &amp; Ressources</h3>
                <span>Articles &amp; éducation</span>
            </div>
        </a>
    </div>

    {% include "admin/app_list.html" with app_list=app_list show_changelinks=True %}

</div>
{% endblock %}

{% block sidebar %}
<div id="content-related">
    <div class="module" id="recent-actions-module">
        <h2><i class="bi bi-clock-history me-1"></i> {% translate 'Recent actions' %}</h2>
        <h3>{% translate 'My actions' %}</h3>
        {% load log %}
        {% get_admin_log 10 as admin_log for_user user %}
        {% if not admin_log %}
        <p>{% translate 'None available' %}</p>
        {% else %}
        <ul class="actionlist">
        {% for entry in admin_log %}
        <li class="{% if entry.is_addition %}addlink{% endif %}{% if entry.is_change %}changelink{% endif %}{% if entry.is_deletion %}deletelink{% endif %}">
            {% if entry.is_deletion or not entry.get_admin_url %}
                {{ entry.object_repr }}
            {% else %}
                <a href="{{ entry.get_admin_url }}">{{ entry.object_repr }}</a>
            {% endif %}
            <br>
            {% if entry.content_type %}
                <span class="mini quiet">{% filter capfirst %}{{ entry.content_type.name }}{% endfilter %}</span>
            {% else %}
                <span class="mini quiet">{% translate 'Unknown content' %}</span>
            {% endif %}
        </li>
        {% endfor %}
        </ul>
        {% endif %}
    </div>
</div>
{% endblock %}