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

{% block title %}Secrets{% endblock %}
{% block page_title %}Secrets{% endblock %}
{% block page_subtitle %}Encrypted vault with zero-trust access (Layer 11){% endblock %}
{% block layer_indicator %}L11 Secrets{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <div>
    <span class="text-sm text-slate-500">{{ secrets|length }} secret{{ secrets|length|pluralize }} in your vault</span>
  </div>
  <button onclick="openModal('create-secret-modal')" class="px-4 py-2 bg-brand-600 text-white text-sm font-medium rounded-lg hover:bg-brand-700 transition-colors">
    + New Secret
  </button>
</div>

{# Security warning #}
<div class="mb-6 flex items-start gap-3 p-4 rounded-lg bg-amber-50 border border-amber-200">
  <span class="text-amber-600 text-lg">&#9888;</span>
  <div>
    <p class="text-sm font-medium text-amber-800">Values are encrypted and never displayed</p>
    <p class="text-xs text-amber-600 mt-0.5">Secret values are encrypted at rest and referenced by name only. They never appear in audit trails, snapshots, or connector traffic (Invariant 10).</p>
  </div>
</div>

{% if secrets %}
<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">Name</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Classification</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Owner</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Versions</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Status</th>
        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Created</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-200">
      {% for secret in secrets %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3">
          <div class="flex items-center gap-2">
            <span class="text-slate-400">&#128274;</span>
            <span class="text-sm font-medium text-slate-900">{{ secret.name }}</span>
          </div>
        </td>
        <td class="px-4 py-3">
          {% if secret.classification == "critical" %}
          <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">Critical</span>
          {% elif secret.classification == "sensitive" %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-50 text-orange-700 ring-1 ring-orange-600/20">Sensitive</span>
          {% elif secret.classification == "standard" %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-50 text-yellow-700 ring-1 ring-yellow-600/20">Standard</span>
          {% else %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-slate-50 text-slate-600 ring-1 ring-slate-500/20">{{ secret.classification }}</span>
          {% endif %}
        </td>
        <td class="px-4 py-3 text-xs font-mono text-slate-400">{{ secret.owner_id|truncate_id }}</td>
        <td class="px-4 py-3 text-sm text-slate-600">{{ secret.version_count }}</td>
        <td class="px-4 py-3">{% include "components/_state_badge.html" with state=secret.lifecycle %}</td>
        <td class="px-4 py-3 text-xs text-slate-400">{{ secret.created_at|format_dt }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
{% include "components/_empty_state.html" with title="No secrets stored" message="Your encrypted vault is empty. Store API keys, tokens, and credentials securely." icon="&#128274;" %}
{% endif %}

{# Create secret modal #}
<div id="create-secret-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('create-secret-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 Secret</h3>
        <button onclick="closeModal('create-secret-modal')" class="text-slate-400 hover:text-slate-600">&times;</button>
      </div>
      <form method="post" action="{% url 'secrets_create' %}">
        {% csrf_token %}
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Name</label>
            <input type="text" name="name" required placeholder="e.g. AWS_SECRET_KEY" class="w-full rounded-lg border-slate-300 text-sm focus:border-brand-500 focus:ring-brand-500">
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Value</label>
            <input type="password" name="value" required placeholder="Enter secret value" class="w-full rounded-lg border-slate-300 text-sm focus:border-brand-500 focus:ring-brand-500">
            <p class="text-xs text-slate-400 mt-1">This value will be encrypted and never displayed again.</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Classification</label>
            <select name="classification" class="w-full rounded-lg border-slate-300 text-sm focus:border-brand-500 focus:ring-brand-500">
              {% for cls in classifications %}
              <option value="{{ cls }}">{{ cls }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="mt-6 flex justify-end gap-3">
          <button type="button" onclick="closeModal('create-secret-modal')" class="px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-900">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">Store Secret</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}