{% set current_theme = current_theme() %}
<!doctype html>
<html lang="{{ current_locale() }}" class="h-100">
    <head>
        {{ current_theme.headertags() }} {{ current_theme.local_style() }}
        <title>{{ _('Panel de Moderación') }}</title>

        <style>
            .moderator-header {
                background: linear-gradient(135deg, #dc3545 0%, #a71e2a 100%);
                color: white;
                border-radius: 10px;
                margin-bottom: 2rem;
            }
            .moderator-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;
            }
            .moderator-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
            }
            .bd-placeholder-img {
                font-size: 1.125rem;
                text-anchor: middle;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
            }

            @media (min-width: 768px) {
                .bd-placeholder-img-lg {
                    font-size: 3.5rem;
                }
            }
        </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="moderator-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, Moderador') }} {{ current_user.nombre }} {{ current_user.apellido }}
                            </h2>
                            <p class="mb-0 opacity-75">{{ _('Tu centro de moderación y supervisión académica') }}</p>
                        </div>
                        <div class="col-md-4 text-end">
                            <a
                                href="{{ url_for('msg.admin_flagged_messages') }}"
                                class="btn btn-light"
                                style="border-radius: 25px"
                            >
                                <i class="bi bi-flag me-1"></i> {{ _('Ver Reportes') }}
                            </a>
                        </div>
                    </div>
                </div>

                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-3">
                    <!-- Messages Section -->
                    <div class="col d-flex align-items-start">
                        <h3><i class="bi bi-chat-right-text-fill text-primary" aria-hidden="true"></i></h3>
                        <div class="ms-3">
                            <h4 class="fw-bold mb-0">{{ _('Mensajes') }}</h4>
                            <p class="text-muted">{{ _('Gestiona las conversaciones de usuarios') }}</p>
                            <p>
                                <a href="{{ url_for('msg.user_messages') }}" class="link-dark">{{ _('Ver Mis Mensajes') }}</a>
                            </p>
                        </div>
                    </div>

                    <!-- Flagged Messages Section -->
                    <div class="col d-flex align-items-start">
                        <h3><i class="bi bi-exclamation-triangle-fill text-warning" aria-hidden="true"></i></h3>
                        <div class="ms-3">
                            <h4 class="fw-bold mb-0">{{ _('Mensajes Reportados') }}</h4>
                            <p class="text-muted">{{ _('Revisa contenido reportado por usuarios') }}</p>
                            <p>
                                <a href="{{ url_for('msg.admin_flagged_messages') }}" class="link-dark"
                                    >{{ _('Ver Reportes') }}</a
                                >
                            </p>
                        </div>
                    </div>

                    <!-- Profile Management -->
                    <div class="col d-flex align-items-start">
                        <h3><i class="bi bi-person-vcard text-info" aria-hidden="true"></i></h3>
                        <div class="ms-3">
                            <h4 class="fw-bold mb-0">{{ _('Mi Perfil') }}</h4>
                            <p class="text-muted">{{ _('Actualiza tu información personal') }}</p>
                            <p>
                                <a href="{{ url_for('user_profile.perfil') }}" class="link-dark">{{ _('Ver Perfil') }}</a>
                            </p>
                        </div>
                    </div>

                    <!-- Calendar Access -->
                    <div class="col d-flex align-items-start">
                        <h3><i class="bi bi-calendar3 text-success" aria-hidden="true"></i></h3>
                        <div class="ms-3">
                            <h4 class="fw-bold mb-0">{{ _('Calendario') }}</h4>
                            <p class="text-muted">{{ _('Revisa fechas importantes') }}</p>
                            <p>
                                <a href="{{ url_for('calendar.calendar_view') }}" class="link-dark"
                                    >{{ _('Ver Calendario') }}</a
                                >
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions Section -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-lightning-charge" aria-hidden="true"></i>
                                    {{ _('Acciones Rápidas') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="d-flex flex-wrap gap-2">
                                    <a href="{{ url_for('msg.user_messages') }}" class="btn btn-primary btn-sm">
                                        <i class="bi bi-envelope"></i> {{ _('Mis Mensajes') }}
                                    </a>
                                    <a href="{{ url_for('msg.admin_flagged_messages') }}" class="btn btn-warning btn-sm">
                                        <i class="bi bi-exclamation-circle"></i> {{ _('Mensajes Reportados') }}
                                    </a>
                                    <a href="{{ url_for('calendar.calendar_view') }}" class="btn btn-success btn-sm">
                                        <i class="bi bi-calendar"></i> {{ _('Calendario') }}
                                    </a>
                                    <a href="{{ url_for('user_profile.perfil') }}" class="btn btn-info btn-sm">
                                        <i class="bi bi-person-circle"></i> {{ _('Mi Perfil') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>
