{% extends "nav.html" %}

{% block content %}
<div hx-indicator="#progress">
  <section class="section">
    <div class="container">
      <!-- navigation for not mobile -->
      <div class="level is-hidden-mobile">
        <div class="level-left">
          <a hx-boost="true" class="button is-link level-item"
             href="/calendar?date={{ date.pred() }}{{ selected_area|show_area_query(false) }}"
             _="on keyup[key is 'ArrowLeft'] from elsewhere assign(my.href) to the location of the window">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#arrow-left" />
            </svg>
          </a>
        </div>

        <div class="control level-item is-flex-grow-0">
          <input class="input" type="date" name="date" value="{{ date }}" hx-target="closest body"
                 hx-get="/calendar{{ selected_area|show_area_query(true) }}" hx-push-url="true"
                 _="on keyup[key is 'D'] from elsewhere showPicker() on me end
                    on keyup[key is 'S'] from elsewhere focus() on me">

          {% if user.role == Role::Admin %}
          <div class="select ml-2">
            <select hx-get="/calendar?date={{ date }}" hx-target="closest body" hx-push-url="true" name="area">
              {% for area in areas %}
              {% if (user.area_id == area.id && selected_area.is_none()) || selected_area.is_some() &&
              selected_area.unwrap() == area.id %}
              <option selected value="{{ area.id }}">{{ area.name }}</option>
              {% else %}
              <option value="{{ area.id }}">{{ area.name }}</option>
              {% endif %}
              {% endfor %}
            </select>
          </div>
          {% endif %}

          <template id="shortcuts-info">
            <swal-title>
              Bedieninformationen
            </swal-title>
            <swal-icon type="info"></swal-icon>
            <swal-param name="allowEscapeKey" value="true" />
            <swal-html>
              <div class="shortcuts-info">
                <div> <kbd>Shift</kbd> + <kbd>S</kbd> </div>
                <p>Datumsfeld zur Texteingabe fokussieren</p>
                <div><kbd>Shift</kbd> + <kbd>D</kbd></div>
                <p>Datumsauswahlfenster einblenden</p>
                <div><kbd>&leftarrow;</kbd></div>
                <p>zum vorherigen Tag navigieren</p>
                <div><kbd>&rightarrow;</kbd></div>
                <p>zum nächsten Tag navigieren</p>
              </div>
            </swal-html>
          </template>
          <button class="button ml-2" title="Bedieninformationen"
                  _="on click call Swal.fire({ template: '#shortcuts-info' })">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#info" />
            </svg>
          </button>
        </div>

        <div class="level-right">
          <a hx-boost="true" class="button is-link level-item"
             href="/calendar?date={{ date.succ() }}{{ selected_area|show_area_query(false) }}"
             _="on keyup[key is 'ArrowRight'] from elsewhere assign(my.href) to the location of the window">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#arrow-right" />
            </svg>
          </a>
        </div>
      </div>

      <!-- navigation for mobile -->
      <div class="level is-hidden-tablet is-mobile">
        <div class="level-left">
          <a hx-boost="true" class="button is-link level-item"
             href="/calendar?date={{ date.pred() }}{{ selected_area|show_area_query(false) }}">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#arrow-left" />
            </svg>
          </a>
        </div>

        <div class="control level-item is-flex-grow-0">
          <input class="input" type="date" name="date" value="{{ date }}" hx-target="closest body"
                 hx-get="/calendar{{ selected_area|show_area_query(true) }}" hx-push-url="true">
        </div>

        <div class="level-right">
          <a hx-boost="true" class="button is-link level-item"
             href="/calendar?date={{ date.succ() }}{{ selected_area|show_area_query(false) }}">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#arrow-right" />
            </svg>
          </a>
        </div>
      </div>

      {% if user.role == Role::Admin %}
      <div class="level is-hidden-tablet is-mobile">
        <div class="level-item">
          <div class="select">
            <select hx-get="/calendar?date={{ date }}" hx-target="closest body" hx-push-url="true" name="area">
              {% for area in areas %}
              {% if (user.area_id == area.id && selected_area.is_none()) || selected_area.is_some() &&
              selected_area.unwrap() == area.id %}
              <option selected value="{{ area.id }}">{{ area.name }}</option>
              {% else %}
              <option value="{{ area.id }}">{{ area.name }}</option>
              {% endif %}
              {% endfor %}
            </select>
          </div>
        </div>
      </div>
      {% endif %}

      <progress id="progress" class="progress is-small is-link is-light htmx-indicator" max="100" />
    </div>
  </section>

  <section id="progress" class="section">
    <div class="container">
      <div class="level">
        <div class="level-left">
          <div class="level-item is-flex-direction-column is-align-items-start">
            <h3 class="title is-3">Veranstaltungen</h3>
            <h5 class="subtitle is-5">am {{ date|fmt_date(WeekdayDayMonthYear) }}</h5>
          </div>
        </div>
        {% if user.role == Role::Admin || user.role == Role::AreaManager && (selected_area.is_none() ||
        selected_area.unwrap() == user.area_id) %}
        <div class="level-right">
          <a class="button is-link is-light" hx-boost="true" href="/events/new?date={{ date }}">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#plus-circle" />
            </svg>
            <span>Neue Veranstaltung für diesen Tag</span>
          </a>
        </div>
        {% endif %}
      </div>

      {% if events.len() == 0 %}
      <div class="notification">
        Keine Veranstaltungen geplant.
      </div>
      {% else %}
      {% for calendar_event in events %}
      {%- let event = calendar_event.event -%}
      {%- let location = calendar_event.event.location.as_ref().unwrap() -%}
      {%- let wachhabender = calendar_event.get_wachhabender() -%}
      {%- let fuehrungsassistent = calendar_event.get_fuehrungsassistent() -%}
      {%- let posten = calendar_event.get_posten() -%}
      {%- let vehicle = calendar_event.vehicle_assignments -%}
      <div class="box">
        <div class="fixed-grid has-1-cols-mobile">
          <div class="grid content">
            <div class="cell">
              <h5 class="title is-5">{{ event.name }}</h5>
            </div>

            {% if (user.role == Role::AreaManager && location.area_id == user.area_id) || user.role == Role::Admin %}
            <div class="cell is-narrow buttons is-justify-content-end mb-0">
              <a href="/events/{{ event.id }}/plan" hx-boost="true" class="button is-link is-light">
                <svg class="icon">
                  <use href="/static/feather-sprite.svg#book-open" />
                </svg>
                <span>Planen</span>
              </a>
              <a href="/events/{{ event.id }}/edit" hx-boost="true" class="button is-primary is-light">
                <svg class="icon">
                  <use href="/static/feather-sprite.svg#edit" />
                </svg>
                <span>Bearbeiten</span>
              </a>
            </div>
            {% endif %}

            {% if event.canceled %}
            <div class="cell is-col-span-2 notification is-warning is-light">
              <b>Veranstaltung abgesagt!</b>
            </div>
            {% endif %}

            <div class="cell">
              <p><b>Uhrzeit:</b> {{ event.start|fmt_datetime(HourMinute) }} Uhr -
                {{ event.end|fmt_datetime(DayMonthYearHourMinute) }} Uhr</p>
            </div>

            <div class="cell">
              <p>
                <b>Veranstaltungsort:</b> {{ location.name }} {% if location.area_id != user.area_id %}(Fremdbereich {{
                location.area.as_ref().unwrap().name }}){% endif %}
              </p>
            </div>

            <div class="cell">
              <p><b>Wachhabender:</b> {% if event.voluntary_wachhabender %}FF{% else %}BF{% endif %}</p>
            </div>

            <div class="cell">
              <p><b>Führungsassistent benötigt:</b> {% if event.fuehrungsassistent_required %}ja{% else %}nein{% endif
                %}</p>
            </div>

            <div class="cell is-col-span-2">
              <p><b>Anzahl der Posten:</b> {{ event.amount_of_posten }}</p>
            </div>

            <div class="cell is-col-span-2">
              <p><b>Anzugsordnung:</b> {{ event.clothing.name }}</p>
            </div>

            {% if let Some(note) = event.note %}
            <div class="cell is-col-span-2">
              <p><b>Anmerkungen:</b> {{ note }}</p>
            </div>
            {% endif %}

            {% if wachhabender.is_some() || fuehrungsassistent.is_some() || posten.len() > 0 || vehicle.len() > 0 %}
            <div class="cell is-col-span-2">
              <hr class="my-1">
            </div>
            {% endif %}

            {% if let Some(wh) = wachhabender %}
            <div class="cell">
              <p><b>Wachhabender geplant:</b> {{ wh.name }}</p>
            </div>
            {% endif %}

            {% if let Some(fa) = fuehrungsassistent %}
            <div class="cell">
              <p><b>Führungsassistent geplant:</b> {{ fa.name }}</p>
            </div>
            {% endif %}

            {% if posten.len() > 0 %}
            <div class="cell is-col-span-2">
              <p><b>Posten:</b> {% for p in posten -%}{{ p.name }}{% if !loop.last %}, {% endif %}{% endfor %}</p>
            </div>
            {% endif %}

            {% if vehicle.len() > 0 %}
            <div class="cell is-col-span-2">
              <b>Fahrzeuge:</b>
              {% for v in vehicle %}
              <span class="tag is-link"> {{ v }}</span>
              {% endfor %}
            </div>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
      {% endif %}
    </div>
  </section>

  <section id="progress" class="section">
    <div class="container">
      <div class="level">
        <div class="level-left">
          <div class="level-item is-flex-direction-column is-align-items-start">
            <h3 class="title is-3">Verfügbarkeiten</h3>
            <h5 class="subtitle is-5">am {{ date|fmt_date(WeekdayDayMonthYear) }}</h5>
          </div>
        </div>
        {% if selected_area.is_none() || selected_area.unwrap() == user.area_id %}
        <div class="level-right">
          <a class="button is-link is-outlined" href="/availability/new-other?date={{ date }}">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#plus-circle" />
            </svg>
            <span>Neue Verfügbarkeit für anderen Nutzer</span>
          </a>
          {% let btn_disabled = !user_can_create_availability %}
          <a class="button is-link is-light" href="/availability/new?date={{ date }}" {{
             btn_disabled|cond_show("disabled") }}>
            <svg class="icon">
              <use href="/static/feather-sprite.svg#plus-circle" />
            </svg>
            <span>Neue Verfügbarkeit für diesen Tag</span>
          </a>
        </div>
        {% endif %}
      </div>

      {% if availabilities.len() == 0 %}
      <div class="notification">
        Keine Verfügbarkeiten hinterlegt.
      </div>
      {% else %}
      <div class="box">
        <table class="table is-fullwidth">
          <thead>
            <tr>
              <th>Name</th>
              <th>Funktion</th>
              <th>Zeitraum</th>
              <th>Kommentar</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for availability in availabilities %}
            {% let u = availability.user.as_ref().unwrap() %}
            <tr>
              <td>{{ u.name }}</td>
              <td>
                {{ u.function|show_tree|safe }}
              </td>
              <td>
                {{ availability.start|fmt_datetime(HourMinute) }} Uhr bis
                {{ availability.end|fmt_datetime(DayMonthYearHourMinute) }} Uhr
              </td>
              <td>
                {{ availability.comment.as_deref().unwrap_or_default() }}
              </td>
              <td>
                {% if availability.user_id == user.id || user.role == Role::Admin || user.role == Role::AreaManager %}
                <div class="buttons is-right">
                  <a class="button is-primary is-light" href="/availability/edit/{{ availability.id }}"
                     title="Verfügbarkeit bearbeiten">
                    <svg class="icon">
                      <use href="/static/feather-sprite.svg#edit" />
                    </svg>
                  </a>
                  <button class="button is-danger is-light" hx-delete="/availability/delete/{{ availability.id }}"
                          hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed"
                          title="Verfügbarkeit löschen">
                    <svg class="icon">
                      <use href="/static/feather-sprite.svg#x-circle" />
                    </svg>
                  </button>
                  {% if user.role == Role::Admin || (user.role == Role::AreaManager && user.area_id ==
                  availability.user.as_ref().unwrap().area_id) %}
                  {% include "calendar_cross_areal_button.html" %}
                  {% endif %}
                </div>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% endif %}

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