{% extends shell_base %}
{% from "_zeit.html" import zeitspanne %}

{% block title %}Termine · CheckPoint Ehrenamt{% endblock %}

{% block content %}
  <h1>Verfügbarkeit</h1>

  {% if not einsaetze %}
    <p class="cp-muted">Zurzeit gibt es nichts zu melden. Sobald die Planung
      startet oder ein Einzeltermin ansteht, kannst du hier pro Einsatz „Kann"
      oder „Kann nicht" melden.</p>
  {% else %}
    {% if zeitraum %}
      <p class="cp-muted">{{ zeitraum.name }} ·
        {{ zeitraum.start_datum.strftime('%d.%m.%Y') }}–{{ zeitraum.end_datum.strftime('%d.%m.%Y') }}</p>
    {% endif %}
    <p class="cp-muted">Melde pro Einsatz, ob du kannst. Änderbar, solange geplant wird.</p>

    <ul class="cp-list">
      {% for e in einsaetze %}
        {% set wert = eigene.get(e.id) %}
        <li class="cp-card">
          <strong>{{ e.art }}{% if e.ort %} · {{ e.ort }}{% endif %}</strong>
          <div class="cp-muted">
            {{ e.datum.strftime('%a, %d.%m.%Y') }} ·
            {{ zeitspanne(e) }}
          </div>

          <form method="post"
                action="{{ url_for('planung.verfuegbarkeit_setzen', einsatz_id=e.id) }}"
                class="cp-toggle" role="group" aria-label="Verfügbarkeit für {{ e.art }} am {{ e.datum.strftime('%d.%m.%Y') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" name="wert" value="kann"
                    class="cp-toggle__btn {{ 'is-active' if wert == 'kann' else '' }}"
                    aria-pressed="{{ 'true' if wert == 'kann' else 'false' }}">
              {{ '✓ ' if wert == 'kann' else '' }}Kann
            </button>
            <button type="submit" name="wert" value="kann_nicht"
                    class="cp-toggle__btn {{ 'is-active' if wert == 'kann_nicht' else '' }}"
                    aria-pressed="{{ 'true' if wert == 'kann_nicht' else 'false' }}">
              {{ '✓ ' if wert == 'kann_nicht' else '' }}Kann nicht
            </button>
          </form>

          <div class="cp-muted" aria-live="polite">
            {% if wert == 'kann' %}Gemeldet: Kann
            {% elif wert == 'kann_nicht' %}Gemeldet: Kann nicht
            {% else %}Noch nicht gemeldet{% endif %}
          </div>
        </li>
      {% else %}
        <li class="cp-muted">In diesem Zeitraum gibt es noch keine Einsätze.</li>
      {% endfor %}
    </ul>
  {% endif %}
{% endblock %}