{% extends "base.html" %}

{% block title %}{{ kind }} senden — {{ belegnr }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="{{ back_url }}" class="hover:underline">← Zurück</a> / {{ kind }} senden</p>{% endblock %}
{% block heading %}{{ kind }} senden — {{ belegnr }}{% endblock %}

{% block content %}
{% if not smtp_configured %}
<div class="card max-w-3xl" style="border-color: rgba(239, 68, 68, 0.30); background: rgba(239, 68, 68, 0.04);">
  <div class="p-5 text-sm">
    <p class="font-semibold text-red-700">SMTP nicht konfiguriert</p>
    <p class="text-xs mt-1">Bitte trage SMTP-Host, Port und Absender unter <a href="/settings#smtp" class="text-blue-700">Einstellungen → SMTP</a> ein.</p>
  </div>
</div>
{% endif %}

<form method="post" action="{{ post_url }}" class="card max-w-3xl">
  <div class="card-header"><div>
    <h2>E-Mail-Versand</h2>
    <p class="sub">Empfänger / Betreff / Text vor dem Versenden anpassbar — Default-Texte aus den E-Mail-Templates</p>
  </div></div>
  <div class="p-5 grid grid-cols-1 gap-4">

    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">An</label>
      <input class="input mt-1 w-full" type="email" name="to" value="{{ recipient }}" required
             placeholder="kunde@firma.de · komma-getrennt für mehrere">
      {% if not recipient %}<p class="text-[11px] text-amber-700 mt-1">Hinweis: der Kunde hat keine E-Mail-Adresse hinterlegt.</p>{% endif %}
    </div>

    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Betreff</label>
      <input class="input mt-1 w-full" type="text" name="subject" value="{{ subject }}" required>
    </div>

    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Nachricht</label>
      <textarea class="input mt-1 w-full" name="body" rows="14" style="font-family: 'Harmonia', monospace; font-size: 13px;">{{ body }}</textarea>
    </div>

    <div class="text-xs">
      <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500 mb-1">Anhänge</p>
      <ul class="space-y-1">
        {% for att in attachments_preview %}
        <li class="font-mono text-neutral-700">📎 {{ att }}</li>
        {% endfor %}
      </ul>
      <p class="text-[11px] text-neutral-500 mt-1">PDFs werden automatisch beim Versenden generiert</p>
    </div>
  </div>

  <div class="px-5 py-4 border-t flex items-center justify-between" style="border-color: var(--card-border-2);">
    <a class="btn btn-secondary" href="{{ back_url }}">Abbrechen</a>
    <button class="btn btn-primary" type="submit" {% if not smtp_configured %}disabled{% endif %}>Senden</button>
  </div>
</form>

{% if request.query_params.get('info') %}
<div class="card max-w-3xl mt-4">
  <div class="p-3 text-xs text-neutral-700">{{ request.query_params.get('info') }}</div>
</div>
{% endif %}
{% endblock %}