{% extends "layout.html" %}
{% block title %}Files{% endblock %}
{% block body %}
  {%- set current_prefix = request.args.get('prefix', '') -%}
  {%- set current_search = current_search if current_search is defined else request.args.get('search', '') -%}
  <header class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
    <div class="mx-auto flex max-w-7xl flex-col gap-4 px-6 py-4 md:flex-row md:items-center md:justify-between">
      <a class="flex min-w-0 items-center gap-3 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-900/10 dark:focus:ring-gray-100/20"
         href="{{ url_for('flask_s3_viewer.files') }}"
         hx-get="{{ url_for('flask_s3_viewer.files') }}"
         hx-target="#file-list"
        hx-push-url="true"
        aria-label="Go to root">
        {% if FS3V_LOGO_URL %}
          <img src="{{ FS3V_LOGO_URL }}" alt="" class="h-11 max-w-24 rounded-lg object-contain flex-shrink-0">
        {% else %}
          <div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                 stroke-width="1.8" stroke="currentColor" class="h-6 w-6">
              <path stroke-linecap="round" stroke-linejoin="round"
                    d="M3.75 6.75A2.25 2.25 0 0 1 6 4.5h3.879c.597 0 1.169.237 1.591.659l1.371 1.371c.422.422.994.659 1.591.659H18a2.25 2.25 0 0 1 2.25 2.25v7.811A2.25 2.25 0 0 1 18 19.5H6a2.25 2.25 0 0 1-2.25-2.25V6.75Z" />
              <path stroke-linecap="round" stroke-linejoin="round"
                    d="M8.25 12h7.5M8.25 15h4.5" />
            </svg>
          </div>
        {% endif %}
        <h1 class="min-w-fit truncate text-base font-semibold text-gray-900 dark:text-gray-100">{{ FS3V_TITLE | default("Flask S3 Viewer") }}</h1>
        </a>
      <div class="flex flex-wrap items-center gap-2">
        {% if FSV_VISIBLE_NAMESPACES|length > 1 %}
        {%- set current_bucket = (FSV_VISIBLE_NAMESPACES | selectattr('namespace', 'equalto', FSV_CURRENT_NAMESPACE) | list | first) -%}
        <div class="relative">
          <button type="button"
                  class="flex h-10 items-center gap-2 rounded-md border border-gray-200 bg-white px-3 text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900/10"
                  aria-label="Open bucket switcher"
                  aria-haspopup="menu"
                  onclick="(function(btn){var menu=document.getElementById('fsv-bucket-menu');if(!menu)return;var hidden=menu.classList.toggle('hidden');btn.setAttribute('aria-expanded',(!hidden).toString());})(this);">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                 stroke-width="1.7" stroke="currentColor" class="h-4 w-4 text-gray-500">
              <path stroke-linecap="round" stroke-linejoin="round"
                    d="M20.25 7.5 12 12.75 3.75 7.5M20.25 7.5 12 2.25 3.75 7.5M20.25 7.5v9L12 21.75m0-9v9m0-9-8.25-5.25m0 0v9L12 21.75" />
            </svg>
            <span class="max-w-40 truncate">{{ current_bucket.title if current_bucket else FSV_CURRENT_NAMESPACE }}</span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                 stroke-width="1.8" stroke="currentColor" class="h-3.5 w-3.5 text-gray-500">
              <path stroke-linecap="round" stroke-linejoin="round" d="m6 9 6 6 6-6" />
            </svg>
          </button>
          <div id="fsv-bucket-menu"
               role="menu"
               class="hidden absolute right-0 top-full z-40 mt-2 w-64 origin-top-right overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg">
            {% for bucket in FSV_VISIBLE_NAMESPACES %}
              <a href="{{ url_for('flask_s3_viewer.files', BUCKET_NAMESPACE=bucket.namespace) }}"
                 role="menuitem"
                 class="flex items-center justify-between gap-3 px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50">
                <span class="min-w-0 truncate">{{ bucket.title }}</span>
                {% if bucket.namespace == FSV_CURRENT_NAMESPACE %}
                  <span class="text-xs text-gray-400">Current</span>
                {% endif %}
              </a>
            {% endfor %}
          </div>
        </div>
        {% endif %}
        {% if FSV_AUTH_ENABLED and FSV_USER_EMAIL %}
        <div class="relative">
          <button type="button"
                  class="flex h-10 items-center gap-2 rounded-md border border-gray-200 bg-white px-2.5 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900/10"
                  aria-label="Open account menu"
                  aria-haspopup="menu"
                  onclick="(function(btn){var menu=document.getElementById('fsv-account-menu');if(!menu)return;var open=menu.classList.toggle('hidden');btn.setAttribute('aria-expanded',(!open).toString());})(this);">
            {% if FSV_USER_AVATAR %}
            <div class="relative h-7 w-7">
              <img src="{{ FSV_USER_AVATAR }}"
                   alt=""
                   class="h-7 w-7 rounded-md object-cover"
                   referrerpolicy="no-referrer"
                   onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
              <div class="absolute inset-0 hidden items-center justify-center rounded-md bg-gray-100 text-xs font-semibold text-gray-700"
                   aria-hidden="true">
                {{ FSV_USER_EMAIL[:1] | upper }}
              </div>
            </div>
            {% else %}
            <span class="flex h-7 w-7 items-center justify-center rounded-md bg-gray-100 text-xs font-semibold text-gray-700"
                  aria-hidden="true">
              {{ FSV_USER_EMAIL[:1] | upper }}
            </span>
            {% endif %}
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                 stroke-width="1.8" stroke="currentColor" class="h-3.5 w-3.5 text-gray-500">
              <path stroke-linecap="round" stroke-linejoin="round" d="m6 9 6 6 6-6" />
            </svg>
          </button>
          <div id="fsv-account-menu"
               role="menu"
               class="hidden absolute right-0 top-full z-40 mt-2 w-64 origin-top-right overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg">
            <div class="border-b border-gray-100 px-4 py-3">
              <p class="truncate text-sm font-medium text-gray-900">{{ FSV_USER_EMAIL }}</p>
            </div>
            <a href="{{ url_for('flask_s3_viewer_auth.logout', next=request.url) }}"
               role="menuitem"
               class="flex items-center gap-2 px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                   stroke-width="1.6" stroke="currentColor" class="h-4 w-4 text-gray-500">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M12 9l-3 3m0 0 3 3m-3-3h12.75" />
              </svg>
              Log out
            </a>
          </div>
        </div>
        {% endif %}
      </div>
    </div>
  </header>
  <main class="mx-auto max-w-7xl px-6 pt-3 pb-6 space-y-6">
    {% include '_upload_form.html' %}
    <div id="file-list">
      {% include '_file_list.html' %}
    </div>
  </main>
{% endblock %}