{% extends 'base.html.twig' %}

{% block title %}{{ range.title }} - Cool Baby Academy{% endblock %}

{% block customNavigation %}
    {% include "base/nav-customer.html.twig" %}
{% endblock %}

{% block customStyle %}
    <style>
        .cba-range-page {
            min-height: 100vh;
            background:
                radial-gradient(circle at top right, rgba(79,190,206,.10), transparent 22%),
                radial-gradient(circle at bottom left, rgba(255,37,157,.08), transparent 18%),
                #f7f8fc;
            color: #12304a;
        }

        .cba-range-hero {
            padding: 44px 0 28px;
        }

        .cba-range-back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 22px;
            color: #617286 !important;
            font-size: .95rem;
            font-weight: 800;
            text-decoration: none !important;
            transition: color .2s ease, transform .2s ease;
        }

        .cba-range-back:hover {
            color: #2b91a2 !important;
            transform: translateX(-2px);
        }

        .cba-range-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(79,190,206,.12);
            color: #2b91a2;
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .04em;
            margin-bottom: 16px;
        }

        .cba-range-title {
            max-width: 850px;
            margin-bottom: 14px;
            color: #12304a;
            font-size: 3rem;
            line-height: 1.06;
            font-weight: 900;
        }

        .cba-range-title .accent {
            color: #4fbece;
        }

        .cba-range-text {
            max-width: 760px;
            margin: 0;
            color: #617286;
            font-size: 1.05rem;
            line-height: 1.8;
        }

        .cba-range-content {
            padding: 12px 0 48px;
        }

        .cba-range-head {
            text-align: center;
            margin-bottom: 30px;
        }

        .cba-range-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 8px 14px;
            margin-bottom: 14px;
            border-radius: 999px;
            background: rgba(79,190,206,.12);
            color: #2b91a2;
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .cba-range-section-title {
            margin-bottom: 10px;
            color: #12304a;
            font-size: 2.1rem;
            font-weight: 900;
        }

        .cba-range-section-text {
            max-width: 760px;
            margin: 0 auto;
            color: #66768a;
            line-height: 1.8;
        }

        /*
         * Styles repris de la grille "Choisis le bon contenu"
         * afin que les cartes gardent exactement la même présentation.
         */

        .cba-month-card {
            height: 100%;
            background: #fff;
            border: 1px solid rgba(18,48,74,.06);
            border-radius: 26px;
            overflow: hidden;
            box-shadow: 0 18px 50px rgba(17,38,60,.08);
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .cba-month-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 24px 60px rgba(17,38,60,.14);
        }

        .cba-month-cover {
            position: relative;
            height: 220px;
            overflow: hidden;
            background: linear-gradient(
                135deg,
                rgba(79,190,206,.18),
                rgba(255,37,157,.12)
            );
        }

        .cba-month-cover img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .cba-month-cover-fallback {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4fbece;
            font-size: 3rem;
            background: linear-gradient(
                135deg,
                rgba(79,190,206,.12),
                rgba(255,255,255,.6)
            );
        }

        .cba-month-body {
            padding: 24px 22px 20px;
        }

        .cba-month-status {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            margin-bottom: 14px;
            border-radius: 999px;
            background: rgba(18,48,74,.06);
            color: #12304a;
            font-size: .86rem;
            font-weight: 800;
        }

        .cba-month-status.is-complete {
            background: rgba(55,178,113,.12);
            color: #24935a;
        }

        .cba-month-name {
            margin-bottom: 10px;
            color: #12304a;
            font-size: 1.45rem;
            font-weight: 900;
        }

        .cba-month-description {
            min-height: 86px;
            margin-bottom: 18px;
            color: #66768a;
            line-height: 1.75;
        }

        .cba-month-progress-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }

        .cba-month-progress-label {
            color: #12304a;
            font-size: .93rem;
            font-weight: 800;
        }

        .cba-month-progress-value {
            color: #7a8898;
            font-size: .92rem;
            font-weight: 800;
        }

        .cba-month-progress {
            height: 12px;
            margin-bottom: 20px;
            border-radius: 999px;
            overflow: hidden;
            background: #edf2f7;
        }

        .cba-month-progress-bar {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(
                90deg,
                #4fbece 0%,
                #7fd8e3 100%
            );
        }

        .cba-month-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .cba-btn-primary,
        .cba-btn-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 13px 18px;
            border-radius: 14px;
            font-weight: 800;
            text-decoration: none !important;
            transition: all .2s ease;
        }

        .cba-btn-primary {
            background: linear-gradient(
                135deg,
                #ff259d 0%,
                #ff5ab5 100%
            );
            color: #fff !important;
            box-shadow: 0 16px 28px rgba(255,37,157,.22);
        }

        .cba-btn-secondary {
            background: rgba(18,48,74,.06);
            color: #12304a !important;
        }

        .cba-btn-primary:hover,
        .cba-btn-secondary:hover {
            transform: translateY(-2px);
        }

        .cba-empty-card {
            padding: 46px 30px;
            background: #fff;
            border: 1px solid rgba(18,48,74,.06);
            border-radius: 26px;
            box-shadow: 0 18px 50px rgba(17,38,60,.08);
            text-align: center;
        }

        .cba-empty-icon {
            width: 76px;
            height: 76px;
            margin: 0 auto 20px;
            border-radius: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(79,190,206,.14);
            color: #2e9fb0;
            font-size: 30px;
        }

        .cba-empty-title {
            margin-bottom: 12px;
            color: #12304a;
            font-size: 1.7rem;
            font-weight: 900;
        }

        .cba-empty-text {
            max-width: 650px;
            margin: 0 auto 24px;
            color: #66768a;
            line-height: 1.8;
        }

        .cba-pagination-wrap {
            padding-top: 10px;
        }

        .cba-range-footer {
            margin-top: 30px;
            text-align: center;
        }

        .cba-range-footer-back {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 13px 18px;
            border-radius: 14px;
            background: rgba(18,48,74,.06);
            color: #12304a !important;
            font-weight: 800;
            text-decoration: none !important;
            transition: transform .2s ease, background .2s ease;
        }

        .cba-range-footer-back:hover {
            transform: translateY(-2px);
            background: rgba(18,48,74,.10);
        }

        @media (max-width: 991.98px) {
            .cba-range-title {
                font-size: 2.35rem;
            }
        }

        @media (max-width: 767.98px) {
            .cba-range-hero {
                padding-top: 30px;
            }

            .cba-range-title {
                font-size: 2rem;
            }

            .cba-range-section-title {
                font-size: 1.65rem;
            }

            .cba-month-description {
                min-height: auto;
            }

            .cba-month-actions {
                flex-direction: column;
            }

            .cba-btn-primary,
            .cba-btn-secondary {
                width: 100%;
            }

            .cba-empty-card {
                padding: 36px 20px;
            }
        }
    </style>
{% endblock %}


{% block body %}
    <div class="cba-range-page">

        {# HERO #}
        <section class="cba-range-hero">
            <div class="container">

                <a href="{{ path('app_classes') }}" class="cba-range-back">
                    <i class="fas fa-arrow-left"></i>
                    Retour à tous mes contenus
                </a>

                <br>

                <span class="cba-range-badge">
                    <i class="fas {{ range.icon }}"></i>
                    {{ range.short_title }}
                </span>

                <h1 class="cba-range-title">
                    Tes contenus
                    <span class="accent">{{ range.title }}</span>
                </h1>

                <p class="cba-range-text">
                    {{ range.description }}
                </p>
            </div>
        </section>


        {# CONTENUS #}
        <section class="cba-range-content">
            <div class="container">

                <div class="cba-range-head">
                    <span class="cba-range-chip">
                        <i class="fas {{ range.icon }}"></i>
                        Cool Baby Academy
                    </span>

                    <h2 class="cba-range-section-title">
                        Les contenus disponibles
                    </h2>

                    <p class="cba-range-section-text">
                        Seuls les contenus déjà débloqués dans le parcours de ton enfant
                        sont affichés ici.
                    </p>
                </div>


                {% if hasContent and contentCbaBaby|length > 0 %}

                    <div class="row">
                        {% for content in contentCbaBaby %}
                            <div class="col-xl-4 col-md-6 mb-4">

                                {% include 'classes/_month_card.html.twig' with {
                                    content: content
                                } only %}

                            </div>
                        {% endfor %}
                    </div>


                    <div class="cba-pagination-wrap d-flex justify-content-center">
                        {% do contentCbaBaby.setPageRange(2) %}
                        {{ knp_pagination_render(
                            contentCbaBaby,
                            'base/pagination.html.twig'
                        ) }}
                    </div>

                {% elseif not hasContent %}

                    <div class="cba-empty-card">

                        <div class="cba-empty-icon">
                            <i class="fas {{ range.icon }}"></i>
                        </div>

                        <h3 class="cba-empty-title">
                            {{ range.empty_title }}
                        </h3>

                        <p class="cba-empty-text">
                            {{ range.empty_text }}
                        </p>

                        <a href="{{ path('app_classes') }}" class="cba-btn-primary">
                            <i class="fas fa-arrow-left"></i>
                            Voir tous mes contenus
                        </a>

                    </div>

                {% else %}

                    {#
                        Cas rare : du contenu existe mais la page de pagination
                        demandée ne contient aucun résultat.
                    #}
                    <div class="cba-empty-card">

                        <div class="cba-empty-icon">
                            <i class="fas fa-layer-group"></i>
                        </div>

                        <h3 class="cba-empty-title">
                            Aucun contenu sur cette page
                        </h3>

                        <p class="cba-empty-text">
                            Reviens à la liste pour retrouver les contenus disponibles
                            dans cette étape.
                        </p>

                        <a
                            href="{{ path('app_classes_range', {'range': rangeKey}) }}"
                            class="cba-btn-primary"
                        >
                            <i class="fas fa-arrow-left"></i>
                            Revenir au début
                        </a>

                    </div>

                {% endif %}


                <div class="cba-range-footer">
                    <a href="{{ path('app_classes') }}" class="cba-range-footer-back">
                        <i class="fas fa-th-large"></i>
                        Retour à tous mes contenus
                    </a>
                </div>

            </div>
        </section>

    </div>
{% endblock %}