{% set current_theme = current_theme() %}
<!doctype html>
{% set config = config() %}
<html lang="es" class="h-100">
    <head>
        {{ current_theme.headertags() }}
        <title>{{ _('Cursos Disponibles') }}</title>

        {{ current_theme.local_style() }}

        <!-- Custom styles for this template -->
        <link href="{{ url_for('static', filename='css/sidebars.css') }}" rel="stylesheet" />

        <!-- Modern course explore page styles -->
        <style>
            .modern-course-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                gap: 2rem;
                margin-bottom: 2rem;
            }

            .modern-course-card {
                background: white;
                border-radius: 16px;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
                overflow: hidden;
                transition: all 0.3s ease;
                position: relative;
            }

            .modern-course-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
            }

            .course-image-container {
                position: relative;
                width: 100%;
                height: 200px;
                overflow: hidden;
            }

            .course-image-container img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.3s ease;
            }

            .modern-course-card:hover .course-image-container img {
                transform: scale(1.05);
            }

            .course-level-badge {
                position: absolute;
                top: 12px;
                right: 12px;
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(10px);
                border-radius: 20px;
                padding: 6px 12px;
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 0.75rem;
                font-weight: 600;
                color: var(--classic-text);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            .course-level-icon {
                width: 16px;
                height: 16px;
            }

            .course-card-body {
                padding: 1.5rem;
            }

            .course-title {
                font-size: 1.25rem;
                font-weight: 700;
                color: var(--classic-text);
                margin-bottom: 0.75rem;
                line-height: 1.3;
            }

            .course-description {
                color: var(--classic-text-secondary);
                font-size: 0.95rem;
                line-height: 1.5;
                margin-bottom: 1.5rem;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .course-meta {
                display: flex;
                justify-content: between;
                align-items: center;
                margin-bottom: 1.25rem;
                gap: 1rem;
            }

            .course-duration {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                color: var(--classic-text-secondary);
                font-size: 0.85rem;
            }

            .course-price {
                font-weight: 700;
                color: var(--classic-primary);
                font-size: 1.1rem;
            }

            .course-price.free {
                color: #22c55e;
            }

            .course-action-btn {
                width: 100%;
                background: var(--classic-primary);
                color: white;
                border: none;
                border-radius: 12px;
                padding: 12px 20px;
                font-weight: 600;
                text-decoration: none;
                display: inline-block;
                text-align: center;
                transition: all 0.3s ease;
                box-shadow: 0 4px 15px rgba(46, 46, 46, 0.2);
            }

            .course-action-btn:hover {
                background: var(--classic-secondary);
                color: white;
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(46, 46, 46, 0.3);
                text-decoration: none;
            }

            .modern-sidebar {
                background: white;
                border-radius: 16px;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
                padding: 2rem;
                position: sticky;
                top: 2rem;
            }

            .sidebar-title {
                font-size: 1.5rem;
                font-weight: 700;
                color: var(--classic-text);
                margin-bottom: 2rem;
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }

            .filter-section {
                margin-bottom: 2rem;
            }

            .filter-section:last-child {
                margin-bottom: 0;
            }

            .filter-title {
                font-weight: 600;
                color: var(--classic-text);
                margin-bottom: 1rem;
                font-size: 1.1rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
                padding: 0.75rem 0;
                border-bottom: 2px solid #f1f5f9;
                transition: all 0.3s ease;
            }

            .filter-title:hover {
                color: var(--classic-primary);
            }

            .filter-options {
                padding-top: 1rem;
            }

            .filter-option {
                display: block;
                padding: 0.75rem 1rem;
                color: var(--classic-text-secondary);
                text-decoration: none;
                border-radius: 8px;
                margin-bottom: 0.5rem;
                transition: all 0.3s ease;
                font-weight: 500;
            }

            .filter-option:hover {
                background: var(--classic-light);
                color: var(--classic-primary);
                text-decoration: none;
                transform: translateX(4px);
            }

            .pagination-modern {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 3rem 0;
                gap: 1rem;
            }

            .pagination-info {
                background: white;
                padding: 1rem 2rem;
                border-radius: 12px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
                color: var(--classic-text-secondary);
                font-weight: 500;
            }

            .pagination-nav a {
                background: var(--classic-primary);
                color: white;
                padding: 0.75rem 1.5rem;
                border-radius: 12px;
                text-decoration: none;
                font-weight: 600;
                transition: all 0.3s ease;
                box-shadow: 0 4px 15px rgba(46, 46, 46, 0.2);
            }

            .pagination-nav a:hover {
                background: var(--classic-secondary);
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(46, 46, 46, 0.3);
                text-decoration: none;
                color: white;
            }

            .page-header {
                margin-bottom: 3rem;
            }

            .breadcrumb-modern {
                background: white;
                border-radius: 12px;
                padding: 1rem 1.5rem;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
                margin-bottom: 2rem;
            }

            .icon-courses {
                width: 24px;
                height: 24px;
                fill: currentColor;
            }

            @media (max-width: 768px) {
                .modern-course-grid {
                    grid-template-columns: 1fr;
                    gap: 1.5rem;
                }

                .modern-sidebar {
                    margin-top: 2rem;
                    position: static;
                }

                .course-card-body {
                    padding: 1.25rem;
                }
            }
        </style>
    </head>

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

        <main>
            <div class="container px-0 py-4">
                <div class="page-header">
                    <div class="breadcrumb-modern">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item">
                                    <a class="text-reset text-decoration-none link-dark" href="/index">{{ _('Inicio') }}</a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">{{ _('Cursos disponibles') }}</li>
                            </ol>
                        </nav>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-8">
                        <!-- Pagination Top -->
                        <div class="pagination-modern">
                            <div class="pagination-info">
                                {{ cursos.total }} {{ _('cursos encontrados') }} - {{ _('Página') }} {{ cursos.page }} {{
                                _('de') }} {{ cursos.pages }}
                            </div>
                            {% if cursos.has_next %}
                            <div class="pagination-nav">
                                <a href="{{ url_for('course.lista_cursos', page=cursos.next_num) }}">
                                    {{ _('Siguiente') }} →
                                </a>
                            </div>
                            {% endif %}
                        </div>

                        <!-- Modern Course Grid -->
                        <div class="modern-course-grid">
                            {% for curso in cursos.items %}
                            <div class="modern-course-card">
                                <div class="course-image-container">
                                    {% if curso.portada %}
                                    <img
                                        src="{{ url_for('static', filename='/files/public/images/' + curso.codigo + '/logo.jpg') }}"
                                        alt="{{ curso.nombre }}"
                                    />
                                    {% else %}
                                    <div
                                        style="
                                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            height: 100%;
                                            color: white;
                                            font-weight: 600;
                                            font-size: 1.1rem;
                                        "
                                    >
                                        {{ curso.nombre[:20] }}...
                                    </div>
                                    {% endif %}

                                    <!-- Level Badge -->
                                    <div class="course-level-badge">
                                        {% if curso.nivel == 0 %}
                                        <svg class="course-level-icon" viewBox="0 0 20 20" fill="currentColor">
                                            <path
                                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                                            />
                                        </svg>
                                        {{ _('Introductorio') }} {% elif curso.nivel == 1 %}
                                        <svg class="course-level-icon" viewBox="0 0 20 20" fill="currentColor">
                                            <path
                                                fill-rule="evenodd"
                                                d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                                clip-rule="evenodd"
                                            />
                                        </svg>
                                        {{ _('Principiante') }} {% elif curso.nivel == 2 %}
                                        <svg class="course-level-icon" viewBox="0 0 20 20" fill="currentColor">
                                            <path
                                                fill-rule="evenodd"
                                                d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z"
                                                clip-rule="evenodd"
                                            />
                                        </svg>
                                        {{ _('Intermedio') }} {% elif curso.nivel == 3 %}
                                        <svg class="course-level-icon" viewBox="0 0 20 20" fill="currentColor">
                                            <path
                                                d="M9.664 17l-2.426-4.81a9.983 9.983 0 001.676-1.06L10 13.666l1.086-2.536a9.983 9.983 0 001.676 1.06L10.336 17H9.664z"
                                            />
                                            <path
                                                d="M8.5 1c4.396 0 8 2.686 8 6 0 1.398-.481 2.71-1.328 3.768-.339.424-.74.806-1.182 1.144L10 15l-3.99-3.088A5.984 5.984 0 014.5 7c0-3.314 3.604-6 8-6z"
                                            />
                                        </svg>
                                        {{ _('Avanzado') }} {% endif %}
                                    </div>
                                </div>

                                <div class="course-card-body">
                                    <h5 class="course-title">{{ curso.nombre }}</h5>
                                    <p class="course-description">{{ curso.descripcion | truncate(120) }}</p>

                                    <div class="course-meta">
                                        {% if curso.duracion %}
                                        <div class="course-duration">
                                            <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
                                                <path
                                                    fill-rule="evenodd"
                                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
                                                    clip-rule="evenodd"
                                                />
                                            </svg>
                                            {{ curso.duracion }} mins
                                        </div>
                                        {% endif %}

                                        <div class="course-price {% if not curso.precio %}free{% endif %}">
                                            {% if curso.precio %} {{ curso.precio | float }} {{ config.moneda }} {% else %} {{
                                            _('Gratis') }} {% endif %}
                                        </div>
                                    </div>

                                    <a
                                        href="{{ url_for('course.curso', course_code=curso.codigo) }}"
                                        class="course-action-btn"
                                    >
                                        {{ _('Ver Curso') }}
                                    </a>
                                </div>
                            </div>
                            {% endfor %}
                        </div>

                        <!-- Pagination Bottom -->
                        <div class="pagination-modern">
                            {% if cursos.has_prev %}
                            <div class="pagination-nav">
                                <a href="{{ url_for('course.lista_cursos', page=cursos.prev_num) }}">
                                    ← {{ _('Anterior') }}
                                </a>
                            </div>
                            {% endif %}

                            <div class="pagination-info">
                                {{ _('Página') }} {{ cursos.page }} {{ _('de') }} {{ cursos.pages }} - {{ cursos.total }} {{
                                _('cursos encontrados') }}
                            </div>

                            {% if cursos.has_next %}
                            <div class="pagination-nav">
                                <a href="{{ url_for('course.lista_cursos', page=cursos.next_num) }}">
                                    {{ _('Siguiente') }} →
                                </a>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Modern Sidebar -->
                    <div class="col-lg-4">
                        <div class="modern-sidebar">
                            <h5 class="sidebar-title">
                                <svg class="icon-courses" viewBox="0 0 20 20" fill="currentColor">
                                    <path
                                        d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"
                                    />
                                </svg>
                                {{ _('Filtrar Cursos') }}
                            </h5>

                            <!-- Categories Filter -->
                            <div class="filter-section">
                                <div
                                    class="filter-title"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#categories-filter"
                                    aria-expanded="true"
                                >
                                    {{ _('Categorías') }}
                                    <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
                                        <path
                                            fill-rule="evenodd"
                                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                            clip-rule="evenodd"
                                        />
                                    </svg>
                                </div>
                                <div class="collapse show filter-options" id="categories-filter">
                                    {% for categoria in categorias %}
                                    <a
                                        href="{{ url_for('course.lista_cursos') + parametros_url(parametros=parametros, arg='category', val=categoria.nombre, char='?') }}"
                                        class="filter-option"
                                    >
                                        {{ categoria.nombre }}
                                    </a>
                                    {% endfor %}
                                </div>
                            </div>

                            <!-- Tags Filter -->
                            <div class="filter-section">
                                <div
                                    class="filter-title"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#tags-filter"
                                    aria-expanded="false"
                                >
                                    {{ _('Etiquetas') }}
                                    <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
                                        <path
                                            fill-rule="evenodd"
                                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                            clip-rule="evenodd"
                                        />
                                    </svg>
                                </div>
                                <div class="collapse filter-options" id="tags-filter">
                                    {% for etiqueta in etiquetas %}
                                    <a
                                        href="{{ url_for('course.lista_cursos') + parametros_url(parametros=parametros, arg='tag', val=etiqueta.nombre, char='?') }}"
                                        class="filter-option"
                                    >
                                        {{ etiqueta.nombre }}
                                    </a>
                                    {% endfor %}
                                </div>
                            </div>

                            <!-- Level Filter -->
                            <div class="filter-section">
                                <div
                                    class="filter-title"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#level-filter"
                                    aria-expanded="false"
                                >
                                    {{ _('Nivel') }}
                                    <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
                                        <path
                                            fill-rule="evenodd"
                                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                            clip-rule="evenodd"
                                        />
                                    </svg>
                                </div>
                                <div class="collapse filter-options" id="level-filter">
                                    <a
                                        href="{{ url_for('course.lista_cursos') + parametros_url(parametros=parametros, arg='nivel', val='0', char='?') }}"
                                        class="filter-option"
                                    >
                                        {{ _('Introductorio') }}
                                    </a>
                                    <a
                                        href="{{ url_for('course.lista_cursos') + parametros_url(parametros=parametros, arg='nivel', val='1', char='?') }}"
                                        class="filter-option"
                                    >
                                        {{ _('Principiante') }}
                                    </a>
                                    <a
                                        href="{{ url_for('course.lista_cursos') + parametros_url(parametros=parametros, arg='nivel', val='2', char='?') }}"
                                        class="filter-option"
                                    >
                                        {{ _('Intermedio') }}
                                    </a>
                                    <a
                                        href="{{ url_for('course.lista_cursos') + parametros_url(parametros=parametros, arg='nivel', val='3', char='?') }}"
                                        class="filter-option"
                                    >
                                        {{ _('Avanzado') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>
