{% load i18n %}
{% for post in posts %}
  <div class="fr-col fr-col-md-6">
    <div class="fr-card fr-enlarge-link">
      <div class="fr-card__body">
        <div class="fr-card__content">
          <h3 class="fr-card__title">
            <a href="{{ post.url }}">{{ post.title }}</a>
          </h3>
          <p class="fr-card__desc fr-icon-calendar-event-fill">
            {% if post.event_date_start.date == post.event_date_end.date %}
              {{ post.event_date_start.date }}
            {% elif post.event_date_start.year == post.event_date_end.year and post.event_date_start.month == post.event_date_end.month %}
              {{ post.event_date_start.day }} – {{ post.event_date_end.date }}
            {% elif post.event_date_start.year == post.event_date_end.year %}
              {{ post.event_date_start|date:"j F" }} – {{ post.event_date_end|date:"j F Y" }}
            {% else %}
              {{ post.event_date_start.date }} – {{ post.event_date_end.date }}
            {% endif %}
          </p>
          {% if post.event_categories.all %}
            <div class="fr-card__start">
              <ul class="fr-tags-group">
                {% for cat in post.event_categories.all %}
                  <li>
                    <p class="fr-tag">{{ cat.name }}</p>
                  </li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        </div>
      </div>
      {% if post.cover %}
        <div class="fr-card__header">
          <div class="fr-card__img">
            <img class="fr-responsive-img" src="{{ post.cover.file.url }}" alt="">
          </div>
        </div>
      {% endif %}
    </div>
  </div>
{% empty %}
  <div class="fr-col">
    <p>{% translate "No event found." %}</p>
  </div>
{% endfor %}
