{% extends "nav.html" %}

{% block content %}
<section class="section">
  <div class="container">
    <div class="level">
      <div class="level-left">
        <h3 class="title is-3">
          Fahrzeuge
        </h3>
      </div>
      <div class="level-right">
        <a class="button is-link is-light" hx-boost="true" href="/vehicles/new">
          <svg class="icon">
            <use href="/static/feather-sprite.svg#plus-circle" />
          </svg>
          <span>Neues Fahrzeug anlegen</span>
        </a>
      </div>
    </div>

    {% if vehicles.len() == 0 %}
    <div class="box">
      <h5 class="title is-5">keine Fahrzeuge vorhanden</h5>
    </div>
    {% else %}
    <div class="box">
      <table class="table is-fullwidth">
        <thead>
          <tr>
            <th>Funkkenner</th>
            <th>Wache</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for v in vehicles %}
          <tr>
            <td>
              {{ v.radio_call_name }}
            </td>
            <td>
              {{ v.station }}
            </td>
            <td>
              <div class="buttons is-right">
                <a class="button is-primary is-light" hx-boost="true" href="/vehicles/{{ v.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="/vehicles/{{ v.id }}" hx-target="closest tr"
                  hx-swap="delete" hx-trigger="confirmed">
                  <svg class="icon">
                    <use href="/static/feather-sprite.svg#x-circle" />
                  </svg>
                  <span>Löschen</span>
                </button>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}
  </div>
</section>

{% endblock %}