{% extends "console/base_console.html" %}

{% block content %}
<div class="space-y-6">
  <h2 class="text-2xl font-bold">App Map</h2>
  <p class="text-sm opacity-70">Explore your DSL entities, surfaces, and integrations.</p>

  {# Tabs #}
  <div class="space-y-4">
    <div role="tablist" class="tabs tabs-boxed" id="app-map-tabs">
      <a role="tab" class="tab tab-active" data-tab="entities"
         onclick="switchTab(this, 'entities')">Entities</a>
      <a role="tab" class="tab" data-tab="surfaces"
         onclick="switchTab(this, 'surfaces')">Surfaces</a>
      <a role="tab" class="tab" data-tab="integrations"
         onclick="switchTab(this, 'integrations')">Integrations</a>
    </div>

    {# Entity tab #}
    <div id="entities-panel" class="tab-panel"
         hx-get="/_console/partials/entities"
         hx-trigger="load"
         hx-swap="innerHTML">
      <div class="flex items-center justify-center p-8">
        <span class="loading loading-spinner loading-md"></span>
      </div>
    </div>

    {# Surfaces tab #}
    <div id="surfaces-panel" class="tab-panel" style="display:none;"
         hx-get="/_console/partials/surfaces"
         hx-trigger="intersect once"
         hx-swap="innerHTML">
      <div class="flex items-center justify-center p-8">
        <span class="loading loading-spinner loading-md"></span>
      </div>
    </div>

    {# Integrations tab #}
    <div id="integrations-panel" class="tab-panel" style="display:none;"
         hx-get="/_console/partials/integrations"
         hx-trigger="intersect once"
         hx-swap="innerHTML">
      <div class="flex items-center justify-center p-8">
        <span class="loading loading-spinner loading-md"></span>
      </div>
    </div>
  </div>
</div>

<script>
function switchTab(el, name) {
  document.querySelectorAll('#app-map-tabs .tab').forEach(t => t.classList.remove('tab-active'));
  el.classList.add('tab-active');
  document.querySelectorAll('.tab-panel').forEach(p => p.style.display = 'none');
  document.getElementById(name + '-panel').style.display = '';
}
</script>
{% endblock %}