{% extends "base.html" %}
{% block title %}My Tickets — Echo{% endblock %}
{% block content %}

<div class="max-w-5xl mx-auto space-y-6">
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-semibold">My Tickets</h1>
    {% set role_href = (user.role | lower) if user and user.role else 'end_user' %}
    <a href="/dashboard/{{ role_href }}" class="text-m text-blue-400 hover:text-blue-300">Back to Dashboard</a>
  </div>

  <div class="bg-zinc-900 border border-zinc-800 rounded-lg p-4">
    <h2 class="text-2xl font-semibold mb-2">Historic Tickets</h2>
    {% if tickets and tickets|length > 0 %}
      <ul class="divide-y">
        {% for ticket in tickets %}
          <li class="py-3 flex items-start justify-between">
            <div class="pr-4">
              <a href="/tickets/{{ ticket.id }}" class="font-medium text-lg text-blue-400 hover:underline">{{ ticket.title }}</a>
              <div class="text-m text-white-400 mt-1">
          Category: {{ ticket.category.value if ticket.category else 'general' }} ·
          Priority: {{ ticket.priority.value if ticket.priority else 'medium' }} ·
          Status: {{ ticket.status.value if ticket.status else 'open' }}
              </div>
            </div>
            <div class="text-right text-m text-whit-500 whitespace-nowrap">
              {% if ticket.created_at %}
          <div>{{ ticket.created_at.strftime('%b %d, %I:%M %p') }}</div>
              {% else %}
          <div class="text-zinc-500">—</div>
              {% endif %}
              <a href="/tickets/{{ ticket.id }}" class="inline-block mt-1 text-blue-400 hover:text-blue-300">View</a>
            </div>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="text-lg text-zinc-400">No open tickets yet.</p>
    {% endif %}
  </div>    
</div>
{% endblock %}