{% extends 'base.html' %}
{% set create_mode = (text['ID'] == 0) %}

{% block title %}
{% if create_mode %}
Neuen Text erstellen
{% else %}
Text bearbeiten
{% endif %}
{% endblock title %}

{% block head %}
{% endblock head %}

{% block heading %}
{% if create_mode %}
Neuen Text erstellen
{% else %}
Text bearbeiten
{% endif %}
{% endblock heading %}

{% block content %}
<form id="text_detail_form" method="post" action="#">
  <section>
    <label>
      <span class="required">Titel</span>
      <input class="required" id="form_Titel" name="form_Titel" aria-Label="Titel" required value="{{ text['Titel'] }}" />
    </label>
  </section>
  <hr />
  <section class="grid">
    <div>
      <label>
        Untertitel
        <input id="form_Untertitel" name="form_Untertitel" aria-Label="Untertitel" placeholder="Untertitel" value="{{ text['Untertitel'] }}" />
      </label>
      <label>
        Reihe
        <select id="form_Reihe" name="form_Reihe" aria-label="Der Text gehört zur Reihe …">
          <option selected value=""{% if text['Reihe'] == '' %} selected{% endif %}>keine Reihe</option>
          {% for r in reihen %}<option value="{{ r.ID }}"{% if r.ID == text['Reihe'] %} selected{% endif %}>{{ r.Titel }}</option>{% endfor %}
        </select>
      </label>
      <label>
        Genre(s)
        <details id="form_Genre_dropdown" class="dropdown">
          <summary id="form_Genre_summary" data-default="kein Genre ausgewählt"></summary>
          <ul>
            <li>
              <input type="search" id="form_Genre_search" aria-label="search" placeholder="Genres filtern …" value="" />
            </li>
            {% for g in genres %}
            <li>
              <label>
                <input id="form_Genre_{{ g.ID }}" name="form_Genre" data-content="{{ g.Genre }}" type="checkbox" value="{{ g.ID }}" {% if g.ID in text["Genres"] %} checked {% endif %}/>
                {{ g.Genre }}
              </label>
            </li> 
            {% endfor %}
            </ul>
        </details>
      </label>
    </div>
    <div>
      <label>
        <span class="required">Textform</span>
        <select id="form_Textform" name="form_Textform" aria-label="Textform" required>
          <option selected disabled value="">Textform auswählen …</option>
          {% for tf in textformen %}<option value="{{ tf.ID }}"{% if tf.ID == text['Textform'] %} selected{% endif %}>{{ tf.Textform }}</option>{% endfor %}
        </select>
      </label>
      <label>
        <span class="required">Sprache</span>
        <select id="form_Sprache" name="form_Sprache" aria-label="Sprache des Textes" required>
          <option selected disabled value="">Sprache auswählen …</option>
          {% for s in sprachen %}<option value="{{ s.ID }}"{% if s.ID == text['Sprache'] %} selected{% endif %}>{{ s.Sprache }}</option>{% endfor %}
        </select>
      </label>
    </div>
  </section>

  <footer class="grid">
    <button id="form_submit" type="submit" formmethod="post" formaction="{% if create_mode %}{{ url_for('text.create') }}{% else %}{{ url_for('text.update', id=text['ID']) }}{% endif %}">
      {% if create_mode %}Eintrag speichern{% else %}Änderungen speichern{% endif %}
    </button>
    <button type="reset" onclick="return confirm('Wirklich zurücksetzen? Alle geänderten Daten gehen dabei verloren.');" title="Alle Felder auf den vorherigen Zustand zurücksetzen">Alles zurücksetzen</button>
    <a role="button" class="contrast" href="{{ url_for('text.all') }}">Abbrechen (nicht speichern)</a>
  </footer>
</form>
{% endblock content %}

{% block script %}
<script src="{{ url_for('static', filename='js/multiselect.js') }}"></script>
<script src="{{ url_for('static', filename='js/datalosswarning.js') }}"></script>
<script>
  window.onload = () => {
    initAllMultiselects();
    initDatalosswarning();
  }
</script>
{% endblock script %}