{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container">
    <form hx-post="/users/{% if let Some(id) = id %}edit/{{ id }}{% else %}new{% endif %}" hx-target-422="find p">
      <h1 class="title">
        {% if let Some(name) = name %}Nutzer '{{ name }}' bearbeiten{% else %}Neuen Nutzer anlegen{% endif %}
      </h1>

      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">E-Mail</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control">
              <input class="input" type="text" name="email" placeholder="max.mustermann@brasiwa-leipzig.de" {{
                     email|insert_value|safe }} required _="on input put '' into the next <p/>" />
            </div>
            <p class="help is-danger"></p>
          </div>
        </div>
      </div>

      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Name</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control">
              <input class="input" type="text" name="name" placeholder="Max Mustermann" {{ name|insert_value|safe }}
                     required />
            </div>
          </div>
        </div>
      </div>

      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Rolle</label>
        </div>
        <div class="field-body">
          <div class="field is-narrow">
            <div class="control">
              <div class="select is-fullwidth">
                <select name="role">
                  <option value="1" {{ role|is_some_and_eq(1|ref)|ref|cond_show("selected") }}>Personal</option>
                  <option value="10" {{ role|is_some_and_eq(10|ref)|ref|cond_show("selected") }}>Bereichsleiter
                  </option>
                  {% if user.role == Role::Admin %}
                  <option value="100" {{ role|is_some_and_eq(100|ref)|ref|cond_show("selected") }}>Admin</option>
                  {% endif %}
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Funktion</label>
        </div>
        <div class="field-body">
          <div class="field is-grouped">
            <div class="control">
              <label class="checkbox">
                <input id="is-posten" type="checkbox" name="is-posten" value="true" {{
                       is_posten.unwrap_or(false)|ref|cond_show("checked") }} />
                Posten
              </label>
            </div>
            <div class="control">
              <label class="checkbox">
                <input type="checkbox" name="is-wachhabender" value="true" {{
                       is_wachhabender.unwrap_or(false)|ref|cond_show("checked") }}
                       _="on change if me.checked then set checked of previous <input/> to true" />
                Wachhabender
              </label>
            </div>
            <div class="control">
              <label class="checkbox">
                <input type="checkbox" name="is-fuehrungsassistent" value="true" {{
                       is_fuehrungsassistent.unwrap_or(false)|ref|cond_show("checked") }} />
                Führungsassistent
              </label>
            </div>
          </div>
        </div>
      </div>

      {% if user.role == Role::Admin %}
      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Bereich</label>
        </div>
        <div class="field-body">
          <div class="field is-narrow">
            <div class="control">
              <div class="select is-fullwidth">
                <select name="area">
                  {% for area in areas.as_ref().unwrap() %}
                  <option value="{{ area.id }}" {{ area_id|is_some_and_eq(area.id)|ref|cond_show("selected") }}>{{
                    area.name }}</input>
                    {% endfor %}
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endif %}

      <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="/users">
                <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 %}