{{#
    Home Event Partial
    Usage: {{ partial:partials/home-event :event="entry" }}
    Or simply call from a context where event fields are available
#}}

{{ if event }}
{{ entry = event }}
{{ /if }}

<a href="{{ url }}" class="home-event-link d-block text-decoration-none">
    <div class="home-event featured-event bg-white">
        <div class="row g-0 align-items-stretch">

            {{# Title - col-lg-6 #}}
            <div class="col-lg-6">
                <div class="featured-event-info p-3 px-lg-5 h-100 d-flex flex-column justify-content-center">
                    <h1 class="fw-light featured-event-title text-center">{{ title }}</h1>
                </div>
            </div>

            {{# Featured Image - col-lg-3 #}}
            <div class="col-xl-4 col-lg-3">
                <div class="featured-event-image h-100">
                    {{ if featured_image }}
                    <img src="{{ featured_image }}" alt="{{ entry:title }}" class="img-fluid w-100 h-100 object-fit-cover">
                    {{ else }}
                    <div class="img-placeholder bg-secondary h-100 d-flex align-items-center justify-content-center">
                        <ion-icon name="image-outline" size="large" style="color: #666;"></ion-icon>
                    </div>
                    {{ /if }}
                </div>
            </div>

            {{# Date - col-lg-3 #}}
            <div class="col-xl-2 col-lg-3">
                <div class="featured-event-date p-4 h-100 d-flex flex-column align-items-center justify-content-center">
                    <div class="event-date-display text-center">
                        <div class="event-day-num">{{ date format="j" }}</div>
                        <div class="event-month-year text-uppercase">{{ date format="F Y" }}</div>
                    </div>
                </div>
            </div>

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