{% extends "base.html" %}

{% block title %}Dashboard — {{ app_name }}{% endblock %}

{% block breadcrumbs %}
<div class="flex items-center text-sm">
  <span class="text-slate-300 font-semibold">Dashboard</span>
</div>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto space-y-8">
  <div class="flex items-end justify-between">
    <div>
      <h1 class="text-3xl font-bold text-white tracking-tight">Overview</h1>
      <p class="text-slate-400 mt-2 text-sm">Real-time telemetry and compliance status across your fleet.</p>
    </div>
    <div class="flex gap-2">
      <a href="/builder" class="px-4 py-2 bg-brand-600 hover:bg-brand-500 text-white rounded-lg text-sm font-semibold transition-all shadow-[0_0_15px_rgba(6,182,212,0.3)]">
        + New Build
      </a>
    </div>
  </div>

  <!-- Hero KPI Widgets -->
  <section class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-slate-900/60 backdrop-blur-md border border-slate-800/60 rounded-2xl p-6 relative overflow-hidden group hover:border-slate-700/80 transition-all">
      <div class="absolute top-0 right-0 p-5 opacity-10 group-hover:opacity-20 transition-opacity">
        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
      </div>
      <h3 class="text-sm font-semibold text-slate-400 mb-1">Global Posture Score</h3>
      <div class="flex items-baseline gap-2">
        <span class="text-4xl font-bold text-white tracking-tight">96<span class="text-2xl text-slate-500">%</span></span>
      </div>
      <p class="text-xs text-emerald-400 mt-2 flex items-center gap-1 font-medium">
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
        +2.4% from last week
      </p>
    </div>

    <div class="bg-slate-900/60 backdrop-blur-md border border-slate-800/60 rounded-2xl p-6 relative overflow-hidden group hover:border-slate-700/80 transition-all">
      <div class="absolute top-0 right-0 p-5 opacity-10 group-hover:opacity-20 transition-opacity">
        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
      </div>
      <h3 class="text-sm font-semibold text-slate-400 mb-1">Active Golden Images</h3>
      <div class="flex items-baseline gap-2">
        <span class="text-4xl font-bold text-white tracking-tight">12</span>
      </div>
      <div class="flex gap-2 mt-3">
        {% for p in providers %}
          <span class="px-2 py-0.5 bg-slate-800 border border-slate-700 rounded text-[10px] font-bold text-slate-300 uppercase tracking-wider">{{ p }}</span>
        {% else %}
          <span class="text-xs text-slate-500">No providers registered</span>
        {% endfor %}
      </div>
    </div>

    <div class="bg-slate-900/60 backdrop-blur-md border border-slate-800/60 rounded-2xl p-6 relative overflow-hidden group hover:border-slate-700/80 transition-all">
      <div class="absolute top-0 right-0 p-5 opacity-10 group-hover:opacity-20 transition-opacity">
        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
      </div>
      <h3 class="text-sm font-semibold text-slate-400 mb-1">Active Drifts</h3>
      <div class="flex items-baseline gap-2">
        <span class="text-4xl font-bold text-white tracking-tight">3</span>
      </div>
      <p class="text-xs text-rose-400 mt-2 flex items-center gap-1 font-medium">
        Requires attention
        <a href="/auditor" class="underline hover:text-rose-300">View Audits</a>
      </p>
    </div>
  </section>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <!-- Recent build jobs -->
    <section>
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-sm font-semibold text-slate-300">Recent Build Jobs</h2>
        <a href="/builder" class="text-xs text-brand-400 hover:text-brand-300 font-medium">View All &rarr;</a>
      </div>
      <div class="bg-slate-900/40 backdrop-blur-sm border border-slate-800/50 rounded-xl overflow-hidden shadow-sm">
        {% if recent_jobs %}
        <table class="w-full text-sm">
          <thead class="bg-slate-800/30 text-slate-400 text-xs uppercase tracking-wider font-semibold">
            <tr>
              <th class="px-5 py-3.5 text-left">ID</th>
              <th class="px-5 py-3.5 text-left">Profile</th>
              <th class="px-5 py-3.5 text-left">Status</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-800/50">
            {% for job in recent_jobs %}
            <tr class="hover:bg-slate-800/30 transition-colors">
              <td class="px-5 py-4 text-slate-300 font-mono text-xs">
                <a href="/builder/run/{{ job.id }}" class="hover:text-brand-400 transition">{{ job.id[:8] }}</a>
              </td>
              <td class="px-5 py-4">
                <div class="flex items-center gap-2">
                  <span class="text-slate-200 font-medium">{{ job.profile_name }}</span>
                  <span class="px-1.5 py-0.5 bg-slate-800 border border-slate-700 rounded text-[9px] font-bold text-slate-400 uppercase tracking-widest">{{ job.provider_name }}</span>
                </div>
              </td>
              <td class="px-5 py-4">
                {% if job.status.value == 'complete' %}
                  <div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-900/30 border border-emerald-800/50 text-xs font-medium text-emerald-400">
                    <div class="w-1.5 h-1.5 rounded-full bg-emerald-400 shadow-[0_0_5px_rgba(52,211,153,0.8)]"></div>
                    Complete
                  </div>
                {% elif job.status.value == 'failed' %}
                  <div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-rose-900/30 border border-rose-800/50 text-xs font-medium text-rose-400">
                    <div class="w-1.5 h-1.5 rounded-full bg-rose-500"></div>
                    Failed
                  </div>
                {% else %}
                  <div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-brand-900/30 border border-brand-800/50 text-xs font-medium text-brand-400">
                    <div class="w-1.5 h-1.5 rounded-full bg-brand-400 animate-pulse"></div>
                    {{ job.status.value | title }}
                  </div>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        <div class="p-8 text-center bg-slate-800/10">
          <p class="text-slate-500 text-sm">No build jobs have been executed yet.</p>
        </div>
        {% endif %}
      </div>
    </section>

    <!-- Recent audits -->
    <section>
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-sm font-semibold text-slate-300">Recent Live Audits</h2>
        <a href="/auditor" class="text-xs text-brand-400 hover:text-brand-300 font-medium">View All &rarr;</a>
      </div>
      <div class="bg-slate-900/40 backdrop-blur-sm border border-slate-800/50 rounded-xl overflow-hidden shadow-sm">
        {% if recent_audits %}
        <table class="w-full text-sm">
          <thead class="bg-slate-800/30 text-slate-400 text-xs uppercase tracking-wider font-semibold">
            <tr>
              <th class="px-5 py-3.5 text-left">Target</th>
              <th class="px-5 py-3.5 text-left">Profile</th>
              <th class="px-5 py-3.5 text-left">Result</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-800/50">
            {% for job in recent_audits %}
            <tr class="hover:bg-slate-800/30 transition-colors">
              <td class="px-5 py-4">
                <a href="/auditor/results/{{ job.id }}" class="text-slate-200 font-medium hover:text-brand-400 transition">{{ job.target_host }}</a>
              </td>
              <td class="px-5 py-4 text-slate-400 text-xs">{{ job.profile_name }}</td>
              <td class="px-5 py-4">
                {% if job.status.value == 'complete' %}
                  <div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-900/30 border border-emerald-800/50 text-xs font-medium text-emerald-400">
                    <div class="w-1.5 h-1.5 rounded-full bg-emerald-400 shadow-[0_0_5px_rgba(52,211,153,0.8)]"></div>
                    Passed
                  </div>
                {% elif job.status.value == 'failed' %}
                  <div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-rose-900/30 border border-rose-800/50 text-xs font-medium text-rose-400">
                    <div class="w-1.5 h-1.5 rounded-full bg-rose-500 shadow-[0_0_5px_rgba(244,63,94,0.8)]"></div>
                    Failed
                  </div>
                {% else %}
                  <span class="text-xs font-medium text-slate-500">{{ job.status.value | title }}</span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        <div class="p-8 text-center bg-slate-800/10">
          <p class="text-slate-500 text-sm">No live audits recorded.</p>
        </div>
        {% endif %}
      </div>
    </section>
  </div>
</div>
{% endblock %}