{% if !further_posten_required && !further_fuehrungsassistent_required && !further_wachhabender_required %}
<div class="icon-text">
  <svg class="icon has-text-success">
    <use href="/static/feather-sprite.svg#check" />
  </svg>
  <span>Alle Plätze verplant!</span>
</div>
{% endif %}

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>Name</th>
      <th>Funktion</th>
      <th>Zeitraum</th>
      <th>Kommentar</th>
      <th>Planung</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {% for (availability, status) in availabilities -%}
    {%- let u = availability.user.as_ref().unwrap() -%}
    <tr>
      <td>{{ u.name }}{% if u.area_id != event.location.as_ref().unwrap().area_id %} (Fremdbereich {{ u.area.as_ref().unwrap().name
        }}){% endif %}</td>
      <td>
        {{ u.function|show_tree|safe }}
      </td>
      <td>
        {{ availability.start|fmt_datetime(HourMinute) }} bis {{ availability.end|fmt_datetime(DayMonthYearHourMinute)
        }}
      </td>
      <td>
        {{ availability.comment.as_deref().unwrap_or_default() }}
      </td>
      <td>
        <div class="dropdown">
          <div class="dropdown-trigger"
               _="on click[.dropdown does not contain target] from elsewhere
                      or keyup[key is 'Escape'] from elsewhere
                      or click[parentElement of me does not match .is-active]
                      remove .is-active from .dropdown end
                  on click toggle .is-active on the parentElement of me">
            <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
              {% match status %}
              {% when AvailabilityAssignmentState::AssignedPosten(_) %}
              <span>als Posten geplant</span>
              <svg class="icon">
                <use href="/static/feather-sprite.svg#edit-2" />
              </svg>
              {% when AvailabilityAssignmentState::AssignedFührungsassistent(_) %}
              <span>als Führungsassistent geplant</span>
              <svg class="icon">
                <use href="/static/feather-sprite.svg#edit-2" />
              </svg>
              {% when AvailabilityAssignmentState::AssignedWachhabender(_) %}
              <span>als Wachhabender geplant</span>
              <svg class="icon">
                <use href="/static/feather-sprite.svg#edit-2" />
              </svg>
              {% when _ %}
              <span>Planen</span>
              <svg class="icon">
                <use href="/static/feather-sprite.svg#chevron-down" />
              </svg>
              {% endmatch %}
            </button>
          </div>
          <div class="dropdown-menu" id="dropdown-menu" role="menu">
            <div class="dropdown-content" hx-target="closest table" hx-swap="outerHTML">
              {% if u.function.is_posten() %}
              <a class="dropdown-item"
                 hx-post="/assignments/new?event={{ event.id }}&availability={{ availability.id }}&function=1" {% if
                 !further_posten_required || status !=AvailabilityAssignmentState::Unassigned|ref %}disabled{% endif %}>
                als Posten planen</a>
              {% endif %}
              {% if u.function.is_fuehrungsassistent() %}
              <a class="dropdown-item"
                 hx-post="/assignments/new?event={{ event.id }}&availability={{ availability.id }}&function=5" {% if
                 !further_fuehrungsassistent_required || status !=AvailabilityAssignmentState::Unassigned|ref
                 %}disabled{% endif %}>als Führungsassistent planen</a>
              {% endif %}
              {% if u.function.is_wachhabender() %}
              <a class="dropdown-item"
                 hx-post="/assignments/new?event={{ event.id }}&availability={{ availability.id }}&function=10" {% if
                 !further_wachhabender_required || status !=AvailabilityAssignmentState::Unassigned|ref %}disabled{%
                 endif %}>als Wachhabender planen</a>
              {% endif %}
              {% if status != AvailabilityAssignmentState::Unassigned|ref && status !=
              AvailabilityAssignmentState::Conflicting|ref %}
              <hr class="dropdown-divider" />
              <a class="dropdown-item"
                 hx-delete="/assignments/delete?event={{ event.id }}&availability={{ availability.id }}"
                 class="button is-small">entplanen</a>
              {% endif %}
            </div>
          </div>
        </div>
      </td>
      <td>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>