{% extends "base.html" %}
{% from "_macros.html" import avatar %}

{% block title %}Feedback & Bug-Report{% endblock %}
{% block heading %}Feedback & Bug-Report{% endblock %}

{% block content %}

{% if request.query_params.get('sent') %}
<div class="alert alert-blue text-sm">
  <p class="font-medium">Danke!</p>
  <p class="mt-1 text-neutral-600">Dein Feedback wurde gespeichert.</p>
</div>
{% endif %}

<section class="grid grid-cols-1 lg:grid-cols-3 gap-6">

  <!-- Form -->
  <form method="post" action="/feedback" class="card lg:col-span-1 self-start">
    <div class="card-header"><div>
      <h2>Neues Feedback</h2>
      <p class="sub">Bug, Feature, Frage</p>
    </div></div>
    <div class="p-5 space-y-4">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Art *</label>
        <select class="select mt-1 w-full" name="kind" required>
          <option value="bug">🐛 Bug — etwas funktioniert nicht</option>
          <option value="feature">✨ Feature-Wunsch — fehlt</option>
          <option value="question">? Frage — wie geht das</option>
          <option value="other">💬 Sonstiges</option>
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Wo (Seite/URL)</label>
        <input class="input mt-1 w-full" type="text" name="page" value="{{ page }}" placeholder="z.B. /items/12 oder Dashboard">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Beschreibung *</label>
        <textarea class="input mt-1 w-full" rows="6" name="message" required
                  placeholder="Was sollte passieren? Was passiert stattdessen?"></textarea>
      </div>
      <button class="btn btn-primary w-full" type="submit">Senden</button>
    </div>
  </form>

  <!-- Entries list -->
  <div class="card lg:col-span-2">
    <div class="card-header"><div>
      <h2>{{ entries|length }} Einträge</h2>
      <p class="sub">Alle bisherigen Meldungen, neueste zuerst</p>
    </div></div>
    {% if entries %}
    <div class="divide-y" style="border-color:#e5e5e5;">
      {% for e in entries %}
      <div class="p-5">
        <div class="flex items-start gap-3">
          {% if e.kind == 'bug' %}<span class="badge badge-red">🐛 Bug</span>
          {% elif e.kind == 'feature' %}<span class="badge badge-blue">✨ Feature</span>
          {% elif e.kind == 'question' %}<span class="badge badge-amber">? Frage</span>
          {% else %}<span class="badge badge-neutral">💬 Sonstiges</span>
          {% endif %}
          {% if e.status == 'open' %}
            <span class="badge badge-amber">Offen</span>
          {% elif e.status == 'triaged' %}
            <span class="badge badge-blue">In Arbeit</span>
          {% elif e.status == 'done' %}
            <span class="badge badge-emerald">Erledigt</span>
          {% else %}
            <span class="badge badge-neutral">Won't fix</span>
          {% endif %}
          <span class="text-xs text-neutral-500 nums ml-auto">{{ e.created_at[:16] }}</span>
        </div>
        <div class="mt-2 flex items-start gap-3">
          {% if e.first_name %}{{ avatar(e.first_name, e.last_name) }}{% endif %}
          <div class="flex-1 min-w-0">
            <p class="text-sm whitespace-pre-line">{{ e.message }}</p>
            {% if e.page %}<p class="text-xs text-neutral-500 mt-1 nums">Seite: {{ e.page }}</p>{% endif %}
            {% if e.first_name %}
              <p class="text-xs text-neutral-500 mt-1">— {{ e.first_name }} {{ e.last_name }}</p>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="p-12 text-center text-sm text-neutral-500">Noch kein Feedback. Sei der Erste — links eintragen.</div>
    {% endif %}
  </div>

</section>

{% endblock %}