{% extends "base.html" %}
{% block title %}Tickets{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Tickets</h1>
    <a href="{{ url_for('create_ticket') }}" class="btn btn-primary">+ New Ticket</a>
</div>

{# ── stats bar ── #}
<div class="stats-bar">
    <a href="{{ url_for('index') }}" class="stat {% if not status_filter %}active{% endif %}">
        <span class="stat-num">{{ tickets|length }}</span>
        <span class="stat-label">Total</span>
    </a>
    {% for val, label in statuses %}
    <a href="{{ url_for('index', status=val, priority=priority_filter, search=search, project=project_filter) }}"
       class="stat stat-{{ val }} {% if status_filter == val %}active{% endif %}">
        <span class="stat-num">{{ counts.get(val, 0) }}</span>
        <span class="stat-label">{{ label }}</span>
    </a>
    {% endfor %}
</div>

{# ── filters ── #}
<form method="get" class="filters">
    <input type="text" name="search" placeholder="Search tickets..." value="{{ search }}"
           class="input search-input">
    <select name="priority" class="input">
        <option value="">All Priorities</option>
        {% for val, label in priorities %}
        <option value="{{ val }}" {% if priority_filter == val %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
    </select>
    {% if projects %}
    <select name="project" class="input">
        <option value="">All Projects</option>
        {% for p in projects %}
        <option value="{{ p }}" {% if project_filter == p %}selected{% endif %}>{{ p }}</option>
        {% endfor %}
    </select>
    {% endif %}
    <button type="submit" class="btn btn-secondary">Filter</button>
    {% if status_filter or priority_filter or search or project_filter %}
    <a href="{{ url_for('index') }}" class="btn btn-ghost">Clear</a>
    {% endif %}
</form>

{# ── ticket list ── #}
{% if tickets %}
<div class="ticket-list">
    {% for ticket in tickets %}
    <a href="{{ url_for('view_ticket', ticket_id=ticket.id) }}" class="ticket-card">
        <div class="ticket-card-header">
            <span class="ticket-id">#{{ ticket.id }}</span>
            <span class="badge badge-{{ ticket.status.value }}">{{ ticket.status.value.replace('_', ' ') | title }}</span>
        </div>
        <h3 class="ticket-card-title">{{ ticket.title }}</h3>
        <p class="ticket-card-desc">{{ ticket.description[:120] }}{% if ticket.description|length > 120 %}...{% endif %}</p>
        <div class="ticket-card-meta">
            <span class="badge badge-priority badge-p-{{ ticket.priority.value }}">{{ ticket.priority.value | upper }}</span>
            {% if ticket.project %}
            <span class="badge badge-project">{{ ticket.project }}</span>
            {% endif %}
            {% if ticket.assignee %}
            <span class="assignee">👤 {{ ticket.assignee }}</span>
            {% endif %}
            <span class="date">{{ ticket.created_at[:10] }}</span>
        </div>
    </a>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <p>No tickets found.</p>
    <a href="{{ url_for('create_ticket') }}" class="btn btn-primary">Create the first ticket</a>
</div>
{% endif %}
{% endblock %}