{% extends "layout.html" %}

{% block content %}
  <section class="ui-shell">
    <div class="flex items-center gap-3">
      <a href="/admin/verification/history" class="ui-link">&larr; History</a>
    </div>
    <h1 class="ui-page-title">Verification Run</h1>

    <!-- Run metadata -->
    <div class="mt-4 flex flex-wrap gap-4 text-[14px] text-slate-500 dark:text-slate-400">
      <span>Started: {{ result.started_at.strftime('%Y-%m-%d %H:%M:%S UTC') }}</span>
      {% if result.completed_at %}
        <span>Completed: {{ result.completed_at.strftime('%Y-%m-%d %H:%M:%S UTC') }}</span>
      {% endif %}
      <span>Environment: {{ result.environment }}</span>
      <span class="ui-pill
        {% if result.overall_status.value == 'ready' %}
          ui-pill-blue border border-brand-100 dark:border-brand-500/30
        {% elif result.overall_status.value == 'not_ready' %}
          ui-pill-danger border border-red-200 dark:border-red-500/30
        {% elif result.overall_status.value == 'error' %}
          ui-pill-warning border border-amber-200 dark:border-amber-500/30
        {% else %}
          ui-pill-neutral border border-slate-200 dark:border-slate-500/30
        {% endif %}
      ">{{ result.overall_status.value.replace('_', ' ').title() }}</span>
    </div>

    <!-- Check results -->
    <div class="mt-8 space-y-4">
      {% for check in result.checks %}
        {% include "verification/_check_result.html" %}
      {% endfor %}
    </div>
  </section>
{% endblock %}