{% extends "base.html" %}
{% block title %}IT Manager Dashboard — Echo{% 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 Manager Dashboard</h1>
      <p class="text-lg text-zinc-400">Welcome, {{ (user.name if user else 'Manager') }}.</p>
    </div>
    <span class="inline-flex items-center text-xs px-2 py-1 rounded bg-green-900 text-green-300 border border-green-800">IT MANAGER</span>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <a href="/it_manager/team" 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">Team Performance</div>
      </div>
    </a>
    <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_manager/ticket_overview" 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/ticket.svg" alt="Ticket Icon" class="w-8 h-8  mr-2 invert brightness-0">
        <div class="text-2xl font-medium">Ticket Overview</div>
      </div>
    </a>
  </div>

  <div class="bg-zinc-900 border border-zinc-800 rounded-lg p-4">
    <h2 class="text-2xl font-semibold mb-2">Team Snapshot</h2>
    
  </div>
</div>
{% endblock %}