{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container">
    <div class="level">
      <div class="level-left">
        <h3 class="title is-3">
          Veranstaltungsorte
        </h3>
      </div>
      <div class="level-right">
        {% if user.role == Role::Admin %}
        <a class="button is-link is-light" hx-boost="true" href="/area/new">
          <svg class="icon">
            <use href="/static/feather-sprite.svg#plus-circle" />
          </svg>
          <span>Neuen Bereich anlegen</span>
        </a>
        {% endif %}
        <a class="button is-link is-light" hx-boost="true" href="/locations/new">
          <svg class="icon">
            <use href="/static/feather-sprite.svg#plus-circle" />
          </svg>
          <span>Neuen Ort anlegen</span>
        </a>
      </div>
    </div>

    {% if grouped_locations.len() == 0 %}
    <div class="box">
      <h5 class="title is-5">keine Bereiche gefunden</h5>
    </div>
    {% else %}
    {% for gl in grouped_locations %}
    <div class="box">
      <div class="level">
        <div class="level-left">
          <div class="level-item">
            <h5 class="title is-5">Bereich {{ gl.0.name }}</h5>
          </div>

          <div class="level-item buttons are-small">
            <a class="button is-primary is-light" hx-boost="true" href="/area/edit/{{ gl.0.id }}">
              <svg class="icon">
                <use href="/static/feather-sprite.svg#edit" />
              </svg>
            </a>
            <button class="button is-danger is-light" hx-delete="/area/delete/{{ gl.0.id }}" hx-swap="delete"
              hx-target="closest .box" hx-trigger="confirmed">
              <svg class="icon">
                <use href="/static/feather-sprite.svg#x-circle" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      {% for l in gl.1 %}
      <div class="level">
        <div clas="level-left">
          <em>{{ l.name }}</em>
        </div>
        <div clas="level-right">
          <a class="button is-primary is-light" href="/locations/edit/{{ l.id }}">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#edit" />
            </svg>
            <span>Bearbeiten</span>
          </a>
          <button class="button is-danger is-light" hx-delete="/locations/delete/{{ l.id }}" hx-swap="delete"
            hx-target="closest .level" hx-trigger="confirmed">
            <svg class="icon">
              <use href="/static/feather-sprite.svg#x-circle" />
            </svg>
            <span>Löschen</span>
          </button>
        </div>
      </div>
      {% endfor %}
    </div>
    {% endfor %}
    {% endif %}
  </div>
</section>

{% endblock %}
