{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container">
    {% if id.is_some() %}
    <form method="post" action="/users/edit/{{ id.unwrap() }}">
      <h1 class="title">Nutzer '{{ name.as_ref().unwrap() }}' bearbeiten</h1>
      {% else %}
      <form method="post" action="/users/new">
        <h1 class="title">Neuen Nutzer anlegen</h1>
        {% endif %}

        <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 />
              </div>
            </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>
                    <option value="100" {{ role|is_some_and_eq(100|ref)|ref|cond_show("selected") }}>Admin</option>
                  </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-narrow">
              <div class="control">
                <div class="select is-fullwidth">
                  <select name="function">
                  </select>
                </div>
              </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 }}</option>
                    {% 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 %}