{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container">
    <h1 class="title is-1">Übersicht</h1>
    <h3 class="title is-3">geplante Veranstaltungen</h3>
    <p class="subtitle is-5">in den nächsten 31 Tagen</p>
    {% if events.len() == 0 %}
    <div class="notification">
      Keine Veranstaltungen für diesen Zeitraum geplant.
    </div>
    {% else %}
    <div class="panel p-2">
      {% for e in events %}
      <div class="panel-block is-justify-content-space-between">
        <span>
          <b>{{ e.name }}</b> &nbsp; {{ e.start|fmt_datetime(WeekdayDayMonthYearHourMinute) }} - {{
          e.end|fmt_datetime(HourMinute) }}
        </span>
        <a class="button is-small is-link is-light" href="/calendar?date={{ e.start.date() }}">
          <svg class="icon">
            <use href="/static/feather-sprite.svg#calendar" />
          </svg>
          <span>im Kalender anzeigen</span>
        </a>
      </div>
      {% endfor %}
    </div>
    {% endif %}

    <h3 class="title is-3">Deine Verfügbarkeiten</h3>
    <p class="subtitle is-5">in den nächsten 31 Tagen</p>
    {% if availabilities.len() == 0 %}
    <div class="notification">
      Keine Verfügbarkeiten für diesen Zeitraum hinterlegt.
    </div>
    {% else %}
    <div class="panel p-2">
      {% for a in availabilities %}
      <div class="panel-block is-justify-content-space-between">
        <span>
          {{ a.start|fmt_datetime(WeekdayDayMonthYearHourMinute) }} - {{
          a.end|fmt_datetime(HourMinute) }} {% if let Some(comment) = a.comment %}&nbsp; Kommentar: &nbsp; {{ comment }}
          {% endif %}
        </span>
        <div class="buttons are-small">
          <a class="button is-primary is-light" href="/availability/edit/{{ a.id }}">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#edit" />
            </svg>
            <span>Bearbeiten</span>
          </a>

          <a class="button is-link is-light" href="/calendar?date={{ a.start.date() }}">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#calendar" />
            </svg>
            <span>im Kalender anzeigen</span>
          </a>

        </div>
      </div>
      {% endfor %}
    </div>
    {% endif %}

    <h3 class="title is-3">Deine Einteilungen</h3>
    <p class="subtitle is-5">in den nächsten 31 Tagen</p>
    {% if assignments.len() == 0 %}
    <div class="notification">
      Keine Einteilungen für diesen Zeitraum vorhanden.
    </div>
    {% else %}
    <div class="panel p-2">
      {% for (a, event_name) in assignments %}
      <div class="panel-block is-justify-content-space-between">
        <span>
          {{ a.start|fmt_datetime(WeekdayDayMonthYearHourMinute) }} - {{
          a.end|fmt_datetime(HourMinute) }} bei {{ event_name }} als {{ a.function }}
        </span>
        <a class="button is-small is-link is-light" href="/calendar?date={{ a.start.date() }}">
          <svg class="icon">
            <use href="/static/feather-sprite.svg#calendar" />
          </svg>
          <span>im Kalender anzeigen</span>
        </a>
      </div>
      {% endfor %}
    </div>
    {% endif %}

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