{{ push:scripts }}
    {{ header_script }}
{{ /push:scripts }}

<div class="relative design-block">
    {{ if banner }}
    <div class="blurred-banner-wrapper">
        <img src="{{ banner }}" class="hidden md:block w-full object-cover max-h-96" alt="{{ title }}"/>
        <img src="{{ banner_mobile ?? banner }}" class="w-full block md:hidden object-cover max-h-96" alt="{{ title }}"/>
        <div class="black-tint"></div>
    </div>
        
    {{ /if }}

    <div class="py-5">
        {{ partial:/components/container }}
            {{ partial:/components/breadcrumbs_light }}
        {{ /partial:/components/container }}
    </div>

    <div class="my-6">
        {{ partial:/components/container }}
            {{ partial:/components/card class="shadow-xl" }}
                <img src="{{ banner }}" class="hidden md:block object-cover w-full max-h-[500px] rounded-xl" alt="{{ title }}"/>
                <img src="{{ banner_mobile ?? banner }}" class="block md:hidden object-cover w-full max-h-[500px] rounded-xl" alt="{{ title }}"/>
            {{ /partial:/components/card }}
        {{ /partial:/components/container }}
    </div>

    {{ partial:/components/container }}
        {{ partial:/components/event_count_down }}
    {{ /partial:/components/container }}

    {{ partial:/components/container }}
        <div class="py-5">
            <h1 class="text-4xl md:text-5xl">{{ title }}</h1>
            {{ content }}
        </div>
    {{ /partial:/components/container }}

    {{ partial:/components/bard }}
</div>

{{ partial:/components/section title="Other Events" cta_label="View all" cta_url="/whats-on" }}
    {{ partial:/components/swiper_container swiper="event_details_swiper" }}
        {{ collection:events hide_on_slider:not="false" sort="sort_date:asc"}}
            <div class="swiper-slide">
                {{ partial src="/components/list_widget/type_event" }}
            </div>
        {{ /collection:events }}
    {{ /partial:/components/swiper_container }}
{{ /partial:/components/section }}