{% extends "base.html" %}
{% block title %}Dashboard // Synapse-Cortex{% endblock %}
{% block header %}Command Overview // {{ user.tenant.name if user.tenant else '' }}{% endblock %}
{% block content %}
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
  <a href="/tickets?filter=unassigned" class="block border border-cortex-border bg-cortex-panel rounded-md p-4 relative overflow-hidden hover:border-accent-blue/50 transition">
    <div class="absolute top-0 left-0 w-full h-0.5 bg-accent-blue"></div>
    <div class="text-[10px] text-cortex-muted uppercase tracking-wider">Unassigned</div>
    <div class="text-3xl font-bold text-accent-blue mt-1">{{ queue.unassigned }}</div>
    <div class="text-[10px] text-cortex-muted mt-1 uppercase">Needs triage</div>
  </a>
  <a href="/tickets?filter=awaiting_user" class="block border border-cortex-border bg-cortex-panel rounded-md p-4 relative overflow-hidden hover:border-accent-green/50 transition">
    <div class="absolute top-0 left-0 w-full h-0.5 bg-accent-green"></div>
    <div class="text-[10px] text-cortex-muted uppercase tracking-wider">Awaiting User</div>
    <div class="text-3xl font-bold text-accent-green mt-1">{{ queue.awaiting_user }}</div>
    <div class="text-[10px] text-cortex-muted mt-1 uppercase">Pending requester</div>
  </a>
  <a href="/tickets?filter=sla_breaching" class="block border {% if queue.sla_breaching > 0 %}border-accent-red/50{% else %}border-cortex-border{% endif %} bg-cortex-panel rounded-md p-4 relative overflow-hidden hover:border-accent-red/50 transition"
       {% if queue.sla_breaching > 0 %}style="box-shadow: 0 0 20px rgba(255,59,92,0.25);"{% endif %}>
    <div class="absolute top-0 left-0 w-full h-0.5 bg-accent-red"></div>
    <div class="text-[10px] text-cortex-muted uppercase tracking-wider">SLA Breaching</div>
    <div class="text-3xl font-bold text-accent-red mt-1">{{ queue.sla_breaching }}</div>
    {% if queue.sla_breaching > 0 %}
    <div class="text-[10px] text-accent-red mt-1 uppercase animate-pulse">&#9650; Action Required</div>
    {% else %}
    <div class="text-[10px] text-cortex-muted mt-1 uppercase">All clear</div>
    {% endif %}
  </a>
  <a href="/tickets?filter=resolved_today" class="block border border-cortex-border bg-cortex-panel rounded-md p-4 relative overflow-hidden hover:border-accent-orange/50 transition">
    <div class="absolute top-0 left-0 w-full h-0.5 bg-accent-orange"></div>
    <div class="text-[10px] text-cortex-muted uppercase tracking-wider">Resolved Today</div>
    <div class="text-3xl font-bold text-accent-orange mt-1">{{ queue.resolved_today }}</div>
    <div class="text-[10px] text-cortex-muted mt-1 uppercase">Closed loop</div>
  </a>
</div>

<div class="border border-cortex-border bg-cortex-panel rounded-md">
  <div class="px-4 py-3 border-b border-cortex-border flex items-center justify-between">
    <div class="text-xs uppercase tracking-wider text-cortex-muted">Recent Tickets</div>
    <a href="/tickets" class="text-xs text-accent-blue hover:underline">View all &rarr;</a>
  </div>
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left text-[10px] text-cortex-muted uppercase tracking-wider border-b border-cortex-border">
        <th class="px-4 py-2">Ticket</th>
        <th class="px-4 py-2">Title</th>
        <th class="px-4 py-2">Priority</th>
        <th class="px-4 py-2">Status</th>
        <th class="px-4 py-2">Assigned</th>
        <th class="px-4 py-2">SLA</th>
      </tr>
    </thead>
    <tbody>
      {% for t in tickets %}
      <tr class="border-b border-cortex-border/60 hover:bg-cortex-panel2">
        <td class="px-4 py-2 text-accent-blue">{{ t.ticket_number }}</td>
        <td class="px-4 py-2">{{ t.title }}</td>
        <td class="px-4 py-2">
          <span class="text-[10px] px-2 py-0.5 rounded uppercase
            {% if t.priority.value == 'critical' %}bg-accent-red/15 text-accent-red border border-accent-red/30
            {% elif t.priority.value == 'high' %}bg-accent-orange/15 text-accent-orange border border-accent-orange/30
            {% elif t.priority.value == 'medium' %}bg-accent-blue/15 text-accent-blue border border-accent-blue/30
            {% else %}bg-cortex-panel2 text-cortex-muted border border-cortex-border{% endif %}">
            {{ t.priority.value }}
          </span>
        </td>
        <td class="px-4 py-2 text-chrome uppercase text-xs">{{ t.status.value.replace('_',' ') }}</td>
        <td class="px-4 py-2 text-chrome-dim text-xs">{{ t.assigned_to.full_name if t.assigned_to else '—' }}</td>
        <td class="px-4 py-2">
          {% if t.is_sla_breaching %}
          <span class="text-[10px] text-accent-red uppercase animate-pulse">&#9650; Breaching</span>
          {% elif t.status.value in ('resolved','closed') %}
          <span class="text-[10px] text-accent-green uppercase">&#10003; Met</span>
          {% else %}
          <span class="text-[10px] text-cortex-muted uppercase">On track</span>
          {% endif %}
        </td>
      </tr>
      {% else %}
      <tr><td colspan="6" class="px-4 py-6 text-center text-cortex-muted text-xs">No tickets logged yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}