<div i18n:domain="ploneintranet" id="event-list-${view/category}"
     tal:define="
        date2month_name nocall:here/@@proto/date2month_name;
        plone_view here/@@plone;
        dummy context/@@http-cache-headers;
      ">
    <tal:events repeat="event view/items">
      <article class="item item-${repeat/event/number} event-card"
          tal:define="
            event event/getObject;
          "
          tal:condition="nocall:event"
      >
        <a class="pat-inject follow pat-switch"
           href="${event/absolute_url}#document-body"
           data-pat-inject="source: #document-body::element; target: #document-body::element; history: record"
           data-pat-switch="selector: #application-body; remove: focus-*; add: focus-document &amp;&amp; selector: body; remove: sidebar-large; add: sidebar-normal"
        >

          <figure class="branded ${python:not event.image and 'has-no-image'}">
            <!-- The minimum required width for an image on a span-full tile is 1070px. The minimum height for span-full tile is 460px. The minimum dimensions for an image on a span-2 tile or span-1 tile is 700 * 394 px. These are minimum sizes. Modern hi-dpi screens also benefit from higher resolutions, should band-width allow.  -->
            <img tal:condition="event/image" class="illustration" style="background-image: url(${event/absolute_url}/@@images/image/large)" src="${here/portal_url}/++theme++ploneintranet.theme/generated/assets/quaive/placeholders/placeholder-16x9.png" alt="">
          </figure>
          <div class="teaser">
            <h3 class="title">${event/Title}</h3>
            <time class="event-date">
              <span class="month">${python:date2month_name(event.start, short=True)}</span>
              <span class="day">${python:event.start.strftime('%d')}</span>
            </time>
            <p class="byline"
               tal:define="location event/location;"
               tal:condition="location">${location}</p>
          </div>
        </a>
      </article>
    </tal:events>

    <article id="${injection_id}"
        tal:define="
          injection_id string:injection-target-${view/category};
        "
        tal:condition="view/next_page_url"
    >
      <a class="pat-inject infinite-scrolling-trigger"
         href="${view/next_page_url}"
         data-pat-inject="source: #event-list-${view/category}; target: #${injection_id}::element;trigger: autoload-visible"
         i18n:translate=""
      >Load more&hellip;</a>
    </article>
</div>
