{% extends "base.html" %}
{% from "ui/button.html" import button %}
{% from "ui/card.html" import card %}
{% from "ui/page_header.html" import page_header %}

{% block title %}Kontakt{% endblock %}
{% block page_class %}contact-page{% endblock %}

{% block content %}
  {{ page_header("Kontakt", "Schicke eine Nachricht bei Problemen, Fehlermeldungen oder Funktionswünschen. Antworten erfolgen per E-Mail.") }}

  <div class="contact-grid">
    {% call card('contact-card') %}
      <form method="post" action="/kontakt" class="stack">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <input type="hidden" name="started_at" value="{{ contact_started_at }}" />
        <label class="contact-honeypot" aria-hidden="true">
          <span>Bitte leer lassen</span>
          <input type="text" name="website" tabindex="-1" autocomplete="off" />
        </label>

        <div class="inline-grid">
          <label>
            Name (optional)
            <input type="text" name="name" value="{{ contact_name }}" maxlength="120" />
          </label>
          <label>
            E-Mail-Adresse
            <input type="email" name="email" value="{{ contact_email }}" maxlength="254" required />
          </label>
        </div>

        <label>
          Kategorie
          <select name="category" required>
            {% for option in category_options %}
              <option value="{{ option.value }}"
                      {% if option.value == contact_category %}selected{% endif %}>{{ option.label }}</option>
            {% endfor %}
          </select>
        </label>

        <label>
          Betreff
          <input type="text" name="subject" value="{{ contact_subject }}" maxlength="180" required />
        </label>

        <label>
          Nachricht
          <textarea name="message" rows="9" maxlength="5000" required>{{ contact_message }}</textarea>
        </label>

        <p class="muted">
          Bitte keine sensiblen Passwörter oder Zugangsdaten mitsenden. Anhänge sind in dieser ersten Version noch nicht möglich.
        </p>

        {{ button("Nachricht senden", type="submit") }}
      </form>
    {% endcall %}

    {% call card('contact-card contact-info-card') %}
      <h2>Wofür ist das gedacht?</h2>
      <ul class="contact-info-list">
        <li>Fehler melden, wenn etwas nicht wie erwartet funktioniert</li>
        <li>Funktionswünsche einreichen</li>
        <li>Fragen zur Nutzung oder zu Einstellungen stellen</li>
      </ul>
      <p class="muted">
        Nachrichten werden intern als Ticket gespeichert. So gehen Rückmeldungen nicht verloren und können strukturiert bearbeitet werden.
      </p>
      <p class="muted">
        Hinweise zu Anbieter und Datenschutz findest du ebenfalls unten im Footer über <a href="/impressum">Impressum</a> und <a href="/datenschutz">Datenschutz</a>.
      </p>
    {% endcall %}
  </div>
{% endblock %}