{% extends "console_page.html" %}

{% block console_content %}
<div class="space-y-6 pb-6">
  <!-- Success Message -->
  <div class="bg-white/80 backdrop-blur-sm shadow-xl rounded-xl overflow-hidden">
    <div class="p-8 text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
        <svg class="h-6 w-6 text-green-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="M5 13l4 4L19 7"/>
        </svg>
      </div>
      <h1 class="text-2xl font-semibold text-gray-800 mb-2">Secrets Provided Successfully!</h1>
      <p class="text-gray-600 mb-6">
        Thank you for providing the secret values for <span class="font-medium">{{ agent.name }}</span>. 
        Your secrets have been securely encrypted and stored with AES-256-GCM encryption.
      </p>
      
      <!-- Success Details -->
      <div class="bg-green-50/80 backdrop-blur-sm border border-green-200/60 rounded-xl p-4 mb-6">
        <div class="flex">
          <div class="flex-shrink-0">
            <svg class="w-5 h-5 text-green-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="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 class="ml-3">
            <h3 class="text-sm font-medium text-green-800">Your secrets are now available</h3>
            <div class="mt-1 text-sm text-green-700">
              <p>
                Your agent can now access these secrets using placeholder names in its tasks. 
                The agent will only see placeholder names like <code class="bg-green-100 px-1 rounded text-xs">x_api_key</code> 
                or <code class="bg-green-100 px-1 rounded text-xs">x_password</code>, never the actual values.
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="flex flex-col sm:flex-row gap-3 justify-center">
        <a href="{% url 'agent_detail' agent.id %}" class="inline-flex items-center px-6 py-3 border border-transparent text-base 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 transition-colors">
          <svg class="w-5 h-5 mr-2" 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 5l7 7-7 7"/>
          </svg>
          Go to Agent
        </a>
        <a href="{% url 'agent_secrets' agent.id %}" class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
          <svg class="w-5 h-5 mr-2" 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>
          Manage Secrets
        </a>
      </div>

      <!-- Close Window Option -->
      <div class="mt-6 pt-6 border-t border-gray-200">
        <p class="text-sm text-gray-500">
          You can safely close this window, or use the buttons above to continue managing your agent.
        </p>
      </div>
    </div>
  </div>

  <!-- What Happens Next -->
  <div class="bg-blue-50/80 backdrop-blur-sm border border-blue-200/60 shadow-xl rounded-xl overflow-hidden">
    <div class="p-6">
      <h2 class="text-lg font-semibold text-gray-800 mb-3">What happens next?</h2>
      <div class="space-y-3">
        <div class="flex">
          <div class="flex-shrink-0">
            <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-100 text-blue-600 text-xs font-medium">1</div>
          </div>
          <div class="ml-3">
            <p class="text-sm text-gray-700">Your secrets are securely encrypted and stored</p>
          </div>
        </div>
        <div class="flex">
          <div class="flex-shrink-0">
            <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-100 text-blue-600 text-xs font-medium">2</div>
          </div>
          <div class="ml-3">
            <p class="text-sm text-gray-700">Your agent can now use these secrets in its tasks</p>
          </div>
        </div>
        <div class="flex">
          <div class="flex-shrink-0">
            <div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-100 text-blue-600 text-xs font-medium">3</div>
          </div>
          <div class="ml-3">
            <p class="text-sm text-gray-700">The agent will only see placeholder names, keeping your values secure</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}