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

{% block title %}Deployments{% endblock %}
{% block page_title %}Deployments{% endblock %}
{% block page_subtitle %}Gate-checked graduation to external targets (Layer 10){% endblock %}
{% block layer_indicator %}L10 Deployments{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <div>
    <span class="text-sm text-slate-500">{{ deployments|length }} deployment{{ deployments|length|pluralize }}</span>
  </div>
  {% if targets %}
  <button onclick="openModal('deploy-modal')" class="px-4 py-2 bg-brand-600 text-white text-sm font-medium rounded-lg hover:bg-brand-700 transition-colors">
    + New Deployment
  </button>
  {% endif %}
</div>

{% if deployments %}
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
  <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">ID</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Target</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">State</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Deployed By</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Created At</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200">
      {% for dep in deployments %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3">
          <a href="{% url 'deployments_detail' dep.id %}" class="text-sm font-mono text-brand-600 hover:text-brand-800">
            {{ dep.id|truncate_id:12 }}
          </a>
        </td>
        <td class="px-4 py-3 text-sm text-slate-700">{{ dep.target_name|default:"Unknown" }}</td>
        <td class="px-4 py-3">
          {% include "components/_state_badge.html" with state=dep.state %}
        </td>
        <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ dep.deployed_by|truncate_id }}</td>
        <td class="px-4 py-3 text-xs text-slate-400">{{ dep.deployed_at|format_dt }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
{% include "components/_empty_state.html" with title="No deployments" message="No deployments have been created yet." %}
{% endif %}

{# New Deployment modal #}
<div id="deploy-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
  <div class="flex min-h-full items-center justify-center p-4">
    <div class="fixed inset-0 bg-slate-900/50" onclick="closeModal('deploy-modal')"></div>
    <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-lg p-6 z-10">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-slate-900">New Deployment</h3>
        <button onclick="closeModal('deploy-modal')" class="text-slate-400 hover:text-slate-600">&times;</button>
      </div>
      <form method="post" action="{% url 'deployments_create' %}">
        {% csrf_token %}
        <div class="space-y-4">
          <div>
            <label for="deploy-target" class="block text-sm font-medium text-slate-700 mb-1">Target</label>
            <select id="deploy-target" name="target_id" required
              class="w-full rounded-lg border-slate-300 text-sm focus:border-brand-500 focus:ring-brand-500">
              <option value="">Select a target...</option>
              {% for target in targets %}
              <option value="{{ target.id }}">{{ target.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div>
            <label for="deploy-object" class="block text-sm font-medium text-slate-700 mb-1">Object ID <span class="text-slate-400">(optional)</span></label>
            <input type="text" id="deploy-object" name="object_id"
              class="w-full rounded-lg border-slate-300 text-sm focus:border-brand-500 focus:ring-brand-500"
              placeholder="Object ID to deploy">
          </div>
        </div>
        <div class="flex justify-end gap-3 mt-6">
          <button type="button" onclick="closeModal('deploy-modal')" class="px-4 py-2 text-sm font-medium text-slate-700 bg-slate-100 rounded-lg hover:bg-slate-200 transition-colors">
            Cancel
          </button>
          <button type="submit" class="px-4 py-2 bg-brand-600 text-white text-sm font-medium rounded-lg hover:bg-brand-700 transition-colors">
            Deploy
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}