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

{% block content %}

<style>
    /* ── PAGE SHELL ─────────────────────────────── */
    .res-page {
        padding-bottom: 5rem;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.08), transparent 28%),
            radial-gradient(circle at 85% 18%, rgba(13, 110, 253, 0.07), transparent 30%),
            linear-gradient(180deg, #f5f9ff 0%, #ffffff 50%, #f8fbff 100%);
    }

    /* ── HERO ───────────────────────────────────── */
    .res-hero {
        background-color: #07131c;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: #fff;
        position: relative;
        overflow: hidden;
    }

    .res-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.14), transparent 32%),
            radial-gradient(circle at bottom right, rgba(32, 201, 151, 0.16), transparent 34%);
        pointer-events: none;
        z-index: 1;
    }

    .res-hero-overlay {
        position: relative;
        z-index: 2;
        padding: 5rem 0 4rem;
        background:
            linear-gradient(
                90deg,
                rgba(7, 19, 28, 0.94) 0%,
                rgba(7, 19, 28, 0.84) 38%,
                rgba(11, 61, 145, 0.58) 68%,
                rgba(15, 118, 110, 0.38) 100%
            );
    }

    .res-hero .section-mini-title {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .45rem .9rem;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.16);
        border: 1px solid rgba(255, 193, 7, 0.32);
        color: #ffd36b;
        font-size: .82rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin-bottom: 1rem;
        backdrop-filter: blur(10px);
    }

    .res-hero h1,
    .res-hero h2 {
        color: #ffffff;
        font-weight: 900;
        letter-spacing: -0.035em;
    }

    .res-hero p {
        color: rgba(255,255,255,.82);
        line-height: 1.75;
    }

    /* ── LANGUAGE SELECTOR ──────────────────────── */
    .lang-selector-wrap {
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid rgba(13, 110, 253, 0.10);
        padding: 1.25rem 0;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 8px 24px rgba(7, 19, 28, 0.06);
        backdrop-filter: blur(12px);
    }

    .lang-label {
        font-size: .78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: #64748b;
        white-space: nowrap;
    }

    .lang-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: .45rem .9rem;
        border: 1px solid rgba(13, 110, 253, 0.14);
        border-radius: 999px;
        background: #fff;
        color: #102033;
        font-size: .85rem;
        font-weight: 700;
        cursor: pointer;
        transition: all .18s ease;
        text-decoration: none;
        white-space: nowrap;
    }

    .lang-btn:hover {
        transform: translateY(-1px);
        border-color: rgba(13, 110, 253, 0.30);
        background: #f8fbff;
        color: #0d6efd;
        box-shadow: 0 5px 14px rgba(13, 110, 253, .10);
    }

    .lang-btn.active {
        color: #fff;
        border-color: transparent;
        box-shadow: 0 6px 18px rgba(13, 110, 253, .18);
    }

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

    /* Language color themes retained */
    .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, #07131c, #0d6efd);
        color: #fff;
    }

    /* ── RESOURCE CARD ──────────────────────────── */
    .resource-card {
        background: #fff;
        border: 1px solid rgba(13, 110, 253, 0.10);
        border-radius: 18px;
        overflow: hidden;
        height: 100%;
        transition: box-shadow .2s, transform .2s, border-color .2s;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
    }

    .resource-card:hover {
        box-shadow: 0 22px 52px rgba(15, 23, 42, .12);
        transform: translateY(-4px);
        border-color: rgba(13, 110, 253, 0.24);
    }

    .resource-card-header {
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.14), transparent 34%),
            linear-gradient(135deg, #07131c, #0b3d91 62%, #0f766e);
        padding: 1.25rem 1.5rem;
        color: #fff;
    }

    .resource-card-header .badge-lang {
        display: inline-block;
        background: rgba(255,193,7,.18);
        color: #ffd36b;
        border: 1px solid rgba(255,193,7,.35);
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        padding: .2rem .7rem;
        margin-bottom: .6rem;
    }

    .resource-card-header h5 {
        font-weight: 800;
        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: .65rem 1rem;
        border-radius: 12px;
        border: 1px solid rgba(13, 110, 253, 0.12);
        text-decoration: none;
        font-size: .875rem;
        font-weight: 700;
        color: #102033;
        background: #f8fbff;
        transition: background .15s, border-color .15s, transform .15s, color .15s;
    }

    .dl-btn:hover {
        background: #eef5ff;
        border-color: rgba(13, 110, 253, 0.28);
        color: #0d6efd;
        transform: translateY(-1px);
    }

    .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; }
    .dl-btn.dl-summary i  { color: #0d6efd; }
    .dl-btn.dl-visa-doc i { color: #0f766e; }
    .dl-btn.dl-visa-slides i { color: #fd7e14; }
    .dl-btn.dl-visa-audio i { color: #6f42c1; }

    /* ── VIDEO FRAME ────────────────────────────── */
    .video-wrapper {
        border-radius: 14px;
        overflow: hidden;
        background: #07131c;
        position: relative;
        padding-top: 56.25%;
        margin-top: .75rem;
        box-shadow: 0 14px 30px rgba(7, 19, 28, 0.14);
    }

    .video-wrapper iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    /* ── EMPTY STATE ────────────────────────────── */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #64748b;
    }

    .empty-state i {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        display: block;
        color: #0d6efd;
    }

    /* ── RESOURCE COUNT BADGE ───────────────────── */
    .count-badge {
        display: inline-block;
        background: linear-gradient(135deg, #ffd36b, #ffc107);
        color: #231707;
        font-size: .72rem;
        font-weight: 800;
        border-radius: 999px;
        padding: .1rem .55rem;
        margin-left: 6px;
        vertical-align: middle;
    }

    .audio-player-wrap {
        background: #f8fbff;
        border: 1px solid rgba(13, 110, 253, 0.12);
        border-radius: 14px;
        padding: .75rem;
    }

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

    .dn-visa-mini-title {
        display: flex;
        align-items: center;
        gap: .45rem;
        font-size: .78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #0f766e;
        padding-top: .35rem;
        border-top: 1px dashed rgba(13, 110, 253, 0.18);
    }

    .dn-visa-mini-title i {
        font-size: .95rem;
        color: #0f766e;
    }

    .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/info_center_hero.webp' %}');">
        <div class="res-hero-overlay">
            <div class="container">
                <span class="section-mini-title d-block mb-2">Guides, Downloads &amp; Media</span>
                <h1 class="fw-bold mb-2">Sri Lanka Living Guide</h1>
                <p class="lead mb-0" style="max-width:560px;">
                    Learn more about comfortable long-stay living in Sri Lanka through multilingual guides, presentations, audio, and video overviews.
                </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 %}