{% 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>{% for event in gap.before %}{% if not loop.first %}<br/>{% endif %}<span class="text-nowrap">{{ event.title or event.name }}</span>{% 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>{% for event in gap.after %}{% if not loop.first %}<br/>{% endif %}<span class="text-nowrap">{{ event.title or event.name }}</span>{% endfor %}</td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
</div>

{% endblock %}