<?xml version="1.0"?>
<t name="Card Layout" priority="10" t-name="website_event.dynamic_filter_template_event_event_card">
    <t t-foreach="records" t-as="data" data-extra-classes="g-3" data-column-classes="col-12 col-sm-6 col-lg-4 col-xxl-3">
        <t t-set="record" t-value="data['_record']._set_tz_context()"/>
        <a t-att-href="data['call_to_action_url']" class="s_events_event card h-100 text-decoration-none">
            <div class="s_events_event_cover">
                <t t-call="website.record_cover">
                    <t t-set="_record" t-value="record"/>
                    <t t-set="_resize_height" t-value="512"/>
                    <t t-set="_resize_width" t-value="512"/>

                    <div class="s_events_event_date position-absolute bg-white shadow-sm text-dark">
                        <span t-field="record.date_begin" t-options="{'format': 'LLL', 'tz_name': record.date_tz}" class="s_events_event_month fw-bold text-uppercase"/>
                        <span t-field="record.date_begin" t-options="{'format': 'dd', 'tz_name': record.date_tz}" class="s_events_event_day fw-light lh-1"/>
                    </div>
                </t>
            </div>
            <div class="card-body d-flex flex-column gap-2 justify-content-between">
                <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
                <div>
                    <div t-if="events_event_time_active" class="s_events_event_time mb-1 small fw-bold">
                        <span t-out="record.date_begin" t-options="{'widget': 'datetime', 'time_only': 'true', 'format': 'short', 'tz_name': record.date_tz}"/>
                        (<span t-out="record.date_tz.replace('_', ' ')"/>)
                    </div>
                    <h5 class="text-truncate" t-field="record.name"/>
                    <small class="text-muted" t-field="record.subtitle"/>
                </div>
                <div class="mt-2 fw-bold" t-field="record.address_id" t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true'}"/>
            </div>
        </a>
    </t>
</t>

