{{# Event Single Template #}}
{{ layout = 'layouts/default' }}

<section class="event-single py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 offset-lg-2">

                {{# Featured Image #}}
                {{ if featured_image }}
                <div class="event-single-img mb-4">
                    <img src="{{ featured_image }}" alt="{{ title }}" class="img-fluid w-100">
                </div>
                {{ /if }}

                {{# Title + Meta #}}
                <div class="d-flex justify-content-between align-items-start mb-4">
                    <h1 class="event-single-title">{{ title }}</h1>
                    <div class="event-single-meta text-end ms-4">
                        <div class="event-date-num">{{ date format="j" }}</div>
                        <div class="event-date-month text-uppercase">{{ date format="F Y" }}</div>
                        {{ if hour }}
                        <div class="event-time mt-1">{{ hour }}</div>
                        {{ /if }}
                    </div>
                </div>

                {{# Likes #}}
                {{ partial:partials/likes id="{id}" count="{likes_count}" }}

                {{# Description #}}
                {{ if content }}
                <div class="event-single-content prose-content mt-4">
                    {{ content }}
                </div>
                {{ /if }}

            </div>
        </div>

        {{# Photos Gallery #}}
        {{ if photos }}
        <div class="row mt-5">
            <div class="col-12">
                <h3 class="section-label text-uppercase mb-4">Photos</h3>
                <div class="gallery-grid row g-2">
                    {{ photos }}
                    <div class="col-lg-3 col-md-4 col-6">
                        <a href="{{ url }}" data-fancybox="event-photos-{{ id }}">
                            <img src="{{ url }}" alt="{{ alt ?? title }}" class="img-fluid gallery-thumb w-100">
                        </a>
                    </div>
                    {{ /photos }}
                </div>
            </div>
        </div>
        {{ /if }}

    </div>
</section>