{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container">
    <form method="post" action="/locations/new">
      <h1 class="title">Neuen Ort 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="Zentralstadion"/>
	    </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 required name="area">
		  {% for area in areas.as_ref().unwrap() %}
		  <option value="{{ area.id }}">{{ 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">
	        <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 %}