the_works/the_works/templates/views/werk_detail.html

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

{% block title %}
{% if create_mode %}
Neues Werk erstellen
{% else %}
Werk bearbeiten
{% endif %}
{% endblock title %}

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

{% block heading %}
{% if create_mode %}
Neues Werk erstellen
{% else %}
Werk bearbeiten
{% endif %}
{% endblock heading %}

{% block content %}
<form id="werk_detail_form" method="post" enctype="multipart/form-data" action="#">
  <section>
    <label>
      <span class="required">Titel</span>
      <input id="form_Titel" name="form_Titel" aria-label="Titel" placeholder="Titel" required value="{{ werk['Titel'] }}" />
    </label>
  </section>
  <hr />
  <section class="grid">
    <div>
      <label>
        Untertitel
        <input id="form_Untertitel" name="form_Untertitel" aria-label="Untertitel" placeholder="Untertitel" value="{{ werk['Untertitel'] }}" />
      </label>
      <label>
        <span class="required">Werksform</span>
        <select id="form_Werksform" name="form_Werksform" aria-label="Werksform" required>
          <option value="">bitte wählen …</option>
          {% for wf in werksformen %}<option value="{{ wf.ID }}"{% if wf.ID == werk['Werksform'] %} selected{% endif %}>{{ wf.Werksform }}</option>{% endfor %}
        </select>
      </label>
      <label>
        Reihe
        <select id="form_Reihe" name="form_Reihe" aria-label="Der Text gehört zur Reihe …">
          <option value="" >keine Reihe</option>
          {% for r in reihen %}<option value="{{ r.ID }}"{% if r.ID == werk['Reihe'] %} selected{% endif %}>{{ r.Titel }}</option>{% endfor %}
        </select>
      </label>
      <label>
        Reihennummer
        <input id="form_Reihennummer" name="form_Reihennummer" aria-label="Reihennummer" placeholder="keine Reihennummer" value="{{ werk['Reihennummer'] }}" />
      </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 }}"{% if v.ID == werk['Verlag'] %} selected{% endif %}>{{ v.Verlag }}</option>{% endfor %}
        </select>
      </label>
      <label>
        Preis
        <input id="form_Preis" name="form_Preis" aria-label="Preis" placeholder="kein Preis" value="{{ werk['Preis'] }}" />
      </label>
    </div>
    <div>
      <label>
        Erscheinungsdatum (TT-MM-JJJJ, MM-JJJJ, JJJJ oder leer)
        <div class="grid">
          <input type="number" min="1" max="31" id="form_Erscheinungstag" name="form_Erscheinungstag" aria-label="Erscheinungstag" placeholder="Tag" value="{{ werk['Erscheinungsdatum'][8:] }}" />
          <input type="number" min="1" max="12" id="form_Erscheinungsmonat" name="form_Erscheinungsmonat" aria-label="Erscheinungsmonat" placeholder="Monat" value="{{ werk['Erscheinungsdatum'][5:7] }}" />
          <input type="number" min="1980" max="2100" id="form_Erscheinungsjahr" name="form_Erscheinungsjahr" aria-label="Erscheinungsjahr" placeholder="Jahr" value="{{ werk['Erscheinungsdatum'][:4] }}" />
        </div>
      </label>
      <label>
        ISBN-13
        <input id="form_ISBN_13" name="form_ISBN_13" aria-label="ISBN-13" placeholder="keine ISBN-13" value="{{ werk['ISBN_13'] }}" />
      </label>
      <label>
        ISBN-10
        <input id="form_ISBN_10" name="form_ISBN_10" aria-label="ISBN-10" placeholder="keine ISBN-10" value="{{ werk['ISBN_10'] }}" />
      </label>
      <label>
        ISSN
        <input id="form_ISSN" name="form_ISSN" aria-label="ISSN" placeholder="keine ISSN" value="{{ werk['ISSN'] }}" />
      </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 werk["Genres"] %} checked {% endif %}/>
                {{ g.Genre }}
              </label>
            </li> 
            {% endfor %}
            </ul>
        </details>
      </label>
      <label>
        Herausgeber:in(nen)
        <details id="form_Herausgeber_dropdown" class="dropdown">
          <summary id="form_Herausgeber_summary" data-default="kein(e) Herausgeber:in(nen) ausgewählt"></summary>
          <ul>
            <li>
              <input type="search" id="form_Herausgeber_search" aria-label="search" placeholder="Herausgeber:innen filtern …" value="" />
            </li>
            {% for h in hrsg %}
            <li>
              <label>
                <input id="form_Herausgeber_{{ h.ID }}" name="form_Herausgeber" data-content="{{ h.Name }}" type="checkbox" value="{{ h.ID }}" {% if h.ID in werk["Herausgeber"] %} checked {% endif %}/>
                {{ h.Name }}
              </label>
            </li> 
            {% endfor %}
            </ul>
        </details>
      </label>
    </div>
  </section>
  <hr />
  <section class="grid">
    <label>
      Klappentext
      <textarea id="form_Klappentext" name="form_Klappentext" aria-label="Klappentext" placeholder="kein Klappentext" rows="10">{{ werk['Klappentext'] }}</textarea>
    </label>
    <label>
      Anmerkungen
      <textarea id="form_Anmerkungen" name="form_Anmerkungen" aria-label="Anmerkungen" placeholder="keine Anmerkungen" rows="10">
          {{ werk['Anmerkungen'] }}</textarea>
    </label>
  </section>    
  <hr />
  <section>
    <label>
      Titelbild
      <input type="file" id="form_Titelbild" name="form_Titelbild" aria-label="Titelbild" placeholder="kein Titelbild" />
    </label>
  </section>

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

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