{% extends "admin/base.html" %}
{% load static %}

{% block title %}{{ title }} | {{ site_title|default:_('Allure Admin') }}{% endblock %}

{% block extrastyle %}
<style>
    :root {
        --primary-color: #6366f1;
        --secondary-color: #8b5cf6;
        --success-color: #10b981;
        --warning-color: #f59e0b;
        --danger-color: #ef4444;
        --dark-color: #1f2937;
        --light-color: #f9fafb;
    }

    /* Header personalizado */
    #header {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    #header a:link, #header a:visited {
        color: white;
    }

    #branding h1 {
        font-weight: 600;
        font-size: 1.5rem;
    }

    /* Sidebar personalizada */
    #content-related {
        background: var(--light-color);
        border-radius: 8px;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    }

    #content-related h2 {
        background: var(--primary-color);
        color: white;
        padding: 12px 16px;
        border-radius: 8px 8px 0 0;
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
    }

    /* Cards de estatísticas */
    .stats-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        border-left: 4px solid var(--primary-color);
    }

    .stats-card h3 {
        margin: 0 0 10px 0;
        color: var(--dark-color);
        font-size: 1.1rem;
        font-weight: 600;
    }

    .stats-number {
        font-size: 2rem;
        font-weight: bold;
        color: var(--primary-color);
    }

    .stats-label {
        color: #6b7280;
        font-size: 0.9rem;
    }

    /* Status badges */
    .status-badge {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .status-pendente { background: #fef3c7; color: #92400e; }
    .status-aprovado { background: #d1fae5; color: #065f46; }
    .status-rejeitado { background: #fee2e2; color: #991b1b; }
    .status-suspenso { background: #f3e8ff; color: #6b21a8; }

    /* Botões personalizados */
    .btn-primary {
        background: var(--primary-color);
        border: none;
        color: white;
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none;
        display: inline-block;
        font-weight: 500;
    }

    .btn-primary:hover {
        background: #5855eb;
        color: white;
        text-decoration: none;
    }

    /* Tabelas personalizadas */
    .results {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    }

    .results thead th {
        background: var(--light-color);
        border-bottom: 2px solid #e5e7eb;
        font-weight: 600;
        color: var(--dark-color);
    }

    .results tbody tr:hover {
        background: #f9fafb;
    }

    /* Filtros personalizados */
    #changelist-filter {
        background: var(--light-color);
        border-radius: 8px;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    }

    #changelist-filter h2 {
        background: var(--primary-color);
        color: white;
        padding: 12px 16px;
        border-radius: 8px 8px 0 0;
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
    }

    /* Dashboard personalizado */
    .dashboard-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .quick-actions {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    }

    .quick-actions h2 {
        margin: 0 0 15px 0;
        color: var(--dark-color);
        font-size: 1.2rem;
        font-weight: 600;
    }

    .quick-actions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
    }

    .quick-action-btn {
        display: block;
        padding: 12px 16px;
        background: var(--light-color);
        color: var(--dark-color);
        text-decoration: none;
        border-radius: 6px;
        text-align: center;
        font-weight: 500;
        transition: all 0.2s;
    }

    .quick-action-btn:hover {
        background: var(--primary-color);
        color: white;
        text-decoration: none;
    }

    /* Responsividade */
    @media (max-width: 768px) {
        .dashboard-stats {
            grid-template-columns: 1fr;
        }
        
        .quick-actions-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block branding %}
<h1 id="site-name">
    <a href="{% url 'admin:index' %}">
        🎭 {{ site_header|default:_('Painel Administrativo Allure') }}
    </a>
</h1>
{% endblock %}

{% block nav-global %}{% endblock %}

{% block content_title %}
    {% if title %}
        <h1 class="page-title">{{ title }}</h1>
    {% endif %}
{% endblock %}

{% block content %}
    {% if cl.opts.model_name == 'modelo' and cl.opts.app_label == 'models' %}
        <!-- Dashboard personalizado para modelos -->
        <div class="dashboard-stats">
            <div class="stats-card">
                <h3>Total de Modelos</h3>
                <div class="stats-number">{{ cl.queryset.count }}</div>
                <div class="stats-label">Cadastradas no sistema</div>
            </div>
            
            <div class="stats-card">
                <h3>Painel de Controle</h3>
                <div class="stats-number">🎛️</div>
                <div class="stats-label">Gerenciamento completo</div>
            </div>
            
            <div class="stats-card">
                <h3>Funcionalidades</h3>
                <div class="stats-number">⚡</div>
                <div class="stats-label">Ações em lote disponíveis</div>
            </div>
            
            <div class="stats-card">
                <h3>Status</h3>
                <div class="stats-number">📊</div>
                <div class="stats-label">Monitoramento em tempo real</div>
            </div>
        </div>

        <div class="quick-actions">
            <h2>Ações Rápidas</h2>
            <div class="quick-actions-grid">
                <a href="{% url 'admin:models_modelo_add' %}" class="quick-action-btn">
                    ➕ Adicionar Modelo
                </a>
                <a href="{% url 'admin:models_modelo_changelist' %}?status__exact=pendente" class="quick-action-btn">
                    ⏳ Ver Pendentes
                </a>
                <a href="{% url 'admin:models_modelo_changelist' %}?premium__exact=1" class="quick-action-btn">
                    ⭐ Ver Premium
                </a>
                <a href="{% url 'admin:models_boostpagamento_changelist' %}?status__exact=pendente" class="quick-action-btn">
                    💳 Pagamentos Pendentes
                </a>
            </div>
        </div>
    {% endif %}
    
    {{ block.super }}
{% endblock %}