{% set iconClass="w-3 h-3 flex-none text-dpsgred-700 mr-2" %}

<div class="md:-mt-12" x-data="{
    ...eventoverview,
    state: '{{__SELF__.state}}',
    reloadRequestHandler: '{{__SELF__.alias}}::onReload',
    popupRequestHandler: '{{__SELF__.alias}}::onShowPopup'
}">

    <!-- ************************** heading and buttons ************************** -->
<!--
    <div class="flex justify-center md:justify-end">
        <a href="#" class="block btn btn-primary btn-shine px-8 flex" @click.prevent="showPast">
            <span class="absolute hidden items-center ml-2 top-0 left-0 h-full " :class="{'hidden': !loading, 'flex': loading}">
                <span class="w-5 h-5 border-primaryfg spinner-ring">
                  <span class="bounce1"></span>
                  <span class="bounce2"></span>
                  <span class="bounce3"></span>
                </span>
            </span>
            <span x-text="past ? 'Nur aktuelle anzeigen' : 'Vergangene anzeigen'">Vergangene anzeigen</span>
        </a>
    </div>

-->
    <!-- ****************************** event grid ******************************* -->
    <div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]" id="eventoverview-wrapper">
        {% partial __SELF__.alias ~ '::events.htm' events=__SELF__.events %}
    </div>

<div class="pt-12"></div>
        <event-overview
            style="--primary: {{__SELF__.settings.primary_color}}; --primaryfg: #d1f8ff; --secondary: #800a19; --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
            url-pattern="/anmeldung/{slug}"
            overview-url="/anmeldung"
            url="/api/silva_adrema_event_overview"
        ></event-overview>

    <!-- ********************************* popup ********************************* -->
</div>