{# Top-bar project switcher (spec 161). Driven by the ``project_nav_fn()``
   Jinja global so it is fresh on every render and independent of whatever
   ``config`` a given route passes. Pure HTML <details> dropdown - no JS
   dependency. Switch / add / delete post to /projects/*. #}
{% set _nav = project_nav_fn() %}
{% if _nav %}
<details class="relative inline-block group" id="project-switcher">
  <summary class="list-none cursor-pointer inline-flex items-center gap-1.5 select-none">
    <span class="uppercase tracking-wider text-slate-400 dark:text-slate-500">GCP Project</span>
    <code class="font-mono text-slate-700 dark:text-slate-200 ml-1">{{ _nav.active.gcp_project_id }}</code>
    <svg class="w-3.5 h-3.5 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
  </summary>

  <div class="absolute left-0 z-50 mt-2 w-80 origin-top-left border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-lg rounded-md p-2 text-slate-900 dark:text-slate-100">

    <p class="px-2 pt-1 pb-2 text-sm uppercase tracking-wider text-slate-400 dark:text-slate-500">Projects</p>

    {# Registered projects - switch (whole row) + delete (trailing ✕) #}
    <ul class="space-y-0.5 max-h-64 overflow-y-auto">
      {% for p in _nav.projects %}
      <li class="flex items-center gap-1">
        <form method="post" action="/projects/switch" class="flex-1 min-w-0">
          <input type="hidden" name="gcp_project_id" value="{{ p.gcp_project_id }}">
          <input type="hidden" name="bigquery_region" value="{{ p.bigquery_region }}">
          <button type="submit"
                  class="w-full text-left px-2 py-1.5 rounded flex items-center gap-2 {{ 'bg-brand-50 dark:bg-brand-700/30 text-brand-600 dark:text-brand-200' if p.is_active else 'hover:bg-slate-100 dark:hover:bg-slate-800' }}">
            <span class="w-1.5 h-1.5 rounded-full shrink-0 {{ 'bg-brand-500 dark:bg-brand-400' if p.is_active else 'bg-transparent' }}"></span>
            <span class="min-w-0">
              <span class="block truncate font-mono text-sm">{{ p.gcp_project_id }}</span>
              <span class="block text-sm text-slate-400 dark:text-slate-500">{{ p.bigquery_region }}</span>
            </span>
          </button>
        </form>
        {% if _nav.projects | length > 1 %}
        <form method="post" action="/projects/delete"
              onsubmit="return confirm('Delete {{ p.gcp_project_id }} ({{ p.bigquery_region }}) and ALL its scanned data? This cannot be undone.');">
          <input type="hidden" name="gcp_project_id" value="{{ p.gcp_project_id }}">
          <input type="hidden" name="bigquery_region" value="{{ p.bigquery_region }}">
          <button type="submit" title="Delete project + its data"
                  class="px-1.5 py-1.5 text-slate-300 dark:text-slate-600 hover:text-rose-500 dark:hover:text-rose-400 transition-colors" aria-label="Delete project">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>
          </button>
        </form>
        {% endif %}
      </li>
      {% endfor %}
    </ul>

    {# Add a new project #}
    <div class="mt-2 pt-2 border-t border-slate-200 dark:border-slate-800">
      <p class="px-2 pb-1.5 text-sm uppercase tracking-wider text-slate-400 dark:text-slate-500">Add project</p>
      <form method="post" action="/projects/add" class="px-2 space-y-1.5">
        <input type="text" name="gcp_project_id" placeholder="project-id" required
               class="w-full px-2 py-1.5 text-sm font-mono rounded bg-white border border-slate-300 dark:bg-slate-950 dark:border-slate-700 text-slate-900 dark:text-slate-100">
        <input type="text" name="bigquery_region" placeholder="region (e.g. us, eu, europe-west1)" required
               class="w-full px-2 py-1.5 text-sm font-mono rounded bg-white border border-slate-300 dark:bg-slate-950 dark:border-slate-700 text-slate-900 dark:text-slate-100">
        <input type="text" name="billing_project_id" placeholder="billing project (optional)"
               class="w-full px-2 py-1.5 text-sm font-mono rounded bg-white border border-slate-300 dark:bg-slate-950 dark:border-slate-700 text-slate-900 dark:text-slate-100">
        <button type="submit"
                class="w-full px-2 py-1.5 text-sm font-semibold rounded bg-brand-500 hover:bg-brand-600 dark:bg-brand-400 dark:hover:bg-brand-300 text-white dark:text-slate-900 transition-colors">
          Add &amp; switch
        </button>
      </form>
    </div>
  </div>
</details>
{% else %}
{# First-run / no config: fall back to the static label the strip used before. #}
<span class="uppercase tracking-wider text-slate-400 dark:text-slate-500">GCP Project</span>
<code class="font-mono text-slate-700 dark:text-slate-200 ml-1">{{ config.gcp_project_id if config is defined and config else "-" }}</code>
{% endif %}