{% extends "base.html" %}

{% block content %}
<div class="p-2">

  <h1>Gaps</h1>
  <table class="table table-hover w-auto">
    <thead>
      <tr>
        <th>before</th>
        <th class="text-end">start</th>
        <th class="text-end">days</th>
        <th class="text-end">end</th>
        <th>after</th>
      </tr>
    </thead>
    <tbody>
    {% for gap in gaps %}
    <tr>
      <td class="text-start">
        {% for event in gap.before %}
          <div class="text-nowrap">
            {% if event.url %}
              <a href="{{event.url}}">{{ event.title_with_emoji }}</a>
            {% else %}
              {{ event.title_with_emoji }}
            {% endif %}
          </div>
        {% endfor %}
      </td>
      <td class="text-end text-nowrap">{{ gap.start.strftime("%A, %-d %b %Y") }}</td>
      <td class="text-end text-nowrap">{{ (gap.end - gap.start).days }} days</td>
      <td class="text-end text-nowrap">{{ gap.end.strftime("%A, %-d %b %Y") }}</td>
      <td class="text-start">
        {% for event in gap.after %}
          <div class="text-nowrap">
            {% if event.url %}
              <a href="{{event.url}}">{{ event.title_with_emoji }}</a>
            {% else %}
              {{ event.title_with_emoji }}
            {% endif %}
          </div>
        {% endfor %}
      </td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
</div>

{% endblock %}