{% extends "base.html" %}

{% block content %}
<h1 class="title">Support Tickets</h1>

<div class="box">
    <h2 class="subtitle">Create New Ticket</h2>
    <form method="POST">
        <div class="field">
            <label class="label">Title</label>
            <div class="control">
                <input class="input" type="text" name="title" placeholder="Brief summary">
            </div>
        </div>

        <div class="field">
            <label class="label">Description</label>
            <div class="control">
                <textarea class="textarea" name="description" placeholder="Describe your issue..."></textarea>
            </div>
        </div>

        <div class="control">
            <button class="button is-link">Submit Ticket</button>
        </div>
    </form>
</div>

<div class="box">
    <h2 class="subtitle">Your Tickets</h2>
    <table class="table is-fullwidth is-hoverable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Status</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            {% for ticket in tickets %}
            <tr>
                <td>{{ ticket.id }}</td>
                <td><a href="{{ url_for('main.ticket_detail', ticket_id=ticket.id) }}"><strong>{{ ticket.title
                            }}</strong></a></td>
                <td><span class="tag is-{{ 'success' if ticket.status == 'CLOSED' else 'warning' }}">{{ ticket.status
                        }}</span></td>
                <td>{{ ticket.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
            </tr>
            {% else %}
            <tr>
                <td colspan="4">No tickets found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}