{{# Festival / FTFKids / Production Single Template #}}
{{ layout = 'layouts/default' }}

{{# TOP SECTION #}}
<section class="festival-single-top pt-4">
    <div class="container">
        <div class="row g-0 align-items-stretch">

            {{# Left: Heart + Share + Title | col-lg-4 #}}
            <div class="col-lg-4 festival-single-meta">
                <div class="h-100 d-flex flex-column">

                    {{# Row: Heart + Share #}}
                    <div class="row g-0 align-items-stretch collection-single-actions">
                        <div class="col-6 d-flex justify-content-center">
                            {{ partial:partials/likes id="{id}" count="{likes_count}" }}
                        </div>
                        <div class="col-6 d-flex justify-content-center bg-white">
                            <button class="share-btn d-flex align-items-center gap-2 text-uppercase"
                                    data-share-url="{{ current_url }}"
                                    data-share-title="{{ title }}">
                                <ion-icon name="share-social-outline"></ion-icon>
                                Share
                            </button>
                        </div>
                    </div>

                    {{# Title #}}
                    <div class="h-100 bg-white align-items-end d-flex px-4 pt-4 px-lg-5 pb-0">
                        <h1 class="festival-single-title mb-0">{{ title }}</h1>
                    </div>

                </div>
            </div>

            {{# Right: Vimeo Embedded | col-lg-8 #}}
            <div class="col-lg-8">
                <div class="festival-single-video h-100">
                    {{ if featured_video }}
                        {{ if featured_video | contains('vimeo') }}
                        {{ vimeo_id = featured_video | replace('https://vimeo.com/', '') | replace('https://player.vimeo.com/video/', '') }}
                        <div class="ratio ratio-16x9">
                            <iframe 
                                src="https://player.vimeo.com/video/{{ vimeo_id }}?autoplay=1&muted=1&title=0&byline=0&portrait=0&dnt=1"
                                frameborder="0" 
                                allow="autoplay; fullscreen; picture-in-picture"
                                allowfullscreen
                                title="{{ title }}">
                            </iframe>
                        </div>
                        {{ else if featured_video }}
                        <div class="ratio ratio-16x9">
                            <video controls class="w-100">
                                <source src="{{ featured_video }}" type="video/mp4">
                            </video>
                        </div>
                        {{ /if }}
                    {{ elseif featured_image }}
                    <img src="{{ featured_image }}" alt="{{ title }}" class="img-fluid w-100 h-100 object-fit-cover">
                    {{ /if }}
                </div>
            </div>

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

{{# CONTENT + PROGRAM SECTION #}}
<section class="festival-content-section">
    <div class="container">
        <div class="row g-0">

            {{# Content | col-lg-8 #}}
            <div class="col-lg-8">
                <div class="festival-description prose-content bg-white p-4 p-lg-5">
                    {{ content }}
                </div>
            </div>

            {{# Program + Download | col-lg-4 #}}
            <div class="col-lg-4 bg-white">
                <div class="program-block">
                    {{ if program_preview }}
                    <div class="program-preview-wrap">
                        <img src="{{ program_preview }}" alt="Program" class="img-fluid program-preview-img">
                    </div>
                    {{ /if }}

                    {{ if program_file }}
                    <a href="{{ program_file }}" 
                       class="btn-download text-uppercase d-flex align-items-center gap-2 justify-content-center py-4"
                       download>
                        <ion-icon name="download-outline"></ion-icon>
                        Download Program
                    </a>
                    {{ /if }}
                </div>
            </div>

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

{{# MEDIA GALLERY SECTION #}}
{{ if gallery }}
<section class="festival-gallery-section mt-px pb-5">
    <div class="container">
        <div class="row g-0">

            {{# Gallery | col-lg-8 #}}
            <div class="col-lg-8">
                <h3 class="section-label ps-4 ps-lg-5 text-uppercase my-4">Media</h3>
                <div class="p-5 px-lg-5 bg-white">
                    <div class="gallery-grid row g-2">
                        {{ gallery }}
                        <div class="col-3">
                            <a href="{{ url }}" 
                            data-fancybox="festival-gallery-{{ id }}"
                            data-caption="{{ alt ?? title }}">
                                <img src="{{ url }}" alt="{{ alt ?? title }}" class="img-fluid gallery-thumb w-100">
                            </a>
                        </div>
                        {{ /gallery }}
                    </div>
                </div>
            </div>

            {{# Poster + Download | col-lg-4 #}}
            <div class="col-lg-4">
                <div class="poster-block ms-px">
                    <h3 class="section-label text-uppercase text-center py-4 m-0">Poster</h3>
                    {{ if poster_image }}
                    <div class="poster-preview-wrap pt-4 pt-lg-5 bg-white">
                        <img src="{{ poster_image }}" alt="Official Poster - {{ title }}" class="img-fluid poster-preview-img">
                    </div>
                    <a href="{{ poster_image }}" 
                       class="btn-download text-uppercase d-flex align-items-center gap-2 justify-content-center py-4"
                       download>
                        <ion-icon name="download-outline"></ion-icon>
                        Download Poster
                    </a>
                    {{ /if }}
                </div>
            </div>

        </div>
    </div>
</section>
{{ /if }}