{% extends 'affiliates_app/base_affiliate.html' %}
{% load static %}
{% load expat_extras %}
{% block title %}Resources | Live in Sri Lanka{% endblock %}

{% block content %}

<style>
    /* ── PAGE SHELL ─────────────────────────────── */
    .res-page { padding-bottom: 5rem; }

    /* ── HERO ───────────────────────────────────── */
    .res-hero {
        background-color: #0e1a22;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: #fff;
        position: relative;
    }

    .res-hero-overlay {
        padding: 5rem 0 4rem;
        background: linear-gradient(
            90deg,
            rgba(14, 26, 34, 0.88) 0%,
            rgba(14, 26, 34, 0.70) 38%,
            rgba(14, 26, 34, 0.35) 68%,
            rgba(14, 26, 34, 0.15) 100%
        );
    }
    .res-hero .section-mini-title { color: #ffc107; }
    .res-hero p { color: rgba(255,255,255,.72); }

    /* ── LANGUAGE SELECTOR ──────────────────────── */
    .lang-selector-wrap {
        background: #fff;
        border-bottom: 1px solid #e9ecef;
        padding: 1.25rem 0;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }
    .lang-label {
        font-size: .78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: #5a6a72;
        white-space: nowrap;
    }
    .lang-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: .4rem .85rem;
        border: 1px solid #dee2e6;
        border-radius: 999px;
        background: #fff;
        color: #0e1a22;
        font-size: .85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all .18s ease;
        text-decoration: none;
        white-space: nowrap;
    }
    .lang-btn:hover {
        border-color: #0e1a22;
        background: #f8f9fa;
        color: #0e1a22;
    }
    .lang-btn.active {
        background: #0e1a22;
        border-color: #0e1a22;
        color: #fff;
    }
    .lang-btn .lang-flag { font-size: 1.1rem; line-height: 1; }

    /* ── RESOURCE CARD ──────────────────────────── */
    .resource-card {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        overflow: hidden;
        height: 100%;
        transition: box-shadow .2s, transform .2s;
    }
    .resource-card:hover {
        box-shadow: 0 8px 24px rgba(14,26,34,.10);
        transform: translateY(-3px);
    }
    .resource-card-header {
        background: #0e1a22;
        padding: 1.25rem 1.5rem;
        color: #fff;
    }
    .resource-card-header .badge-lang {
        display: inline-block;
        background: rgba(255,193,7,.18);
        color: #ffc107;
        border: 1px solid rgba(255,193,7,.35);
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        padding: .2rem .7rem;
        margin-bottom: .6rem;
    }
    .resource-card-header h5 {
        font-weight: 700;
        font-size: 1rem;
        margin: 0;
        line-height: 1.35;
    }
    .resource-card-body { padding: 1.25rem 1.5rem; }

    /* ── DOWNLOAD BUTTONS ───────────────────────── */
    .resource-downloads { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
    .dl-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: .6rem 1rem;
        border-radius: 8px;
        border: 1px solid #dee2e6;
        text-decoration: none;
        font-size: .875rem;
        font-weight: 500;
        color: #0e1a22;
        background: #f8f9fa;
        transition: background .15s, border-color .15s;
    }
    .dl-btn:hover { background: #e9ecef; border-color: #adb5bd; color: #0e1a22; }
    .dl-btn i { font-size: 1.1rem; flex-shrink: 0; }
    .dl-btn.dl-brochure i { color: #dc3545; }
    .dl-btn.dl-slides   i { color: #fd7e14; }
    .dl-btn.dl-audio    i { color: #6f42c1; }

    /* ── VIDEO FRAME ────────────────────────────── */
    .video-wrapper {
        border-radius: 8px;
        overflow: hidden;
        background: #0e1a22;
        position: relative;
        padding-top: 56.25%;
        margin-top: .75rem;
    }
    .video-wrapper iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    /* ── EMPTY STATE ────────────────────────────── */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #8a9ba8;
    }
    .empty-state i { font-size: 2.5rem; margin-bottom: 1rem; display: block; }

    /* ── RESOURCE COUNT BADGE ───────────────────── */
    .count-badge {
        display: inline-block;
        background: #ffc107;
        color: #0e1a22;
        font-size: .72rem;
        font-weight: 700;
        border-radius: 999px;
        padding: .1rem .55rem;
        margin-left: 6px;
        vertical-align: middle;
    }

    .lang-btn .lang-flag {
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .04em;
        line-height: 1;
        background: rgba(14, 26, 34, .08);
        color: #0e1a22;
        padding: .18rem .35rem;
        border-radius: 6px;
    }

    .lang-btn.active .lang-flag {
        background: rgba(255,255,255,.18);
        color: #fff;
    }

    .audio-player-wrap {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: .75rem;
    }

    .audio-player-wrap audio {
        display: block;
        height: 38px;
    }

    .lang-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: .45rem .9rem;
        border: 1px solid #dee2e6;
        border-radius: 999px;
        background: #fff;
        color: #0e1a22;
        font-size: .85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all .18s ease;
        text-decoration: none;
        white-space: nowrap;
    }

    .lang-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(0,0,0,.08);
    }

    .lang-btn .lang-flag {
        font-size: 1.05rem;
        line-height: 1;
    }

    /* Active button */
    .lang-btn.active {
        color: #fff;
        border-color: transparent;
        box-shadow: 0 6px 18px rgba(14,26,34,.18);
    }

    /* Language color themes */
    .lang-btn.lang-en.active {
        background: linear-gradient(135deg, #012169, #c8102e);
    }

    .lang-btn.lang-nl.active {
        background: linear-gradient(135deg, #ae1c28, #21468b);
    }

    .lang-btn.lang-zh.active {
        background: linear-gradient(135deg, #de2910, #ffde00);
        color: #111;
    }

    .lang-btn.lang-ja.active {
        background: linear-gradient(135deg, #ffffff, #bc002d);
        color: #111;
        border: 1px solid #e5e7eb;
    }

    .lang-btn.lang-fr.active {
        background: linear-gradient(135deg, #0055a4, #ef4135);
    }

    .lang-btn.lang-es.active {
        background: linear-gradient(135deg, #aa151b, #f1bf00);
        color: #111;
    }

    .lang-btn.lang-it.active {
        background: linear-gradient(135deg, #008c45, #cd212a);
    }

    .lang-btn.lang-de.active {
        background: linear-gradient(135deg, #000000, #dd0000, #ffce00);
    }

    .lang-btn.lang-pt.active {
        background: linear-gradient(135deg, #006600, #ff0000);
    }

    .lang-btn.lang-ru.active {
        background: linear-gradient(135deg, #ffffff, #0039a6, #d52b1e);
        color: #111;
        border: 1px solid #e5e7eb;
    }

    .lang-btn.lang-hi.active {
        background: linear-gradient(135deg, #ff9933, #ffffff, #138808);
        color: #111;
        border: 1px solid #e5e7eb;
    }

    .lang-btn.lang-all.active {
        background: linear-gradient(135deg, #0e1a22, #334155);
        color: #fff;
    }

    .dn-visa-mini-title {
        display: flex;
        align-items: center;
        gap: .45rem;
        font-size: .78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #198754;
        padding-top: .35rem;
        border-top: 1px dashed #d8dee4;
    }

    .dn-visa-mini-title i {
        font-size: .95rem;
    }

    .dl-btn.dl-summary i {
        color: #0d6efd;
    }

    .dl-btn.dl-visa-doc i {
        color: #198754;
    }

    .dl-btn.dl-visa-slides i {
        color: #fd7e14;
    }

    .dl-btn.dl-visa-audio i {
        color: #6f42c1;
    }   

    .scroll-anchor {
        position: relative;
        top: -120px;
        visibility: hidden;
    }
</style>

<div class="res-page">

    <!-- HERO -->
    <section class="res-hero" style="background-image: url('{% static 'expat_life/images/marketing_resources_hero.webp' %}');">
        <div class="res-hero-overlay">
            <div class="container">
                <span class="section-mini-title d-block mb-2">Downloads &amp; Media</span>
                <h1 class="fw-bold mb-2">Marketing Resources</h1>
                <p class="lead mb-0" style="max-width:560px;">
                    Access brochures, presentations, audio guides, and video resources to help you confidently promote Sri Lanka living opportunities.
                </p>
            </div>
        </div>
    </section>

    <!-- LANGUAGE SELECTOR (sticky) -->
    <div class="lang-selector-wrap">
        <div class="container">
            <div class="d-flex align-items-center gap-3 flex-wrap">
                <span class="lang-label">Select Your Language:</span>
                <div class="d-flex flex-wrap gap-2">

                    <a href="?lang=all{% if request.GET.audience %}&audience={{ request.GET.audience }}{% endif %}"
                       class="lang-btn {% if not selected_lang or selected_lang == 'all' %}active{% endif %}">
                        All
                    </a>

                    {% for code, name in language_choices %}
                    <a href="?lang={{ code }}{% if request.GET.audience %}&audience={{ request.GET.audience }}{% endif %}"
                    class="lang-btn lang-{{ code }} {% if selected_lang == code %}active{% endif %}">
                        <span class="lang-flag">{{ code|language_flag }}</span>
                        {{ name }}
                    </a>
                    {% endfor %}

                </div>
            </div>
        </div>
    </div>

    <!-- RESOURCES GRID -->
    <section class="py-5">
        <div class="container">

            <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
                <h2 class="fw-bold mb-0" style="font-size:1.3rem;">
                    Available Resources
                    <span class="count-badge">{{ resources|length }}</span>
                </h2>
            </div>

            {% if resources %}
            <div class="row g-4">
                {% for resource in resources %}
                <div class="col-md-6 col-lg-4">
                    <div class="resource-card">

                        <div class="resource-card-header">
                            <div class="badge-lang">
                                {{ resource.get_language_display }}
                            </div>
                            <h5>{{ resource.title }}</h5>
                        </div>

                        <div class="resource-card-body">

                            <!-- Downloads -->
                            <div class="resource-downloads">

                                {% if resource.full_brochure_pdf %}
                                <a href="{{ resource.full_brochure_pdf.url }}" class="dl-btn dl-brochure" download>
                                    <i class="bi bi-file-earmark-pdf-fill"></i>
                                    Full Brochure PDF
                                    <i class="bi bi-download ms-auto" style="font-size:.85rem; color:#adb5bd;"></i>
                                </a>
                                {% endif %}

                                {% if resource.summary_overview_pdf %}
                                <a href="{{ resource.summary_overview_pdf.url }}" class="dl-btn dl-summary" download>
                                    <i class="bi bi-file-earmark-text-fill"></i>
                                    Summary Overview PDF
                                    <i class="bi bi-download ms-auto" style="font-size:.85rem; color:#adb5bd;"></i>
                                </a>
                                {% endif %}

                                {% if resource.presentation_pdf %}
                                <a href="{{ resource.presentation_pdf.url }}" class="dl-btn dl-slides" download>
                                    <i class="bi bi-file-earmark-slides-fill"></i>
                                    Presentation PDF
                                    <i class="bi bi-download ms-auto" style="font-size:.85rem; color:#adb5bd;"></i>
                                </a>
                                {% endif %}

                                {% if resource.audio_file %}
                                <a href="{{ resource.audio_file.url }}" class="dl-btn dl-audio" download>
                                    <i class="bi bi-file-earmark-music-fill"></i>
                                    Download Audio Guide
                                    <i class="bi bi-download ms-auto" style="font-size:.85rem; color:#adb5bd;"></i>
                                </a>

                                <div class="audio-player-wrap mt-3">
                                    <audio controls preload="metadata" class="w-100">
                                        <source src="{{ resource.audio_file.url }}" type="audio/mpeg">
                                        Your browser does not support the audio element.
                                    </audio>
                                </div>
                                {% endif %}

                                <!-- Video -->
                                {% if resource.video_link %}
                                {% with resource.video_link|video_embed_url as embed_url %}
                                    {% if embed_url %}
                                    <div class="video-wrapper">
                                        <iframe
                                            src="{{ embed_url }}"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                            referrerpolicy="strict-origin-when-cross-origin"
                                            allowfullscreen
                                            loading="lazy"
                                            title="{{ resource.title }} video">
                                        </iframe>
                                    </div>
                                    {% endif %}
                                {% endwith %}
                                {% endif %}

                                {% if not resource.full_brochure_pdf and not resource.summary_overview_pdf and not resource.presentation_pdf and not resource.audio_file and not resource.video_link and not resource.digital_nomad_visa_process_pdf and not resource.digital_nomad_visa_presentation_pdf and not resource.digital_nomad_visa_audio_file %}
                                <p class="text-muted small mb-0">No files attached yet.</p>
                                {% endif %}

                                <div id="digital-nomad-visa-process" class="scroll-anchor"></div>
                                <!-- Digital Nomad Visa Process Resources -->
                                {% if resource.digital_nomad_visa_process_pdf or resource.digital_nomad_visa_presentation_pdf or resource.digital_nomad_visa_audio_file %}
                                
                                <div class="dn-visa-mini-title mt-3">
                                    <i class="bi bi-passport-fill"></i>
                                    <span>Digital Nomad Visa Process</span>
                                </div>
                                {% endif %}

                                {% if resource.digital_nomad_visa_process_pdf %}
                                <a href="{{ resource.digital_nomad_visa_process_pdf.url }}" class="dl-btn dl-visa-doc" download>
                                    <i class="bi bi-file-earmark-pdf-fill"></i>
                                    Visa Process Document
                                    <i class="bi bi-download ms-auto" style="font-size:.85rem; color:#adb5bd;"></i>
                                </a>
                                {% endif %}

                                {% if resource.digital_nomad_visa_presentation_pdf %}
                                <a href="{{ resource.digital_nomad_visa_presentation_pdf.url }}" class="dl-btn dl-visa-slides" download>
                                    <i class="bi bi-file-earmark-slides-fill"></i>
                                    Illustrative Presentation
                                    <i class="bi bi-download ms-auto" style="font-size:.85rem; color:#adb5bd;"></i>
                                </a>
                                {% endif %}

                                {% if resource.digital_nomad_visa_audio_file %}
                                <a href="{{ resource.digital_nomad_visa_audio_file.url }}" class="dl-btn dl-visa-audio" download>
                                    <i class="bi bi-file-earmark-music-fill"></i>
                                    Visa Audio Explainer
                                    <i class="bi bi-download ms-auto" style="font-size:.85rem; color:#adb5bd;"></i>
                                </a>

                                <div class="audio-player-wrap mt-3">
                                    <audio controls preload="metadata" class="w-100">
                                        <source src="{{ resource.digital_nomad_visa_audio_file.url }}" type="audio/mpeg">
                                        Your browser does not support the audio element.
                                    </audio>
                                </div>
                                {% endif %}

                            </div>



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

            {% else %}
            <div class="empty-state">
                <i class="bi bi-folder2-open"></i>
                <h5 class="fw-bold">No resources found</h5>
                <p class="text-muted">
                    {% if selected_lang and selected_lang != 'all' %}
                        No resources available in this language yet. Try selecting a different language.
                    {% else %}
                        No resources have been published yet. Check back soon.
                    {% endif %}
                </p>
                <a href="?lang=all" class="btn btn-outline-dark mt-2">View all languages</a>
            </div>
            {% endif %}

        </div>
    </section>

</div>

{% endblock %}