{% extends "base.html" %}
{% block title %}IT Worker Dashboard — Echo 1.1{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-4xl font-semibold">IT Agent Dashboard</h1>
      <p class="text-lg text-zinc-400">Welcome, {{ (user.name if user else 'Agent') }}.</p>
    </div>
    <span class="inline-flex items-center text-xs px-2 py-1 rounded bg-amber-900 text-amber-300 border border-amber-800">IT WORKER</span>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <a href="/form_menu" class="block p-4 rounded-lg border border-zinc-800 bg-zinc-900 hover:shadow">
      <div class="flex text-align-centre items-center">
        <img src="/static/icons/form.svg" alt="Form Icon" class="w-8 h-8 mr-2 invert brightness-0">
        <div class="text-2xl font-medium">Form Management</div>
      </div>
    </a>
    <a href="/it_agent/resolved_tickets" class="block p-4 rounded-lg border border-zinc-800 bg-zinc-900 hover:shadow">
      <div class="flex text-align-centre items-center">
        <img src="/static/icons/lightbulb.svg" alt="Lightbulb Icon" class="w-8 h-8 mr-2 invert brightness-0">
        <div class="text-2xl font-medium">Resolved Tickets</div>
      </div>
    </a>
    <a href="/it_agent/performance" class="block p-4 rounded-lg border border-zinc-800 bg-zinc-900 hover:shadow">
      <div class="flex text-align-centre items-center">
        <img src="/static/icons/metrics.svg" alt="Metrics Icon" class="w-8 h-8 mr-2 invert brightness-0">
        <div class="text-2xl font-medium">My performance</div>
      </div>
    </a>
  </div>

  <div class="bg-zinc-900 border border-zinc-800 rounded-lg p-4">
    <h2 class="text-lg font-semibold mb-2">Open 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-blue-400 hover:underline">{{ ticket.title }} - {{ticket.requester_name}}</a>
          <div class="text-xs text-zinc-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-xs text-zinc-500 whitespace-nowrap">
          <div>{{ ticket.created_at.strftime('%b %d %H:%M') }}</div>
          <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-sm text-zinc-400">No open tickets right now.</p>
    {% endif %}
  </div>
</div>
{% endblock %}