{% extends "layout.html" %}

{% block content %}
  <section class="ui-shell">
    <p class="ui-eyebrow">Admin Only</p>
    <h1 class="ui-page-title">System Verification</h1>
    <p class="ui-page-subtitle">Validate that Governor can reach its external dependencies.</p>

    <!-- Run Verification Button -->
    <div class="mt-6">
      <button
        data-on:click="@post('/admin/verification/run')"
        class="ui-btn-primary transition-colors"
      >
        Run Verification
      </button>
    </div>

    <!-- Check Result Placeholders -->
    <div class="mt-8 space-y-4">
      <div id="check-gcp_projects" class="ui-pane p-5">
        <h3 class="ui-section-title text-[16px]">GCP Projects</h3>
        <p class="ui-card-meta">Waiting for check...</p>
      </div>
      <div id="check-postgresql" class="ui-pane p-5">
        <h3 class="ui-section-title text-[16px]">PostgreSQL</h3>
        <p class="ui-card-meta">Waiting for check...</p>
      </div>
      <div id="check-github" class="ui-pane p-5">
        <h3 class="ui-section-title text-[16px]">GitHub</h3>
        <p class="ui-card-meta">Waiting for check...</p>
      </div>
    </div>

    <!-- Overall Status -->
    <div id="overall-status" class="mt-6 ui-pane p-4 text-center text-lg text-slate-400 dark:text-slate-500">
      Overall: Pending
    </div>

    <!-- History Section -->
    {% if runs is defined and runs %}
    <div class="mt-10">
      <h2 class="ui-section-title text-xl">Verification History</h2>
      <div class="mt-4 space-y-3">
        {% for run in runs %}
        <a href="/admin/verification/run/{{ run.id }}" class="block ui-pane p-4 hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
          <div class="flex items-center justify-between">
            <div>
              <span class="text-[14px] text-slate-600 dark:text-slate-300">{{ run.started_at.strftime('%Y-%m-%d %H:%M:%S UTC') }}</span>
              <span class="ml-3 text-[13px] text-slate-400 dark:text-slate-500">{{ run.environment }}</span>
            </div>
            <span class="ui-pill
              {% if run.overall_status == 'ready' %}
                ui-pill-blue border border-brand-100 dark:border-brand-500/30
              {% elif run.overall_status == 'not_ready' %}
                ui-pill-danger border border-red-200 dark:border-red-500/30
              {% elif run.overall_status == 'error' %}
                ui-pill-warning border border-amber-200 dark:border-amber-500/30
              {% elif run.overall_status == 'running' %}
                ui-pill-blue border border-blue-200 dark:border-blue-500/30
              {% else %}
                ui-pill-neutral border border-slate-200 dark:border-slate-500/30
              {% endif %}
            ">{{ run.overall_status.replace('_', ' ').title() }}</span>
          </div>
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </section>
{% endblock %}