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

{% block content %}
<!-- Filters -->
<div class="card mb-4">
  <div class="card-body">
    <form method="GET" class="row g-2 align-items-end">
      <div class="col-md-4">
        <label class="form-label">Search</label>
        <input type="text" class="form-control" name="q" value="{{ search }}" placeholder="Search by title, ticket #, description…"/>
      </div>
      <div class="col-md-2">
        <label class="form-label">Status</label>
        <select class="form-select" name="status">
          <option value="">All Statuses</option>
          {% for s in statuses %}
          <option value="{{ s }}" {% if s == status %}selected{% endif %}>{{ s.replace('_',' ').title() }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-2">
        <label class="form-label">Priority</label>
        <select class="form-select" name="priority">
          <option value="">All Priorities</option>
          {% for p in priorities %}
          <option value="{{ p }}" {% if p == priority %}selected{% endif %}>{{ p.title() }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-2">
        <label class="form-label">Category</label>
        <select class="form-select" name="category">
          <option value="">All Categories</option>
          {% for c in categories %}
          <option value="{{ c }}" {% if c == category %}selected{% endif %}>{{ c.replace('_',' ').title() }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-2 d-flex gap-2">
        <button type="submit" class="btn btn-primary flex-fill"><i class="bi bi-search me-1"></i>Filter</button>
        <a href="{{ url_for('tickets.ticket_list') }}" class="btn btn-secondary"><i class="bi bi-x-lg"></i></a>
      </div>
    </form>
  </div>
</div>

<!-- Ticket table -->
<div class="card">
  <div class="card-header d-flex align-items-center justify-content-between">
    <span><i class="bi bi-ticket-detailed me-2"></i>
      Tickets
      <span style="font-size:12px;color:var(--muted);font-family:'Space Mono',monospace;">({{ tickets.total }})</span>
    </span>
    <a href="{{ url_for('tickets.create_ticket') }}" class="btn btn-primary btn-sm">
      <i class="bi bi-plus-lg me-1"></i>New Ticket
    </a>
  </div>
  <div class="card-body p-0">
    {% if tickets.items %}
    <table class="table mb-0">
      <thead>
        <tr>
          <th>Ticket #</th>
          <th>Title</th>
          <th>Category</th>
          <th>Status</th>
          <th>Priority</th>
          {% if current_user.is_it_staff %}<th>Submitted By</th>{% endif %}
          <th>Date</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for t in tickets.items %}
        <tr>
          <td>
            <a href="{{ url_for('tickets.ticket_detail', ticket_id=t.id) }}"
               class="mono" style="font-size:12px;color:var(--accent3);">{{ t.ticket_number }}</a>
            {% if t.ai_generated %}
              <i class="bi bi-robot" style="font-size:11px;color:var(--muted);" title="Created via AI Assistant"></i>
            {% endif %}
          </td>
          <td>
            <a href="{{ url_for('tickets.ticket_detail', ticket_id=t.id) }}" style="color:var(--text);font-size:14px;">
              {{ t.title[:55] }}{% if t.title|length > 55 %}…{% endif %}
            </a>
          </td>
          <td style="font-size:12px;color:var(--muted);">{{ t.category.replace('_',' ').title() }}</td>
          <td><span class="badge badge-{{ t.status }}">{{ t.status.replace('_',' ').upper() }}</span></td>
          <td><span class="badge badge-{{ t.priority }}">{{ t.priority.upper() }}</span></td>
          {% if current_user.is_it_staff %}
          <td style="font-size:13px;">{{ t.creator.full_name }}</td>
          {% endif %}
          <td style="font-size:12px;color:var(--muted);">{{ t.created_at.strftime('%b %d, %Y') }}</td>
          <td>
            <a href="{{ url_for('tickets.ticket_detail', ticket_id=t.id) }}" class="btn btn-secondary btn-sm">
              <i class="bi bi-eye"></i>
            </a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    <!-- Pagination -->
    {% if tickets.pages > 1 %}
    <div class="d-flex justify-content-center py-3">
      <nav>
        <ul class="pagination mb-0">
          {% if tickets.has_prev %}
          <li class="page-item">
            <a class="page-link" href="{{ url_for('tickets.ticket_list', page=tickets.prev_num, status=status, priority=priority, category=category, q=search) }}">‹ Prev</a>
          </li>
          {% endif %}
          {% for p in tickets.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
            {% if p %}
            <li class="page-item {% if p == tickets.page %}active{% endif %}">
              <a class="page-link" href="{{ url_for('tickets.ticket_list', page=p, status=status, priority=priority, category=category, q=search) }}">{{ p }}</a>
            </li>
            {% else %}
            <li class="page-item disabled"><span class="page-link">…</span></li>
            {% endif %}
          {% endfor %}
          {% if tickets.has_next %}
          <li class="page-item">
            <a class="page-link" href="{{ url_for('tickets.ticket_list', page=tickets.next_num, status=status, priority=priority, category=category, q=search) }}">Next ›</a>
          </li>
          {% endif %}
        </ul>
      </nav>
    </div>
    {% endif %}

    {% else %}
    <div class="p-5 text-center" style="color:var(--muted);">
      <i class="bi bi-inbox" style="font-size:40px;display:block;margin-bottom:12px;"></i>
      No tickets found.
      {% if search or status or priority or category %}
        <a href="{{ url_for('tickets.ticket_list') }}" style="color:var(--accent3);">Clear filters</a>
      {% else %}
        <a href="{{ url_for('tickets.create_ticket') }}" style="color:var(--accent3);">Submit your first ticket →</a>
      {% endif %}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}