{% extends "base.html" %}

{% block title %}Integrations — {{ app_name }}{% endblock %}

{% block breadcrumbs %}
<div class="flex items-center text-sm">
  <span class="text-slate-300 font-semibold">Integrations</span>
</div>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto flex gap-8">
  <!-- Sidebar List of Providers -->
  <div class="w-1/3 space-y-4">
    <div>
      <h1 class="text-2xl font-bold text-white tracking-tight">Integrations</h1>
      <p class="text-slate-400 mt-1 text-sm">Select a provider to configure credentials and default settings.</p>
    </div>
    
    <div class="space-y-2 mt-6">
      <h2 class="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-3 px-1">Loaded Providers</h2>
      {% for p in providers %}
      <!-- HTMX click to load form -->
      <button 
        hx-get="/integrations/{{ p }}/form" 
        hx-target="#integration-form-pane"
        hx-swap="innerHTML"
        class="w-full text-left bg-slate-900/60 backdrop-blur-md border border-slate-800/80 rounded-xl p-4 flex items-center justify-between group hover:border-brand-500/50 hover:bg-slate-800/60 transition-all focus:outline-none focus:ring-2 focus:ring-brand-500/30"
      >
        <div class="flex items-center gap-3">
          <!-- Provider Icon logic block -->
          <div class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center shadow-inner border border-slate-700/50 group-hover:scale-105 transition-transform">
            <span class="text-xs font-bold text-slate-300 uppercase tracking-wider">{{ p[:3] }}</span>
          </div>
          <div>
            <div class="text-sm font-semibold text-slate-200 group-hover:text-brand-400 transition-colors capitalize">{{ p }}</div>
            <div class="text-[10px] text-slate-500 uppercase tracking-wider font-mono">Configured</div>
          </div>
        </div>
        <div class="text-slate-600 group-hover:text-brand-400">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </button>
      {% else %}
      <div class="p-6 text-center border border-dashed border-slate-700/50 rounded-xl bg-slate-900/20">
        <p class="text-slate-500 text-sm">No providers registered.</p>
        <p class="text-xs text-slate-600 mt-1">Install a plugin below.</p>
      </div>
      {% endfor %}
      
      <!-- Dynamically load available providers -->
      <div hx-get="/api/plugins/available" hx-trigger="load">
        <div class="text-center py-4 text-xs text-slate-500 animate-pulse">Checking community registry...</div>
      </div>
    </div>
  </div>

  <!-- Form Configuration Pane -->
  <div class="w-2/3">
    <div id="integration-form-pane" class="bg-slate-900/40 backdrop-blur-md border border-slate-800/60 rounded-2xl min-h-[500px] flex items-center justify-center relative overflow-hidden">
      <!-- Empty State -->
      <div class="text-center p-8 active-state-hidden">
        <div class="inline-flex w-16 h-16 rounded-full bg-slate-800/50 items-center justify-center mb-4 border border-slate-700/50">
          <svg class="w-7 h-7 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        </div>
        <h3 class="text-lg font-semibold text-slate-300">Select an Integration</h3>
        <p class="text-sm text-slate-500 mt-1 max-w-sm mx-auto">Click a generic or specific cloud provider component on the left to securely configure its settings.</p>
      </div>
    </div>
  </div>
</div>

<style>
  /* HTMX loading states */
  .htmx-request#integration-form-pane {
    opacity: 0.5;
    pointer-events: none;
  }
</style>
<script>
  $(document).ready(function() {
      htmx.process(document.body);
  });
</script>
{% endblock %}