{% 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 (availabillity, status) in availabillities %}
    {% let u = availabillity.user.as_ref().unwrap() %}
    <tr>
      <td>{{ u.name }}</td>
      <td>
        {{ u.function|show_tree|safe }}
      </td>
      <td>
        {% if availabillity.start_time.is_some() && availabillity.end_time.is_some() %}
        {{ availabillity.start_time.as_ref().unwrap().format("%R") }} bis {{
        availabillity.end_time.as_ref().unwrap().format("%R") }}
        {% else %}
        ganztägig
        {% endif %}
      </td>
      <td>
        {{ availabillity.comment.as_deref().unwrap_or("") }}
      </td>
      <td>
        <div class="dropdown">
          <div class="dropdown-trigger">
            <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
              {% match status %}
              {% when AvailabillityAssignmentState::AssignedPosten(_) %}
              <span>als Posten geplant</span>
              <svg class="icon">
                <use href="/static/feather-sprite.svg#edit-2" />
              </svg>
              {% when AvailabillityAssignmentState::AssignedFührungsassistent(_) %}
              <span>als Führungsassistent geplant</span>
              <svg class="icon">
                <use href="/static/feather-sprite.svg#edit-2" />
              </svg>
              {% when AvailabillityAssignmentState::AssignedWachhabender(_) %}
              <span>als Wachhabender geplant</span>
              <svg class="icon">
                <use href="/static/feather-sprite.svg#edit" />
              </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">
              <a class="dropdown-item"
                hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=1" {% if
                !further_posten_required || status !=AvailabillityAssignmentState::Unassigned|ref %}disabled{% endif %}>
                als Posten planen</a>
              {% if u.function == Function::Wachhabender || u.function == Function::Fuehrungsassistent %}
              <a class="dropdown-item"
                hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=5" {% if
                !further_fuehrungsassistent_required || status !=AvailabillityAssignmentState::Unassigned|ref
                %}disabled{% endif %}>als Führungsassistent planen</a>
              {% endif %}
              {% if u.function == Function::Wachhabender %}
              <a class="dropdown-item"
                hx-post="/assignments/new?event={{ event.id }}&availabillity={{ availabillity.id }}&function=10" {% if
                !further_wachhabender_required || status !=AvailabillityAssignmentState::Unassigned|ref %}disabled{%
                endif %}>als Wachhabender planen</a>
              {% endif %}
              {% if status != AvailabillityAssignmentState::Unassigned|ref && status !=
              AvailabillityAssignmentState::Conflicting|ref %}
              <hr class="dropdown-divider" />
              <a class="dropdown-item"
                hx-delete="/assignments/delete?event={{ event.id }}&availabillity={{ availabillity.id }}"
                class="button is-small">entplanen</a>
              {% endif %}
            </div>
          </div>
        </div>
      </td>
      <td>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>