{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container">
    <form method="post" action="/events/new">
      <h1 class="title">Neues Event anlegen für den {{ date.format("%d.%m.%Y") }}</h1>

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

      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Veranstaltungsname</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control">
              <input class="input" name="name" placeholder="Wave Gotik Treffen" required />
            </div>
          </div>
        </div>
      </div>

      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Startzeit - Endzeit</label>
        </div>
        <div class="field-body">
          <div class="field">
            <input class="input" type="time" id="from" name="from" value="00:00" required>
          </div>
          <div class="field">
            <input class="input" type="time" id="till" name="till" value="23:59" required>
          </div>
        </div>
      </div>

      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Veranstaltungsort</label>
        </div>
        <div class="field-body">
          <div class="field is-narrow">
            <div class="control">
              <div class="select is-fullwidth">
                <select name="location" required>
                  {% for location in locations %}
                  <option value="{{ location.id }}">{{ location.name }}{% if user.role == Role::Admin %} - ({{
                    location.area.as_ref().unwrap().name }}){% endif %}</option>
                  {% endfor %}
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Wachhabender durch FF gestellt?</label>
        </div>
        <div class="field-body">
          <div class="field is-narrow">
            <div class="control">
              <label class="checkbox">
                <input class="checkbox" type="checkbox" name="voluntarywachhabender" value="true">
              </label>
            </div>
          </div>
        </div>
      </div>

      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Anzahl der Posten</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control">
              <input class="input" type="number" name="amount" min="1" max="100" required />
            </div>
          </div>
        </div>
      </div>

      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Anzugsordnung</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control">
              <input class="input" name="clothing" placeholder="Tuchuniform" required />
            </div>
          </div>
        </div>
      </div>

      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Anmerkung</label>
        </div>
        <div class="field-body">
          <div class="field">
            <div class="control">
              <input class="input" name="note" placeholder="" />
            </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">
              <input class="button is-link" type="submit" value="Erstellen">
            </div>
            <div class="control">
              <a class="button is-link is-light" hx-boost="true" href="/?date={{ date }}">Zurück</a>
            </div>
          </div>
        </div>
      </div>

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