{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container">
    <form method="post" action="/area/new">
      <h1 class="title">Neuen Bereich anlegen</h1>

      <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" required placeholder="Leipzig Ost" />
            </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">
                <span class="icon">
                  <svg class="feather">
                    <use href="/static/feather-sprite.svg#check-circle" />
                  </svg>
                </span>
                <span>Speichern</span>
              </button>
            </div>
            <div class="control">
              <a class="button is-link is-light" hx-boost="true" href="/locations">
                <span class="icon">
                  <svg class="feather">
                    <use href="/static/feather-sprite.svg#arrow-left" />
                  </svg>
                </span>
                <span>Zurück</span>
              </a>
            </div>
          </div>
        </div>
      </div>

    </form>
  </div>
</section>

<script>
</script>
{% endblock %}