{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Deployment {{ deploy.id|truncate_id:12 }}{% endblock %}
{% block page_title %}Deployment Detail{% endblock %}
{% block page_subtitle %}Gate-checked graduation{% endblock %}
{% block layer_indicator %}L10 Deployments{% endblock %}

{% block content %}
{# Deployment header #}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5 mb-6">
  <div class="flex items-center justify-between">
    <div>
      <div class="flex items-center gap-3">
        <h3 class="text-lg font-bold text-slate-900">Deployment <span class="font-mono">{{ deploy.id|truncate_id:12 }}</span></h3>
        {% include "components/_state_badge.html" with state=deploy.state %}
      </div>
      <p class="text-sm text-slate-500 mt-1">
        Target: <span class="font-medium text-slate-700">{{ deploy.target_name|default:"Unknown" }}</span>
        &middot; Deployed by: <span class="font-mono">{{ deploy.deployed_by|truncate_id }}</span>
        &middot; Created: {{ deploy.deployed_at|format_dt }}
      </p>
    </div>
  </div>
  {% if deploy.object_id %}
  <div class="mt-3 text-sm text-slate-600">
    Object: <span class="font-mono text-slate-500">{{ deploy.object_id|truncate_id:16 }}</span>
  </div>
  {% endif %}
</div>

{# Gate checks #}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
  <div class="px-5 py-4 border-b border-slate-200">
    <h4 class="text-sm font-semibold text-slate-900">Gate Checks</h4>
  </div>
  {% if gates %}
  <table class="min-w-full divide-y divide-slate-200">
    <thead class="bg-slate-50">
      <tr>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Gate Type</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Result</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Details</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Checked At</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200">
      {% for gate in gates %}
      <tr>
        <td class="px-4 py-3 text-sm font-medium text-slate-700">{{ gate.gate_type|default:"—" }}</td>
        <td class="px-4 py-3">
          {% if gate.passed %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700 ring-1 ring-green-600/20">Passed</span>
          {% else %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-50 text-red-700 ring-1 ring-red-600/20">Failed</span>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-sm text-slate-600">{{ gate.details_json|default:"—" }}</td>
        <td class="px-4 py-3 text-xs text-slate-400">{{ gate.checked_at|format_dt }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="px-5 py-8">
    {% include "components/_empty_state.html" with title="No gate checks" message="No gates have been evaluated for this deployment yet." %}
  </div>
  {% endif %}
</div>
{% endblock %}