{% extends '_layout/base' %}
{% import '_helpers/_image_webp' as media %}
{% import 'events/index' as self %}
{% macro getArticle(entry) %}
    <article class="event">
        <div class="event-inner c-content-box m-no-padding">
            <div class="event-image">
                <a href="{{ entry.url }}">
                    {{ media.getImage(entry.image.one(), 'event-image') }}
                </a>
            </div>
            <div class="event-core">

                <h2 class="event-title">
                    <a href="titulo-evento.html">
                        {{ entry.title }}
                    </a>
                </h2>
                <ul class="event-info">
                    <li class="event-date">
                        <i class="ico tp tp-calendar-full"></i>{{ entry.date | date("d mm, Y") }}
                    </li>
                    <li class="event-time">
                        <i class="ico tp tp-clock2"></i>{{ entry.date | date("H:i") }}
                    </li>
                    <li class="event-location">
                        <i class="ico tp tp-map-marker"></i>{{ entry.location }}
                    </li>
                </ul>
            </div>
        </div>
    </article>
{% endmacro %}
{% set body_classes = 'events-page' %}
{% paginate craft.entries.section('events')
    .limit(3)
    .orderBy('date asc')
    .date('>= now')
    as
    pageInfo,
    pageEntries
%}
{% set date = pageEntries[0].date| date("mm Y") %}
{% block content %}
    <div id="page-header" class="m-has-breadcrumbs">
        <div class="page-title">
            <h1>{{ entry.title }}</h1>
        </div>
        {% include '_components/breadcrumbs' with {
            class: 'black no-top-margin'
        } %}
    </div>
    <div id="page-content">
        <div class="page-content-inner">
            <div class="event-list-page event-page">
                <h2 class="group-title">{{ date }}</h2>
                {% for entry in pageEntries %}
                    {% if date == entry.date | date("mm Y") %}
                        {{ self.getArticle(entry) }}
                    {% else %}
                        {% set date = entry.date| date("mm Y") %}
                        <h2 class="group-title">{{ date }}</h2>
                        {{ self.getArticle(entry) }}
                    {% endif %}
                {% endfor %}
                {% include '_components/pagination' with {
                    pageInfo: pageInfo
                } %}
            </div>

        </div>
    </div>
{% endblock %}