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

    <head>
        {{ current_theme.headertags() }}

        <title>{{ _('Panel del Instructor') }}</title>

        {{ current_theme.local_style() }}
        <style>
            .instructor-header {
                background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
                color: white;
                border-radius: 10px;
                margin-bottom: 2rem;
            }
            .instructor-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;
            }
            .instructor-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="instructor-header p-4 mb-4">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h2 class="mb-1">
                                <i class="bi bi-mortarboard me-2"></i>

                                {{ _('Bienvenido, Instructor') }} {{ current_user.nombre }} {{ current_user.apellido }}
                            </h2>
                            <p class="mb-0 opacity-75">{{ _('Tu centro de enseñanza y gestión académica') }}</p>
                        </div>
                        <div class="col-md-4 text-end">
                            <a
                                href="{{ url_for('instructor_profile.cursos') }}"
                                class="btn btn-light"
                                style="border-radius: 25px"
                            >
                                <i class="bi bi-book me-1"></i> {{ _('Ver Cursos') }}
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Instructor 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 instructor-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-book-half me-2"></i>{{ _('Cursos Creados') }}
                                                    </h6>
                                                    <h2 class="mb-0 text-primary">{{ created_courses }}</h2>
                                                    <small class="text-muted">{{ _('Total de cursos') }}</small>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="bi bi-book-half stat-icon text-primary"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <a
                                                    href="{{ url_for('instructor_profile.cursos') }}"
                                                    class="btn btn-outline-primary btn-sm"
                                                >
                                                    <i class="bi bi-eye me-1"></i>{{ _('Ver Cursos') }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <div class="card instructor-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-people me-2"></i>{{ _('Estudiantes Inscritos') }}
                                                    </h6>
                                                    <h2 class="mb-0 text-success">{{ enrolled_students }}</h2>
                                                    <small class="text-muted">{{ _('En mis cursos') }}</small>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="bi bi-people stat-icon text-success"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <a
                                                    href="{{ url_for('instructor_profile.cursos') }}"
                                                    class="btn btn-outline-success btn-sm"
                                                >
                                                    <i class="bi bi-person-lines-fill me-1"></i>{{ _('Ver Estudiantes') }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <div class="card instructor-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-clipboard-check me-2"></i>{{ _('Evaluaciones') }}
                                                    </h6>
                                                    <h2 class="mb-0 text-warning">{{ created_evaluations }}</h2>
                                                    <small class="text-muted">{{ _('Evaluaciones creadas') }}</small>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="bi bi-clipboard-check stat-icon text-warning"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <a
                                                    href="{{ url_for('instructor_profile.evaluaciones_lista') }}"
                                                    class="btn btn-outline-warning btn-sm"
                                                >
                                                    <i class="bi bi-list-check me-1"></i>{{ _('Ver Evaluaciones') }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <div class="card instructor-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-camera-video me-2"></i>{{ _('Clases Magistrales') }}
                                                    </h6>
                                                    <h2 class="mb-0 text-info">--</h2>
                                                    <small class="text-muted">{{ _('Clases disponibles') }}</small>
                                                </div>
                                                <div class="col-auto">
                                                    <i class="bi bi-camera-video stat-icon text-info"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <a
                                                    href="{{ url_for('masterclass.instructor_list') }}"
                                                    class="btn btn-outline-info btn-sm"
                                                >
                                                    <i class="bi bi-play me-1"></i>{{ _('Ver Clases') }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Instructor Management Section -->
                    <div class="col-xl-6 col-xxl-7">
                        <!-- My 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>{{ _('Mis Cursos Recientes') }}
                                        </h5>
                                    </div>
                                    <div class="col-auto">
                                        <a
                                            href="{{ url_for('instructor_profile.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_por_fecha %}
                                <div class="list-group list-group-flush">
                                    {% for curso in cursos_por_fecha %}
                                    <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.administrar_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 creados aún') }}</p>
                                    <a href="{{ url_for('course.nuevo_curso') }}" class="btn btn-primary mt-2">
                                        <i class="bi bi-plus me-1"></i>{{ _('Crear Primer Curso') }}
                                    </a>
                                </div>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Quick Actions 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-success bg-opacity-10">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-lightning text-success me-2"></i>{{ _('Acciones Rápidas') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-2">
                                        <a href="{{ url_for('course.nuevo_curso') }}" class="btn btn-outline-primary w-100">
                                            <i class="bi bi-plus-circle me-2"></i>{{ _('Nuevo Curso') }}
                                        </a>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <a
                                            href="{{ url_for('instructor_profile.nueva_evaluacion_global') }}"
                                            class="btn btn-outline-warning w-100"
                                        >
                                            <i class="bi bi-clipboard-plus me-2"></i>{{ _('Nueva Evaluación') }}
                                        </a>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <a
                                            href="{{ url_for('program.nuevo_programa') }}"
                                            class="btn btn-outline-success w-100"
                                        >
                                            <i class="bi bi-diagram-3 me-2"></i>{{ _('Nuevo Programa') }}
                                        </a>
                                    </div>
                                    <div class="col-md-6 mb-2">
                                        <a
                                            href="{{ url_for('masterclass.instructor_create') }}"
                                            class="btn btn-outline-info w-100"
                                        >
                                            <i class="bi bi-camera-video me-2"></i>{{ _('Nueva Clase') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Management 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 de Gestión') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    <!-- Courses and Programs -->
                                    <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-book me-2"></i>{{ _('Cursos y Programas') }}
                                                </h6>
                                                <div class="d-grid gap-1">
                                                    <a
                                                        href="{{ url_for('instructor_profile.cursos') }}"
                                                        class="btn btn-sm btn-outline-primary"
                                                        >{{ _('Mis Cursos') }}</a
                                                    >
                                                    <a
                                                        href="{{ url_for('program.programas') }}"
                                                        class="btn btn-sm btn-outline-primary"
                                                        >{{ _('Programas') }}</a
                                                    >
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Content Management -->
                                    <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-folder me-2"></i>{{ _('Contenido') }}
                                                </h6>
                                                <div class="d-grid gap-1">
                                                    <a
                                                        href="{{ url_for('resource.lista_de_recursos') }}"
                                                        class="btn btn-sm btn-outline-success"
                                                        >{{ _('Recursos') }}</a
                                                    >
                                                    <a href="{{ url_for('tag.tags') }}" class="btn btn-sm btn-outline-success"
                                                        >{{ _('Etiquetas') }}</a
                                                    >
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Evaluation and Certification -->
                                    <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-award me-2"></i>{{ _('Evaluación y Certificación') }}
                                                </h6>
                                                <div class="d-grid gap-1">
                                                    <a
                                                        href="{{ url_for('instructor_profile.evaluaciones_lista') }}"
                                                        class="btn btn-sm btn-outline-warning"
                                                        >{{ _('Evaluaciones') }}</a
                                                    >
                                                    <a
                                                        href="{{ url_for('certificate.certificados') }}"
                                                        class="btn btn-sm btn-outline-warning"
                                                        >{{ _('Certificados') }}</a
                                                    >
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Communication -->
                                    <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-chat me-2"></i>{{ _('Comunicación') }}
                                                </h6>
                                                <div class="d-grid gap-1">
                                                    <a
                                                        href="{{ url_for('blog.instructor_blog_index') }}"
                                                        class="btn btn-sm btn-outline-info"
                                                        >{{ _('Blog') }}</a
                                                    >
                                                    <a
                                                        href="{{ url_for('instructor_announcements.list_announcements') }}"
                                                        class="btn btn-sm btn-outline-info"
                                                        >{{ _('Anuncios') }}</a
                                                    >
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>
