{% extends "base.html" %}

{% block title %}Admin | Support Tickets{% endblock %}

{% block content %}
<section class="panel">
    <h1>Support Tickets</h1>
    <p>Ticketstatus verwalten und Antworten hinterlegen.</p>
</section>

<section class="tickets">
    {% for ticket in tickets %}
    <article class="ticket">
        <h3>{{ ticket.title }}</h3>
        <p><strong>Nutzer:</strong> {{ ticket.username }} | <strong>Priorität:</strong> {{ ticket.priority }}</p>
        <p>{{ ticket.description }}</p>
        <form method="post" class="update-form">
            <input type="hidden" name="ticket_id" value="{{ ticket.id }}">
            <select name="status">
                <option value="Offen" {{ 'selected' if ticket.status == 'Offen' else '' }}>Offen</option>
                <option value="In Bearbeitung" {{ 'selected' if ticket.status == 'In Bearbeitung' else '' }}>In Bearbeitung</option>
                <option value="Geloest" {{ 'selected' if ticket.status == 'Geloest' else '' }}>Gelöst</option>
            </select>
            <textarea name="admin_response" rows="3" placeholder="Antwort an Nutzer">{{ ticket.admin_response }}</textarea>
            <button type="submit">Aktualisieren</button>
        </form>
    </article>
    {% else %}
    <article class="ticket"><p>Keine Tickets vorhanden.</p></article>
    {% endfor %}
</section>

<style>
.panel { margin-bottom: 1rem; }
.tickets { display: grid; gap: 0.8rem; }
.ticket { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; }
.ticket p { margin-top: 0.3rem; }
.update-form { margin-top: 0.6rem; display: grid; gap: 0.55rem; }
select, textarea { width: 100%; border: 1px solid #c9d8e3; border-radius: 10px; padding: 0.55rem; font: inherit; }
button { width: fit-content; border: 1px solid #0a4c74; background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%); color: #fff; padding: 0.5rem 1rem; border-radius: 999px; font-weight: 700; }
</style>
{% endblock %}