<?xml version="1.0"?>
<t name="Picture Layout" priority="5" t-name="website_event.dynamic_filter_template_event_event_picture">
    <div t-foreach="records" t-as="data" class="s_events_event w-100" data-extra-classes="g-3" data-column-classes="col-12 col-sm-6 col-lg-4">
        <t t-set="record" t-value="data['_record']._set_tz_context()"/>
        <a class="s_events_event_cover position-relative d-flex align-items-center rounded overflow-hidden text-decoration-none ratio ratio-1x1" t-att-href="data['call_to_action_url']">
            <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"/>
                <t t-set="use_filters" t-value="True"/>
                <t t-set="additionnal_classes" t-value="'h-100 w-100 bg-600 position-absolute'"/>
            </t>

            <div class="text-center w-100 h-100 px-3 d-flex flex-column justify-content-center flex-grow-1">
                <div t-if="is_sample" class="h5 o_ribbon_right bg-primary text-uppercase">Sample</div>
                <h3 class="text-white" t-field="record.name"/>
                <time t-att-datetime="record.date_begin" class="text-white">
                    <span t-out="record.date_begin" t-options="{'widget': 'datetime', 'date_only': 'true', 'format': 'long', 'tz_name': record.date_tz}"/>
                    <span t-if="events_event_time_active" class="s_events_event_time">
                        - <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('_', ' ')"/>)
                    </span>
                </time>
            </div>
        </a>
    </div>
</t>

