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

{% block title %}{{ env.name|default:"Environment" }}{% endblock %}
{% block page_title %}{{ env.name|default:"Environment Detail" }}{% endblock %}
{% block page_subtitle %}Ephemeral workspace{% endblock %}
{% block layer_indicator %}L8 Environments{% endblock %}

{% block content %}
{# Environment 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">{{ env.name }}</h3>
        {% include "components/_state_badge.html" with state=env.state %}
        {% if is_owner %}
        <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">Owner</span>
        {% endif %}
      </div>
      <p class="text-sm text-slate-500 mt-1">
        ID: <span class="font-mono">{{ env.id|truncate_id:16 }}</span>
        &middot; Owner: <span class="font-mono">{{ env.owner_id|truncate_id }}</span>
        &middot; Created: {{ env.created_at|format_dt }}
      </p>
    </div>
  </div>
  {% if env.description %}
  <p class="text-sm text-slate-600 mt-3">{{ env.description }}</p>
  {% endif %}
</div>

{# Action buttons (owner only) #}
{% if is_owner %}
<div class="flex gap-3 mb-6">
  {% if env.state == "active" %}
  <form method="post" action="{% url 'environments_action' env.id %}">
    {% csrf_token %}
    <input type="hidden" name="action" value="complete">
    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors">
      Complete
    </button>
  </form>
  <form method="post" action="{% url 'environments_action' env.id %}">
    {% csrf_token %}
    <input type="hidden" name="action" value="suspend">
    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-yellow-600 rounded-lg hover:bg-yellow-700 transition-colors">
      Suspend
    </button>
  </form>
  <form method="post" action="{% url 'environments_action' env.id %}">
    {% csrf_token %}
    <input type="hidden" name="action" value="discard">
    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors">
      Discard
    </button>
  </form>
  {% elif env.state == "suspended" %}
  <form method="post" action="{% url 'environments_action' env.id %}">
    {% csrf_token %}
    <input type="hidden" name="action" value="resume">
    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
      Resume
    </button>
  </form>
  <form method="post" action="{% url 'environments_action' env.id %}">
    {% csrf_token %}
    <input type="hidden" name="action" value="discard">
    <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors">
      Discard
    </button>
  </form>
  {% endif %}
</div>
{% endif %}

{# Snapshots #}
<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">Snapshots</h4>
  </div>
  {% if snapshots %}
  <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">Snapshot ID</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Label</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Created 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 snap in snapshots %}
      <tr>
        <td class="px-4 py-3 text-xs font-mono text-slate-500">{{ snap.id|truncate_id:12 }}</td>
        <td class="px-4 py-3 text-sm text-slate-700">{{ snap.name|default:"—" }}</td>
        <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ snap.created_by|truncate_id }}</td>
        <td class="px-4 py-3 text-xs text-slate-400">{{ snap.created_at|format_dt }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="px-5 py-8">
    {% include "components/_empty_state.html" with title="No snapshots" message="This environment has no snapshots yet." %}
  </div>
  {% endif %}
</div>
{% endblock %}