{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container">
    {% if id.is_some() %}
    <form method="post" action="/availabillity/edit/{{ id.unwrap() }}">
      <h1 class="title">Bearbeite Vefügbarkeit für den {{ date.format("%d.%m.%Y") }}</h1>
      {% else %}
      <form method="post" action="/availabillity/new">
        <h1 class="title">Neue Vefügbarkeit für den {{ date.format("%d.%m.%Y") }}</h1>
        {% endif %}

        <input type="hidden" name="date" value="{{ date }}">
        {% let whole_day_selected = time_selection == AvailabilityTime::WholeDay %}

        <div class="field is-horizontal">
          <div class="field-label">
            <label class="label">Dauer</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control" hx-target="closest body">
                <label class="radio">
                  {% let time_url -%}
                  {% if id.is_some() -%}
                  {% let time_url = "/availabillity/edit/{}?wholeday="|format(id.unwrap()) -%}
                  {% else -%}
                  {% let time_url = "/availabillity/new?date={}&wholeday="|format(date) -%}
                  {% endif -%}
                  <input type="radio" name="hasTime" hx-get="{{ time_url }}true" {{
                    whole_day_selected|cond_show("checked") }} />
                  ganztägig
                </label>
                <label class="radio">
                  <input type="radio" name="hasTime" hx-get="{{ time_url }}false" {{
                    whole_day_selected|invert|ref|cond_show("checked") }} />
                  zeitweise
                </label>
              </div>
            </div>
          </div>
        </div>

        <div class="field is-horizontal">
          <div class="field-label">
            <label class="label">Von - Bis</label>
          </div>
          <div class="field-body">
            {% let times = time_selection.time_tuple() -%}
            <div class="field">
              <input class="input" type="time" id="from" name="from" value='{{ times.0.format("%R") }}' {{
                whole_day_selected|cond_show("disabled") }} {{ whole_day_selected|invert|ref|cond_show("required") }}>
              {% if slot_suggestions.len() > 0 %}
              <p class="help">noch mögliche Zeiträume:</p>
              <div class="tags help">
                {% for (s, e) in slot_suggestions %}
                <span class="tag">{{ s.format("%R") }} - {{ e.format("%R") }}</span>
                {% endfor %}
              </div>
              {% endif %}
            </div>
            <div class="field">
              <input class="input" type="time" id="till" name="till" value='{{ times.1.format("%R") }}' {{
                whole_day_selected|cond_show("disabled") }} {{ whole_day_selected|invert|ref|cond_show("required") }}>
            </div>
          </div>
        </div>

        <div class="field is-horizontal">
          <div class="field-label">
            <label class="label">Kommentar</label>
          </div>
          <div class="field-body">
            <div class="field">
              <div class="control">
                <textarea class="textarea" name="comment" placeholder="nur Posten, nur Wachhabender, etc..">{{
                  comment.unwrap_or("") }}</textarea>
              </div>
            </div>
          </div>
        </div>

        <div class="field is-horizontal">
          <div class="field-label"></div>
          <div class="field-body">
            <div class="field is-grouped">
              <div class="control">
                <button class="button is-success">
                  <svg class="icon">
                    <use href="/static/feather-sprite.svg#check-circle" />
                  </svg>
                  <span>
                    {% if id.is_some() %}
                    Speichern
                    {% else %}
                    Erstellen
                    {% endif %}
                  </span>
                </button>
              </div>
              <div class="control">
                <a class="button is-link is-light" hx-boost="true" href="/?date={{ date }}">
                  <svg class="icon">
                    <use href="/static/feather-sprite.svg#arrow-left" />
                  </svg>
                  <span>Zurück</span>
                </a>
              </div>
            </div>
          </div>
        </div>

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