{% extends "nav.html" %}

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

      <input type="hidden" name="startdate" value="{{ date }}">
      <input type="hidden" name="enddate" value="{{ date }}" id="enddate">

      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Dauer Von - Bis</label>
        </div>
        <div class="field-body">
          <div class="field">
            <input class="input" type="time" name="starttime" required {{ start|insert_time_value|safe }}
                   _="on change put the value of me into #st">
            {% 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|dt_t }} - {{ *e|dt_t }}</span>
              {% endfor %}
            </div>
            {% endif %}
          </div>
          <div class="field">
            <input class="input" type="time" name="endtime" required {{ end|insert_time_value|safe }}
                   _='on change put the value of me into #et then if (value of the previous <input/>) is greater than (value of me) then set the value of #enddate to "{{ datetomorrow }}" then add @disabled to #nextbtn then remove @disabled from #samebtn then put "{{ datetomorrow|date_c }}" into #ed end' />
          </div>
        </div>
      </div>

      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Verfügbarkeitsende</label>
        </div>
        <div class="field-body">
          <div class="field is-narrow">
            {% let is_overnight = enddate.is_some() && enddate.as_ref().unwrap() == datetomorrow|ref %}
            <button id="samebtn" class="button is-small is-success is-light" type="button"
                    {{ is_overnight|invert|ref|cond_show("disabled")|safe }}
                    _='on click set the value of #enddate to "{{ date }}" then toggle @disabled on me then toggle @disabled on #nextbtn then put "{{ date|date_c }}" into #ed'>am
              selben Tag</button>
          </div>
          <div class="field is-narrow">
            <button id="nextbtn" class="button is-small is-info is-light" type="button"
                    {{ is_overnight|cond_show("disabled")|safe }}
                    _='on click set the value of #enddate to "{{ datetomorrow }}" then toggle @disabled on me then toggle @disabled on #samebtn then put "{{ datetomorrow|date_c }}" into #ed'>am
              Tag darauf</button>
          </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>
            <p class="help is-info">
              verfügbar von {{ date|date_c }} <span id="st">{{ start|time_opt("10:00")|safe }}</span> Uhr
              bis <span id="ed">{{ enddate.as_ref().unwrap_or(date)|date_c }}</span>
              <span id="et">{{ end|time_opt("20:00")|safe }}</span> Uhr
            </p>
          </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 %}