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

  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <a href="/admin/knowledge_base" 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/brain.svg" alt="Dial Icon" class="w-8 h-8 mr-2 invert brightness-0">
        <div class="text-3xl font-medium">Knowledge Base</div>
      </div>
    </a>
    <a href="/admin/control_panel" 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/dial.svg" alt="Dial Icon" class="w-8 h-8 mr-2 invert brightness-0">
        <div class="text-3xl font-medium">Control Panel</div>
      </div>
    </a>
    <a href="/admin/user_management" 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/user.svg" alt="User Icon" class="w-8 h-8 mr-2 invert brightness-0">
        <div class="text-3xl font-medium">User Management</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">Recent Activity</h2>
    <p class="text-sm text-zinc-400">No activity yet — first iteration placeholder.</p>
  </div>
</div>
{% endblock %}