{% extends "base.html" %}
{% block title %}Control Panel – Echo{% endblock %}
{% block content %}
<div class="max-w-xl mx-auto space-y-4" data-control-panel="admin">
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-semibold">Control Panel</h1>
  </div>

  <div class="bg-zinc-900 border border-zinc-800 rounded-lg p-6 shadow-sm space-y-4">
    <div class="flex items-center justify-between">
      <div>
        <div class="text-xl font-semibold">Database Connection</div>
        <p class="text-sm text-zinc-500">Live connection status and basic info</p>
      </div>
      <div class="flex items-center gap-2">
        <span id="db-indicator" class="h-3 w-3 rounded-full bg-zinc-500"></span>
        <span id="db-status" class="text-sm text-zinc-400">Checking…</span>
      </div>
    </div>
    <dl class="grid grid-cols-2 gap-4 text-sm">
      <div>
        <dt class="text-zinc-500">Latency</dt>
        <dd id="db-latency" class="font-mono text-zinc-100">–</dd>
      </div>
      <div>
        <dt class="text-zinc-500">Database</dt>
        <dd id="db-name" class="font-mono text-zinc-100">–</dd>
      </div>
      <div>
        <dt class="text-zinc-500">Database Type</dt>
        <dd id="db-dialect" class="font-mono text-zinc-100">–</dd>
      </div>
      <div>
        <dt class="text-zinc-500">Driver</dt>
        <dd id="db-driver" class="font-mono text-zinc-100">–</dd>
      </div>
    </dl>
    <p id="error" class="mt-2 text-xs text-red-400 hidden"></p>
  </div>

  <div class="bg-zinc-900 border border-zinc-800 rounded-lg p-6 shadow-sm space-y-4">
    <div class="text-2xl font-bold">Key Metrics</div>
    <div class="flex items-center justify-between">
      <div class="text-lg font-semibold text-zinc-500">Total Users</div>
      <div class="mt-2 flex items-end gap-3">
        <div id="metric-total-users" class="text-3xl font-bold">{{ total_users }}</div>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <div class="text-lg font-semibold text-zinc-500">Total Tickets</div>
      <div class="mt-2 flex items-end gap-3">
        <div id="metric-total-tickets" class="text-3xl font-bold">{{ total_tickets }}</div>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <div class="text-lg font-semibold text-zinc-500">Open Tickets</div>
      <div class="mt-2 flex items-end gap-3">
        <div id="metric-open-tickets" class="text-3xl font-bold">{{ open_tickets }}</div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="/static/js/db_status.js"></script>
{% endblock %}