{% 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">Add Secret</h1>
        <p class="text-sm text-gray-500 mt-1">Add a new encrypted secret for {{ 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-blue-50/80 backdrop-blur-sm border border-blue-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-blue-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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
          </svg>
        </div>
        <div>
          <h3 class="text-sm font-semibold text-blue-800 mb-1">Secure Encryption</h3>
          <p class="text-sm text-blue-700">
            This secret will be encrypted with AES-256-GCM before storage. Your agent can access this value using the secret key like <code class="bg-blue-100 px-1 rounded text-xs">x_api_key</code> in its tasks.
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Add 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">Secret Details</h2>
      <p class="text-sm text-gray-500 mt-1">Enter the key and value for your new secret</p>
    </div>
    
    <div class="p-6">
      <form method="post" autocomplete="off">
        {% csrf_token %}
        
        <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 class="hs-tooltip inline-block">
              <svg class="hs-tooltip-toggle ms-1 inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
              </svg>
              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible w-60 text-center z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm" role="tooltip">
                {{ form.domain.help_text }}
              </span>
            </div>
          </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 class="hs-tooltip inline-block">
              <svg class="hs-tooltip-toggle ms-1 inline-block size-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
              </svg>
              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible w-40 text-center z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm" role="tooltip">
                {{ form.name.help_text }}
              </span>
            </div>
          </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>

          <!-- 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="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
            </svg>
            Add 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 %}