{% extends "console_page.html" %}

{% block console_content %}
<div class="space-y-6 pb-6">
  <!-- Header -->
  <div class="bg-white/80 backdrop-blur-sm shadow-xl rounded-xl overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200/70">
      <div>
        <h1 class="text-2xl font-semibold text-gray-800">Edit Secret</h1>
        <p class="text-sm text-gray-500 mt-1">Update the value for secret "{{ secret_key }}" in {{ agent.name }}</p>
        <a href="{% url 'agent_secrets' agent.id %}" class="group flex items-center gap-2 text-sm text-blue-600 hover:text-blue-800 transition-colors mt-3">
          <svg class="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
          </svg>
          Back to Secrets
        </a>
      </div>
    </div>
  </div>

  <!-- Security Notice -->
  <div class="bg-amber-50/80 backdrop-blur-sm border border-amber-200/60 shadow-xl rounded-xl overflow-hidden">
    <div class="p-4 sm:p-6">
      <div class="flex gap-x-4">
        <div class="flex-shrink-0">
          <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/>
          </svg>
        </div>
        <div>
          <h3 class="text-sm font-semibold text-amber-800 mb-1">Updating Secret Value</h3>
          <p class="text-sm text-amber-700">
            This will replace the existing value for "{{ secret_key }}". The new value will be encrypted with AES-256-GCM before storage.
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Edit Secret Form -->
  <div class="gobii-card-base">
    <div class="px-6 py-4 border-b border-gray-200/70">
      <h2 class="text-lg font-semibold text-gray-800">Update Secret</h2>
      <p class="text-sm text-gray-500 mt-1">Edit the name, description, and value for this secret</p>
    </div>
    
    <div class="p-6">
      <form method="post" autocomplete="off">
        {% csrf_token %}
        
        {% if form.non_field_errors %}
          <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg" role="alert">
            <div class="flex">
              <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
              </div>
              <div class="ml-3">
                <p class="text-sm text-red-700">
                  {% for error in form.non_field_errors %}
                    {{ error|striptags }}
                  {% endfor %}
                </p>
              </div>
            </div>
          </div>
        {% endif %}
        
        <div class="grid sm:grid-cols-12 gap-4 sm:gap-6">
          <!-- Secret Type -->
          <div class="sm:col-span-3">
            <label for="{{ form.secret_type.id_for_label }}" class="inline-block text-sm font-medium text-gray-800 mt-2.5">
              {{ form.secret_type.label }}
            </label>
          </div>

          <div class="sm:col-span-9">
            {{ form.secret_type }}
            {% if form.secret_type.errors %}
              <div class="text-red-600 text-sm mt-1">
                {% for error in form.secret_type.errors %}{{ error }}{% endfor %}
              </div>
            {% endif %}
            <p class="mt-2 text-xs text-gray-500">{{ form.secret_type.help_text }}</p>
          </div>

          <!-- Domain Pattern -->
          <div class="sm:col-span-3" id="domain-label-row">
            <label for="{{ form.domain.id_for_label }}" class="inline-block text-sm font-medium text-gray-800 mt-2.5">
              {{ form.domain.label }}
            </label>
          </div>

          <div class="sm:col-span-9" id="domain-input-row">
            {{ form.domain }}
            {% if form.domain.errors %}
              <div class="text-red-600 text-sm mt-1">
                {% for error in form.domain.errors %}{{ error }}{% endfor %}
              </div>
            {% endif %}
            <p class="mt-2 text-xs text-gray-500">{{ form.domain.help_text }}</p>
          </div>

          <!-- Secret Name -->
          <div class="sm:col-span-3">
            <label for="{{ form.name.id_for_label }}" class="inline-block text-sm font-medium text-gray-800 mt-2.5">
              {{ form.name.label }}
            </label>
          </div>
          
          <div class="sm:col-span-9">
            {{ form.name }}
            {% if form.name.errors %}
              <div class="text-red-600 text-sm mt-1">
                {% for error in form.name.errors %}{{ error }}{% endfor %}
              </div>
            {% endif %}
            <p class="mt-2 text-xs text-gray-500">{{ form.name.help_text }}</p>
          </div>

          <!-- Description -->
          <div class="sm:col-span-3">
            <label for="{{ form.description.id_for_label }}" class="inline-block text-sm font-medium text-gray-800 mt-2.5">
              {{ form.description.label }}
            </label>
          </div>
          
          <div class="sm:col-span-9">
            {{ form.description }}
            {% if form.description.errors %}
              <div class="text-red-600 text-sm mt-1">
                {% for error in form.description.errors %}{{ error }}{% endfor %}
              </div>
            {% endif %}
            <p class="mt-2 text-xs text-gray-500">{{ form.description.help_text }}</p>
          </div>

          <!-- Generated Key (Read-only) -->
          <div class="sm:col-span-3">
            <label class="inline-block text-sm font-medium text-gray-800 mt-2.5">
              Generated Key
            </label>
          </div>
          
          <div class="sm:col-span-9">
            <div class="py-2 px-3 block w-full border-gray-200 shadow-sm rounded-lg text-sm bg-gray-50 text-gray-600 border">
              {{ secret_key }}
            </div>
            <p class="mt-2 text-xs text-gray-500">This key is auto-generated from the name and will update if you change the name</p>
          </div>

          <!-- Secret Value -->
          <div class="sm:col-span-3">
            <label for="{{ form.value.id_for_label }}" class="inline-block text-sm font-medium text-gray-800 mt-2.5">
              {{ form.value.label }}
            </label>
          </div>
          
          <div class="sm:col-span-9">
            {{ form.value }}
            {% if form.value.errors %}
              <div class="text-red-600 text-sm mt-1">
                {% for error in form.value.errors %}{{ error }}{% endfor %}
              </div>
            {% endif %}
            <p class="mt-2 text-xs text-gray-500">{{ form.value.help_text }}</p>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="mt-6 pt-4 border-t border-gray-200 flex justify-end gap-x-3">
          <a href="{% url 'agent_secrets' agent.id %}" 
             class="py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 transition-colors">
            Cancel
          </a>
          <button type="submit" 
                  class="py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Update Secret
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  (function () {
    const typeField = document.getElementById("{{ form.secret_type.id_for_label }}");
    const domainLabel = document.getElementById("domain-label-row");
    const domainInput = document.getElementById("domain-input-row");
    if (!typeField || !domainLabel || !domainInput) return;

    const toggleDomain = () => {
      const show = typeField.value !== "env_var";
      domainLabel.style.display = show ? "" : "none";
      domainInput.style.display = show ? "" : "none";
    };

    toggleDomain();
    typeField.addEventListener("change", toggleDomain);
  })();
</script>
{% endblock %}