{% extends 'base.html' %}

{% block title %}Reihen{% endblock title %}

{% block head %}
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='datatables.css') }}">
{% endblock head %}

{% block heading %}Reihen{% endblock heading %}

{% block content %}

{% include "_icons.svg" %}

<table id="reihe-table">
  <thead>
    <tr>
      <th>Reihe</th>
      <th>Verlag</th>
      <th colspan="2">Aktionen</th>
    </tr>  
  </thead>
  <tbody>
    {% for reihe in reihen %}
    <tr id="reihe-{{ reihe['id'] }}">
      <td title="Reihe">{{ reihe["Titel"] }}</td>
      <td title="Verlag">{{ reihe["Verlag"] }}</td>
      <td class="action action-update" data-id="{{ reihe['id'] }}" data-titel="{{reihe['Titel'] }}" data-verlag="{{reihe['v_id'] }}"><a href="#" title="Reihe bearbeiten"><svg viewbox="0 0 24 24"><use href="#update" /></svg></a></td>
      <td id="delete-{{ reihe['id'] }}" class="action"><a onclick="return confirm('Eintrag wirklich löschen?');" href="{{ url_for('reihe.delete', id=reihe['id']) }}" title="Reihe löschen"><svg viewbox="0 0 24 24"><use href="#delete" /></svg></a></td>
    </tr>  
    {% endfor %}
  </tbody>
</table>

<dialog aria-labelledby="dialog-heading" id="reihe-modal">
  <article>
    <form id="reihe_detail_form" method="post" >
      <header>
        <button aria-label="close" rel="prev" onclick="reihe-modal.close()"></button>
        <h1 id="dialog-heading">#</h1>
      </header>

      <fieldset>
        <article>
          <label>
            <span class="required">Titel</span>
            <input id="form_Titel" name="form_Titel" aria-Label="Reihentitel" placeholder="Titel" required autofocus />
          </label>
          <label>
            Verlag
            <select id="form_Verlag" name="form_Verlag" aria-label="Verlag">
              <option selected value="">kein Verlag</option>
              {% for v in verlage %}<option value="{{ v.ID }}">{{ v.Verlag }}</option>{% endfor %}
            </select>
          </label>
        </article>
      </fieldset>

      <footer class="grid">
        <button id="form_submit" type="submit" formmethod="post" formaction="{{ url_for('reihe.create') }}">OK</button>
        <button class="secondary" aria-label="close" formmethod="dialog" formnovalidate>Abbrechen</button>
      </footer>
    </form>
  </article>
</dialog>
{% endblock content %}

{% block script %}
<script src="{{ url_for('static', filename='datatables.js') }}"></script>
<script src="{{ url_for('static', filename='the_works.js') }}"></script>
<script>
  window.onload = function () {
    initDataTable("reihe-table");
    initCreateButton("reihe-table", "Reihe hinzufügen …");
    initModal("reihe-modal", ["form_Titel", "form_Verlag"], ["Neue Reihe", "Reihe bearbeiten"], ["{{ url_for('reihe.create') }}", "{{ url_for('reihe.update', id=-1) }}"]);
  }
</script>
{% endblock script %}