{% extends "settings/layout.html" %}

{% block settings_content %}
<div>
  <h2 class="ui-section-title text-xl">System Verification</h2>
  <p class="ui-section-subtitle">Validate that Governor can reach its external dependencies.</p>

  <!-- Run Verification Button -->
  <div class="mt-6">
    <button
      data-on:click="@post('/settings/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="/settings/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 %}
</div>
{% endblock %}