<!doctype html>
<html lang="{{ current_locale() }}" class="h-100">
    {% set current_theme = current_theme() %}

    <head>
        {{ current_theme.headertags() }}
        <title>{{ _('Panel de Administración') }}</title>

        {{ current_theme.local_style() }}
        <style>
            .admin-header {
                background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
                color: white;
                border-radius: 10px;
                margin-bottom: 2rem;
            }
            .admin-card {
                border: none;
                border-radius: 15px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                transition:
                    transform 0.2s ease,
                    box-shadow 0.2s ease;
            }
            .admin-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
            }
            .stat-icon {
                font-size: 2.5rem;
                opacity: 0.2;
            }
        </style>
    </head>

    <body>
        {{ current_theme.navbar() }}

        <main>
            {{ current_theme.notify() }}

            <div class="container px-0 py-3" id="icon-grid">
                <!-- Enhanced Welcome Header -->
                <div class="admin-header p-4 mb-4">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h2 class="mb-1">
                                <i class="bi bi-shield-check me-2"></i>
                                {{ _('Bienvenido, Administrador') }} {{ current_user.nombre }} {{ current_user.apellido }}
                            </h2>
                            <p class="mb-0 opacity-75">{{ _('Tu centro de control y administración del sistema') }}</p>
                        </div>
                        <div class="col-md-4 text-end">
                            <a
                                href="{{ url_for('admin_profile.usuarios') }}"
                                class="btn btn-light"
                                style="border-radius: 25px"
                            >
                                <i class="bi bi-people me-1"></i> {{ _('Ver Usuarios') }}
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Admin Statistics -->
                <div class="row">
                    <div class="col-xl-6 col-xxl-5 d-flex">
                        <div class="w-100">
                            <div class="row">
                                <div class="col-sm-6 mb-3">
                                    <div class="card admin-card border-primary">
                                        <div class="card-body">
                                            <div class="row align-items-center">
                                                <div class="col">
                                                    <h6 class="card-title text-primary mb-2">
                                                        <i class="bi bi-people me-2"></i>{{ _('Usuarios Totales') }}
                                                    </h6>
                                                    <h2 class="mb-0 text-primary">{{ total_users }}</h2>
                                                    <small class="text-muted">{{ _('Usuarios del sistema') }}</small>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="bi bi-people stat-icon text-primary"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <a
                                                    href="{{ url_for('admin_profile.usuarios') }}"
                                                    class="btn btn-outline-primary btn-sm"
                                                >
                                                    <i class="bi bi-eye me-1"></i>{{ _('Ver Usuarios') }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <div class="card admin-card border-warning">
                                        <div class="card-body">
                                            <div class="row align-items-center">
                                                <div class="col">
                                                    <h6 class="card-title text-warning mb-2">
                                                        <i class="bi bi-person-x me-2"></i>{{ _('Usuarios Inactivos') }}
                                                    </h6>
                                                    <h2 class="mb-0 text-warning">{{ inactivos }}</h2>
                                                    <small class="text-muted">{{ _('Requieren atención') }}</small>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="bi bi-person-x stat-icon text-warning"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <a
                                                    href="{{ url_for('admin_profile.usuarios_inactivos') }}"
                                                    class="btn btn-outline-warning btn-sm"
                                                >
                                                    <i class="bi bi-exclamation-triangle me-1"></i>{{ _('Revisar') }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <div class="card admin-card border-success">
                                        <div class="card-body">
                                            <div class="row align-items-center">
                                                <div class="col">
                                                    <h6 class="card-title text-success mb-2">
                                                        <i class="bi bi-book me-2"></i>{{ _('Cursos Totales') }}
                                                    </h6>
                                                    <h2 class="mb-0 text-success">{{ total_courses }}</h2>
                                                    <small class="text-muted">{{ _('Cursos en el sistema') }}</small>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="bi bi-book stat-icon text-success"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <a
                                                    href="{{ url_for('course.lista_cursos') }}"
                                                    class="btn btn-outline-success btn-sm"
                                                >
                                                    <i class="bi bi-list me-1"></i>{{ _('Ver Cursos') }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <div class="card admin-card border-info">
                                        <div class="card-body">
                                            <div class="row align-items-center">
                                                <div class="col">
                                                    <h6 class="card-title text-info mb-2">
                                                        <i class="bi bi-person-check me-2"></i>{{ _('Inscripciones') }}
                                                    </h6>
                                                    <h2 class="mb-0 text-info">{{ total_enrollments }}</h2>
                                                    <small class="text-muted">{{ _('Estudiantes inscritos') }}</small>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="bi bi-person-check stat-icon text-info"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <small class="text-muted">
                                                    <i class="bi bi-info-circle me-1"></i>{{ _('Total de inscripciones') }}
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Admin Management Section -->
                    <div class="col-xl-6 col-xxl-7">
                        <!-- Recent Courses -->
                        <div
                            class="card mb-3"
                            style="border-radius: 15px; border: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)"
                        >
                            <div class="card-header bg-primary bg-opacity-10">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h5 class="card-title mb-0">
                                            <i class="bi bi-book text-primary me-2"></i>{{ _('Cursos Recientes') }}
                                        </h5>
                                    </div>
                                    <div class="col-auto">
                                        <a href="{{ url_for('course.lista_cursos') }}" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-arrow-right me-1"></i>{{ _('Ver Todos') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                {% if cursos_recientes %}
                                <div class="list-group list-group-flush">
                                    {% for curso in cursos_recientes %}
                                    <div class="list-group-item border-0 px-0">
                                        <div class="row align-items-center">
                                            <div class="col">
                                                <h6 class="mb-1">
                                                    <a
                                                        href="{{ url_for('course.curso', course_code=curso.codigo) }}"
                                                        class="text-decoration-none"
                                                    >
                                                        {{ curso.nombre }}
                                                    </a>
                                                </h6>
                                                <small class="text-muted">
                                                    <i class="bi bi-calendar3 me-1"></i>
                                                    {{ _('Creado') }}: {{ curso.creado.strftime('%d/%m/%Y') if curso.creado
                                                    else 'N/A' }}
                                                </small>
                                            </div>
                                            <div class="col-auto">
                                                <span class="badge bg-primary">{{ curso.codigo }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                                {% else %}
                                <div class="text-center text-muted py-3">
                                    <i class="bi bi-book display-6 opacity-25"></i>
                                    <p class="mt-2 mb-0">{{ _('No hay cursos en el sistema') }}</p>
                                </div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- System Management Section -->
                        <div
                            class="card mb-3"
                            style="border-radius: 15px; border: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)"
                        >
                            <div class="card-header bg-warning bg-opacity-10">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-gear text-warning me-2"></i>{{ _('Gestión del Sistema') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-2">
                                        <a href="{{ url_for('user.crear_usuario') }}" class="btn btn-outline-primary w-100">
                                            <i class="bi bi-person-plus me-2"></i>{{ _('Nuevo Usuario') }}
                                        </a>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <a href="{{ url_for('setting.configuracion') }}" class="btn btn-outline-warning w-100">
                                            <i class="bi bi-gear me-2"></i>{{ _('Configuración') }}</a
                                        >
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <a href="{{ url_for('group.nuevo_grupo') }}" class="btn btn-outline-success w-100">
                                            <i class="bi bi-people me-2"></i>{{ _('Nuevo Grupo') }}
                                        </a>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <a href="{{ url_for('setting.personalizacion') }}" class="btn btn-outline-info w-100">
                                            <i class="bi bi-palette me-2"></i>{{ _('Personalización') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Advanced Tools -->
                        <div class="card" style="border-radius: 15px; border: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)">
                            <div class="card-header bg-info bg-opacity-10">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-tools text-info me-2"></i>{{ _('Herramientas Administrativas') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <!-- User Management -->
                                    <div class="col-md-6">
                                        <div class="card border-primary border-opacity-25">
                                            <div class="card-body p-3">
                                                <h6 class="card-title text-primary">
                                                    <i class="bi bi-people me-2"></i>{{ _('Gestión de Usuarios') }}
                                                </h6>
                                                <div class="d-grid gap-1">
                                                    <a
                                                        href="{{ url_for('admin_profile.usuarios') }}"
                                                        class="btn btn-sm btn-outline-primary"
                                                        >{{ _('Usuarios Activos') }}</a
                                                    >
                                                    <a
                                                        href="{{ url_for('admin_profile.usuarios_inactivos') }}"
                                                        class="btn btn-sm btn-outline-warning"
                                                        >{{ _('Usuarios Inactivos') }}</a
                                                    >
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- System Configuration -->
                                    <div class="col-md-6">
                                        <div class="card border-success border-opacity-25">
                                            <div class="card-body p-3">
                                                <h6 class="card-title text-success">
                                                    <i class="bi bi-gear me-2"></i>{{ _('Configuración') }}
                                                </h6>
                                                <div class="d-grid gap-1">
                                                    <a
                                                        href="{{ url_for('setting.configuracion') }}"
                                                        class="btn btn-sm btn-outline-success"
                                                        >{{ _('Sistema') }}</a
                                                    >
                                                    <a
                                                        href="{{ url_for('setting.mail') }}"
                                                        class="btn btn-sm btn-outline-success"
                                                        >{{ _('Correo SMTP') }}</a
                                                    >
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Content Management -->
                                    <div class="col-md-6">
                                        <div class="card border-warning border-opacity-25">
                                            <div class="card-body p-3">
                                                <h6 class="card-title text-warning">
                                                    <i class="bi bi-journal me-2"></i>{{ _('Contenido') }}
                                                </h6>
                                                <div class="d-grid gap-1">
                                                    <a
                                                        href="{{ url_for('blog.admin_blog_index') }}"
                                                        class="btn btn-sm btn-outline-warning"
                                                        >{{ _('Blog') }}</a
                                                    >
                                                    <a
                                                        href="{{ url_for('admin_announcements.list_announcements') }}"
                                                        class="btn btn-sm btn-outline-warning"
                                                        >{{ _('Anuncios') }}</a
                                                    >
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- System Tools -->
                                    <div class="col-md-6">
                                        <div class="card border-info border-opacity-25">
                                            <div class="card-body p-3">
                                                <h6 class="card-title text-info">
                                                    <i class="bi bi-tools me-2"></i>{{ _('Herramientas') }}
                                                </h6>
                                                <div class="d-grid gap-1">
                                                    <a
                                                        href="{{ url_for('setting.paypal') }}"
                                                        class="btn btn-sm btn-outline-info"
                                                        >{{ _('Pagos PayPal') }}</a
                                                    >
                                                    <a
                                                        href="{{ url_for('setting.adsense') }}"
                                                        class="btn btn-sm btn-outline-info"
                                                        >{{ _('AdSense') }}</a
                                                    >
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>
