{{# Homepage Template #}}
{{ layout = 'layouts/default' }}

{{# HERO SLIDER SECTION #}}
<section class="hero-slider-section mt-5">
    <div class="container">
        {{ collection:sliders location:contains="homepage" limit="1" scope="slider" }}

        <div class="row g-0 align-items-stretch">

            {{# Left: Likes + Bullets + Title | col-lg-4 #}}
            <div class="col-lg-4 slider-meta-col">
                <div class="row g-0 align-items-stretch h-50">

                    <div class="col-6 d-flex justify-content-center align-items-center" id="home-slider-likes">
                        {{ collection:slides sort="order" slider_id:contains="{slider:id}" }}
                            <div class="slide-like-item" style="display: none;">
                                {{ partial:partials/likes id="{id}" count="{likes_count ?? 0}" }}
                            </div>
                        {{ /collection:slides }}
                    </div>

                    <div class="col-6 d-flex justify-content-center bg-white">
                        <div class="slider-bullets-vertical py-3 justify-content-center" id="home-slider-bullets"></div>
                    </div>

                </div>

                <div class="slider-current-title h-50 bg-white justify-content-center d-flex align-items-center">
                    <h1 class="hero-title"></h1>
                </div>
            </div>

            {{# Slides | col-lg-8 #}}
            <div class="col-lg-8 slider-main-col">
                <div class="hero-slider home-slider" id="home-slider">
                    {{ collection:slides sort="order" slider_id:contains="{slider:id}" }}
                        <div class="slide-item" data-slide-title="{{ title }}">
                            <div class="slide-inner">
                                {{ if featured_image }}
                                <a href="{{ link ?? '#' }}">
                                    <img src="{{ featured_image }}" alt="{{ title }}" class="slide-img img-fluid">
                                </a>
                                {{ /if }}
                            </div>
                        </div>
                    {{ /collection:slides }}
                </div>
            </div>

        </div>

        {{ /collection:sliders }}
    </div>
</section>

{{# EVENTS SECTION #}}
<section class="events-section">
    <div class="container">
        <div class="row g-0">
            <div class="bg-white col-lg-3 col-md-6 col-12 ms-auto">
                <h2 class="section-label text-uppercase text-center mb-0 py-4">Events</h2>
            </div>
        </div>

        {{# Get next upcoming event, fallback to most recent #}}
        {{ collection:events
            orderby="date:asc"
            where:date:gte="{today}"
            limit:1
            as="upcoming_events"
        }}
        {{ if upcoming_events }}
            {{ upcoming_events }}
            {{ if first }}
            {{ partial:partials/home-event :entry="this" }}
            {{ /if }}
            {{ /upcoming_events }}
        {{ else }}
            {{ collection:events
                orderby="date:desc"
                limit:1
                as="recent_events"
            }}
            {{ recent_events }}
            {{ if first }}
            {{ partial:partials/home-event :entry="this" }}
            {{ /if }}
            {{ /recent_events }}
        {{ /if }}
        {{ /collection:events }}

    </div>
</section>

{{# PARTNERS SECTION #}}
<section class="partners-section">
    <div class="container">
        <div class="row align-items-stretch g-0">

            {{# Partners Title | col-lg-4 #}}
            <div class="col-xl-3 col-lg-4">
                <div class="partners-label-col d-flex align-items-center h-100">
                    <h2 class="section-label text-uppercase">Partners</h2>
                </div>
            </div>

            {{# Partners Carousel | col-lg-8 #}}
            <div class="col-xl-9 col-lg-8 bg-white mt-5">
                <div class="align-items-center h-100 d-flex">
                    <div class="partners-carousel w-100" id="partners-carousel">
                        {{ collection:partners orderby="order" }}
                        <div class="w-100">
                            <div class="partner-slide ">
                                <div class="partner-logo-wrap">
                                    {{ if link }}
                                    <a href="{{ link }}" target="_blank" rel="noopener" aria-label="{{ title }}">
                                    {{ /if }}
                                        {{ if logo }}
                                        <img src="{{ logo }}" alt="{{ title }}" class="partner-logo img-fluid">
                                        {{ else }}
                                        <span class="partner-name">{{ title }}</span>
                                        {{ /if }}
                                    {{ if link }}
                                    </a>
                                    {{ /if }}
                                </div>
                            </div>
                        </div>
                        {{ /collection:partners }}
                    </div>
                </div>
            </div>

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