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

{% block settings_content %}
<div>
  <div class="flex items-center gap-3">
    <a href="/settings/verification" class="ui-link">&larr; Verification</a>
  </div>
  <h2 class="ui-section-title mt-4 text-xl">Verification Run</h2>

  <!-- 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>
</div>
{% endblock %}