{% 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">Secrets Requested</h1>
        <p class="text-sm text-gray-500 mt-1">Your agent <span class="font-medium">{{ agent.name }}</span> has requested the following secrets</p>
        <a href="{% url 'agent_detail' 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 Agent
        </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">
            All secrets are encrypted with AES-256-GCM before storage. These values will be securely stored and your agent will only see placeholder names, never the actual secret values.
          </p>
        </div>
      </div>
    </div>
  </div>

  {% if not has_requested_secrets %}
    <!-- No Requested Secrets -->
    <div class="bg-gray-50/80 backdrop-blur-sm border border-gray-200/60 shadow-xl rounded-xl overflow-hidden">
      <div class="p-8 text-center">
        <svg class="mx-auto h-12 w-12 text-gray-400" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <h2 class="mt-2 text-lg font-medium text-gray-900">No Secrets Requested</h2>
        <p class="mt-1 text-sm text-gray-500">This agent hasn't requested any secrets that need values.</p>
        <div class="mt-6">
          <a href="{% url 'agent_detail' agent.id %}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Return to Agent
          </a>
        </div>
      </div>
    </div>
  {% else %}
    <!-- Provide Secret Values 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">Provide Secret Values</h2>
        <p class="text-sm text-gray-500 mt-1">Enter the values for the secrets requested by <span class="font-medium">{{ agent.name }}</span></p>
      </div>
      
      <div class="p-6">
        <form method="post" autocomplete="off">
          {% csrf_token %}
          {% if form.non_field_errors %}
            <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
              {{ form.non_field_errors.0 }}
            </div>
          {% endif %}

          <div class="space-y-6">
            {% regroup requested_secret_rows by secret.domain_pattern as domain_groups %}
            <input type="hidden" name="action" value="save">
            {% for domain in domain_groups %}
              <div class="border border-gray-200 rounded-lg p-4">
                <h3 class="text-sm font-medium text-gray-900 mb-3">
                  <span class="inline-flex items-center gap-2">
                    <svg class="w-4 h-4 text-gray-500" 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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9"/>
                    </svg>
                    {% if domain.grouper == "__gobii_env_var__" %}
                      Environment Variables (Global Sandbox Scope)
                    {% else %}
                      Domain: {{ domain.grouper }}
                    {% endif %}
                  </span>
                </h3>
                
                <div class="space-y-4">
                  {% for row in domain.list %}
                    <div>
                      <div class="flex items-start justify-between gap-3">
                        <div class="flex-1">
                      <label for="{{ row.value_field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ row.secret.name }}
                        <span class="text-xs text-gray-500">(Key: {{ row.secret.key }})</span>
                        {% if row.secret.secret_type == "env_var" %}
                          <span class="text-xs text-indigo-600">• Type: env var</span>
                        {% else %}
                          <span class="text-xs text-gray-500">• Type: credential</span>
                        {% endif %}
                      </label>
                       {% if row.secret.description %}
                         <p class="text-xs text-gray-500 mb-2">{{ row.secret.description }}</p>
                       {% endif %}
                       <input 
                         type="password" 
                         name="{{ row.value_field.name }}" 
                         id="{{ row.value_field.id_for_label }}"
                         placeholder="Enter value for {{ row.secret.name }}"
                         class="py-2 px-3 block w-full border-gray-200 shadow-sm rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
                         autocomplete="new-password"
                       >
                       {% if row.value_field.errors %}
                         <p class="mt-1 text-xs text-red-600">{{ row.value_field.errors.0 }}</p>
                       {% endif %}
                        </div>
                        <div class="w-36 text-right">
                          {% csrf_token %}
                          <button type="submit" formmethod="post" formaction="{% url 'agent_requested_secret_remove' agent.id row.secret.id %}"
                            class="py-1.5 px-2 text-xs font-medium rounded border border-red-200 bg-red-50 text-red-700 hover:bg-red-100 transition-colors"
                            onclick="return confirm('Remove request for {{ row.secret.name }}?')">
                            Remove
                          </button>
                          <div class="mt-2 text-xs text-gray-400">Created {{ row.secret.created_at|date:"Y-m-d H:i" }}</div>
                        </div>
                      </div>
                    </div>
                  {% endfor %}
                </div>
              </div>
            {% endfor %}
          </div>

          <!-- Form Actions -->
          <div class="mt-8 space-y-4">
            <div class="w-full rounded-lg border border-blue-200 bg-blue-50/70 px-4 py-3">
              <label for="{{ make_global_field.id_for_label }}" class="flex items-start gap-3">
                <input
                  type="checkbox"
                  name="{{ make_global_field.name }}"
                  id="{{ make_global_field.id_for_label }}"
                  class="mt-0.5 rounded border-blue-300 text-blue-600 focus:ring-blue-500"
                  {% if make_global_field.value %}checked{% endif %}
                >
                <span class="min-w-0">
                  <span class="block text-sm font-medium text-blue-900">{{ make_global_label }}</span>
                  <span class="mt-1 block text-xs text-blue-700">{{ make_global_help_text }}</span>
                </span>
              </label>
              {% if make_global_field.errors %}
                <div class="mt-2 space-y-1">
                  {% for error in make_global_field.errors %}
                    <p class="text-xs text-red-600">{{ error }}</p>
                  {% endfor %}
                </div>
              {% endif %}
            </div>
            <div class="flex items-center justify-end gap-x-3">
              <a href="{% url 'agent_detail' agent.id %}" class="py-2 px-3 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 disabled:opacity-50 disabled:pointer-events-none">
                Cancel
              </a>
              <button type="submit" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
                <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 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>
                Save Secrets
              </button>
            </div>
          </div>
        </form>

        <!-- Bulk remove selected -->
        <div class="mt-6 border-t pt-6">
          <form method="post" action="{% url 'agent_requested_secrets_remove' agent.id %}">
            {% csrf_token %}
            <div class="flex items-center gap-2">
              <span class="text-sm text-gray-600">Bulk remove requests:</span>
              <div class="text-xs text-gray-500">Select below</div>
            </div>
            <div class="mt-3 grid sm:grid-cols-2 gap-3">
              {% for secret in requested_secrets %}
                <label class="inline-flex items-center gap-2 text-sm">
                  <input type="checkbox" name="secret_ids" value="{{ secret.id }}" class="rounded border-gray-300 text-red-600 focus:ring-red-500">
                  <span>
                    {{ secret.name }}
                    <span class="text-xs text-gray-400">
                      ({{ secret.key }}, {{ secret.secret_type }}{% if secret.secret_type != "env_var" %}, {{ secret.domain_pattern }}{% endif %})
                    </span>
                  </span>
                </label>
              {% endfor %}
            </div>
            <div class="mt-3 text-right">
              <button type="submit" class="py-1.5 px-3 text-xs font-medium rounded border border-red-200 bg-red-50 text-red-700 hover:bg-red-100 transition-colors"
                onclick="return confirm('Remove selected secret requests?')">
                Remove Selected
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  {% endif %}
</div>
{% endblock %}