{% set current_path = request.path %}
{% if current_path.startswith('/loras/recipes') %}
{% set current_page = 'recipes' %}
{% elif current_path.startswith('/checkpoints') %}
{% set current_page = 'checkpoints' %}
{% elif current_path.startswith('/embeddings') %}
{% set current_page = 'embeddings' %}
{% elif current_path.startswith('/other') %}
{% set current_page = 'other' %}
{% elif current_path.startswith('/workflows') %}
{% set current_page = 'workflows' %}
{% elif current_path.startswith('/statistics') %}
{% set current_page = 'statistics' %}
{% else %}
{% set current_page = 'loras' %}
{% endif %}
{# The key is resolved through a variable, like the search placeholder below:
   writing t('header.navigation.' ~ current_page) makes the i18n scanner treat
   the literal prefix as a key of its own. #}
{% set page_title_key = 'header.navigation.' ~ current_page %}
{# The filter panel lists the page's own items: recipes and workflows are not
   models, so their titles name the page's collection instead. #}
{% set filter_title_key = {'recipes': 'recipes.filter.title', 'workflows': 'workflows.filter.title'}.get(current_page, 'header.filter.title') %}
<header class="app-header">
  <div class="header-container">
    <!-- Left section: Logo + page name + Navigation -->
    <div class="header-left">
      <div class="header-branding">
        <a href="{{ rel_prefix }}loras" class="logo-link">
          <img src="{{ rel_prefix }}loras_static/images/favicon-32x32.png" alt="LoRA Manager" class="app-logo">
          <span class="app-title">{{ t('header.appTitle') }}</span>
        </a>
        <span class="page-title">{{ t(page_title_key) }}</span>
      </div>
      <nav class="main-nav">
        <a href="{{ rel_prefix }}loras" class="nav-item{% if current_path == '/loras' %} active{% endif %}" id="lorasNavItem"
          title="{{ t('header.navigation.loras') }}" aria-label="{{ t('header.navigation.loras') }}"{% if current_path == '/loras' %} aria-current="page"{% endif %}>
          <i class="fas fa-layer-group" aria-hidden="true"></i> <span>{{ t('header.navigation.loras') }}</span>
        </a>
        <a href="{{ rel_prefix }}loras/recipes" class="nav-item{% if current_path.startswith('/loras/recipes') %} active{% endif %}"
          id="recipesNavItem" title="{{ t('header.navigation.recipes') }}" aria-label="{{ t('header.navigation.recipes') }}"{% if current_path.startswith('/loras/recipes') %} aria-current="page"{% endif %}>
          <i class="fas fa-book-open" aria-hidden="true"></i> <span>{{ t('header.navigation.recipes') }}</span>
        </a>
        <a href="{{ rel_prefix }}checkpoints" class="nav-item{% if current_path.startswith('/checkpoints') %} active{% endif %}"
          id="checkpointsNavItem" title="{{ t('header.navigation.checkpoints') }}" aria-label="{{ t('header.navigation.checkpoints') }}"{% if current_path.startswith('/checkpoints') %} aria-current="page"{% endif %}>
          <i class="fas fa-check-circle" aria-hidden="true"></i> <span>{{ t('header.navigation.checkpoints') }}</span>
        </a>
        <a href="{{ rel_prefix }}embeddings" class="nav-item{% if current_path.startswith('/embeddings') %} active{% endif %}"
          id="embeddingsNavItem" title="{{ t('header.navigation.embeddings') }}" aria-label="{{ t('header.navigation.embeddings') }}"{% if current_path.startswith('/embeddings') %} aria-current="page"{% endif %}>
          <i class="fas fa-code" aria-hidden="true"></i> <span>{{ t('header.navigation.embeddings') }}</span>
        </a>
        <a href="{{ rel_prefix }}other" class="nav-item{% if current_path.startswith('/other') %} active{% endif %}{% if not settings.get('enable_other_models') %} nav-item--hidden{% endif %}"
          id="otherNavItem" title="{{ t('header.navigation.other') }}" aria-label="{{ t('header.navigation.other') }}"{% if current_path.startswith('/other') %} aria-current="page"{% endif %}>
          <i class="fas fa-shapes" aria-hidden="true"></i> <span>{{ t('header.navigation.other') }}</span>
        </a>
        <a href="{{ rel_prefix }}workflows" class="nav-item{% if current_path.startswith('/workflows') %} active{% endif %}{% if not settings.get('enable_workflows') %} nav-item--hidden{% endif %}"
          id="workflowsNavItem" title="{{ t('header.navigation.workflows') }}" aria-label="{{ t('header.navigation.workflows') }}"{% if current_path.startswith('/workflows') %} aria-current="page"{% endif %}>
          <i class="fas fa-diagram-project" aria-hidden="true"></i> <span>{{ t('header.navigation.workflows') }}</span>
        </a>
        <a href="{{ rel_prefix }}statistics" class="nav-item{% if current_path.startswith('/statistics') %} active{% endif %}"
          id="statisticsNavItem" title="{{ t('header.navigation.statistics') }}" aria-label="{{ t('header.navigation.statistics') }}"{% if current_path.startswith('/statistics') %} aria-current="page"{% endif %}>
          <i class="fas fa-chart-bar" aria-hidden="true"></i> <span>{{ t('header.navigation.statistics') }}</span>
        </a>
      </nav>
    </div>

    <!-- Center section: Search -->
    {% set search_disabled = current_page == 'statistics' %}
    {% set search_placeholder_key = 'header.search.notAvailable' if search_disabled else 'header.search.placeholder' %}
    {% set header_search_class = 'header-search disabled' if search_disabled else 'header-search' %}
    <div class="{{ header_search_class }}" id="headerSearch">
      <div class="search-container">
        <input type="text" id="searchInput" placeholder="{{ t(search_placeholder_key) }}" {% if search_disabled %}
          disabled{% endif %} />
        <i class="fas fa-search search-icon"></i>
        <span class="search-shortcut-cue" id="searchShortcutCue"><kbd>Ctrl</kbd><kbd>F</kbd></span>
        <button class="search-options-toggle" id="searchOptionsToggle" title="{{ t('header.search.options') }}" {% if
          search_disabled %} disabled aria-disabled="true" {% endif %}>
          <i class="fas fa-sliders-h"></i>
        </button>
        <button class="search-filter-toggle" id="filterButton" title="{{ t(filter_title_key) }}" {% if
          search_disabled %} disabled aria-disabled="true" {% endif %}>
          <i class="fas fa-filter"></i>
          <span class="filter-badge" id="activeFiltersCount" style="display: none">0</span>
        </button>
      </div>
    </div>

    <!-- Right section: Controls -->
    <div class="header-right">
      <div class="header-controls" id="headerControls">
        <div class="theme-toggle" role="button" tabindex="0" title="{{ t('header.theme.toggle') }}"
          aria-label="{{ t('header.theme.toggle') }}">
          <i class="fas fa-moon dark-icon"></i>
          <i class="fas fa-sun light-icon"></i>
          <i class="fas fa-adjust auto-icon"></i>
        </div>
        <div class="settings-toggle" role="button" tabindex="0" title="{{ t('common.actions.settings') }}"
          aria-label="{{ t('common.actions.settings') }}">
          <i class="fas fa-cog"></i>
        </div>
        <div class="help-toggle" id="helpToggleBtn" role="button" tabindex="0" title="{{ t('common.actions.help') }}"
          aria-label="{{ t('common.actions.help') }}">
          <i class="fas fa-question-circle"></i>
          <span class="update-badge"></span>
        </div>
        <div class="update-toggle" id="updateToggleBtn" role="button" tabindex="0"
          title="{{ t('header.actions.notifications') }}" aria-label="{{ t('header.actions.notifications') }}">
          <i class="fas fa-bell"></i>
          <span class="update-badge"></span>
        </div>
        <div class="support-toggle" id="supportToggleBtn" role="button" tabindex="0"
          title="{{ t('header.actions.support') }}" aria-label="{{ t('header.actions.support') }}">
          <i class="fas fa-heart"></i>
        </div>
      </div>
      <!-- Hamburger menu button (visible on mobile) -->
      <button class="hamburger-menu-btn" id="hamburgerMenuBtn" title="{{ t('common.actions.menu') }}">
        <i class="fas fa-bars"></i>
      </button>
      <!-- Hamburger dropdown menu -->
      <div class="hamburger-dropdown" id="hamburgerDropdown">
        <!-- Page tabs. The main nav is hidden on phone widths (<=520px), so the
             same entries are repeated here and only shown at that width. -->
        <a href="{{ rel_prefix }}loras" class="dropdown-item hamburger-nav-item{% if current_path == '/loras' %} active{% endif %}"
          data-nav-key="loras"{% if current_path == '/loras' %} aria-current="page"{% endif %}>
          <i class="fas fa-layer-group" aria-hidden="true"></i>
          <span>{{ t('header.navigation.loras') }}</span>
        </a>
        <a href="{{ rel_prefix }}loras/recipes" class="dropdown-item hamburger-nav-item{% if current_path.startswith('/loras/recipes') %} active{% endif %}"
          data-nav-key="recipes"{% if current_path.startswith('/loras/recipes') %} aria-current="page"{% endif %}>
          <i class="fas fa-book-open" aria-hidden="true"></i>
          <span>{{ t('header.navigation.recipes') }}</span>
        </a>
        <a href="{{ rel_prefix }}checkpoints" class="dropdown-item hamburger-nav-item{% if current_path.startswith('/checkpoints') %} active{% endif %}"
          data-nav-key="checkpoints"{% if current_path.startswith('/checkpoints') %} aria-current="page"{% endif %}>
          <i class="fas fa-check-circle" aria-hidden="true"></i>
          <span>{{ t('header.navigation.checkpoints') }}</span>
        </a>
        <a href="{{ rel_prefix }}embeddings" class="dropdown-item hamburger-nav-item{% if current_path.startswith('/embeddings') %} active{% endif %}"
          data-nav-key="embeddings"{% if current_path.startswith('/embeddings') %} aria-current="page"{% endif %}>
          <i class="fas fa-code" aria-hidden="true"></i>
          <span>{{ t('header.navigation.embeddings') }}</span>
        </a>
        <a href="{{ rel_prefix }}other" class="dropdown-item hamburger-nav-item{% if current_path.startswith('/other') %} active{% endif %}"
          data-nav-key="other"{% if not settings.get('enable_other_models') %} hidden{% endif %}{% if current_path.startswith('/other') %} aria-current="page"{% endif %}>
          <i class="fas fa-shapes" aria-hidden="true"></i>
          <span>{{ t('header.navigation.other') }}</span>
        </a>
        <a href="{{ rel_prefix }}workflows" class="dropdown-item hamburger-nav-item{% if current_path.startswith('/workflows') %} active{% endif %}"
          data-nav-key="workflows"{% if not settings.get('enable_workflows') %} hidden{% endif %}{% if current_path.startswith('/workflows') %} aria-current="page"{% endif %}>
          <i class="fas fa-diagram-project" aria-hidden="true"></i>
          <span>{{ t('header.navigation.workflows') }}</span>
        </a>
        <a href="{{ rel_prefix }}statistics" class="dropdown-item hamburger-nav-item{% if current_path.startswith('/statistics') %} active{% endif %}"
          data-nav-key="statistics"{% if current_path.startswith('/statistics') %} aria-current="page"{% endif %}>
          <i class="fas fa-chart-bar" aria-hidden="true"></i>
          <span>{{ t('header.navigation.statistics') }}</span>
        </a>
        <div class="dropdown-divider hamburger-nav-divider"></div>
        <div class="dropdown-item theme-toggle-item" data-action="theme">
          <i class="fas fa-moon"></i>
          <span>{{ t('header.theme.toggle') }}</span>
        </div>
        <div class="dropdown-item" data-action="settings">
          <i class="fas fa-cog"></i>
          <span>{{ t('common.actions.settings') }}</span>
        </div>
        <div class="dropdown-item" data-action="help">
          <i class="fas fa-question-circle"></i>
          <span>{{ t('common.actions.help') }}</span>
        </div>
        <div class="dropdown-item" data-action="notifications">
          <i class="fas fa-bell"></i>
          <span>{{ t('header.actions.notifications') }}</span>
        </div>
        <div class="dropdown-divider"></div>
        <div class="dropdown-item" data-action="support">
          <i class="fas fa-heart"></i>
          <span>{{ t('header.actions.support') }}</span>
        </div>
      </div>
    </div>
  </div>
</header>

<div class="theme-popover" id="themePopover" role="dialog" aria-label="{{ t('header.theme.toggle') }}">
  <div class="theme-popover-section">
    <div class="theme-popover-label">{{ t('header.theme.mode') }}</div>
    <div class="theme-popover-modes">
      <button class="theme-mode-btn" data-mode="light" title="{{ t('header.theme.light') }}">
        <i class="fas fa-sun"></i>
        <span>{{ t('header.theme.light') }}</span>
      </button>
      <button class="theme-mode-btn" data-mode="dark" title="{{ t('header.theme.dark') }}">
        <i class="fas fa-moon"></i>
        <span>{{ t('header.theme.dark') }}</span>
      </button>
      <button class="theme-mode-btn" data-mode="auto" title="{{ t('header.theme.auto') }}">
        <i class="fas fa-adjust"></i>
        <span>{{ t('header.theme.auto') }}</span>
      </button>
    </div>
  </div>
  <div class="theme-popover-divider"></div>
  <div class="theme-popover-section">
    <div class="theme-popover-label">{{ t('header.theme.presets') }}</div>
    <div class="theme-popover-presets">
      <button class="theme-preset-btn" data-preset="default" title="{{ t('header.theme.default') }}">
        <span class="preset-swatch preset-swatch-default"></span>
        <span>{{ t('header.theme.default') }}</span>
      </button>
      <button class="theme-preset-btn" data-preset="nord" title="{{ t('header.theme.nord') }}">
        <span class="preset-swatch preset-swatch-nord"></span>
        <span>{{ t('header.theme.nord') }}</span>
      </button>
      <button class="theme-preset-btn" data-preset="midnight" title="{{ t('header.theme.midnight') }}">
        <span class="preset-swatch preset-swatch-midnight"></span>
        <span>{{ t('header.theme.midnight') }}</span>
      </button>
      <button class="theme-preset-btn" data-preset="monokai" title="{{ t('header.theme.monokai') }}">
        <span class="preset-swatch preset-swatch-monokai"></span>
        <span>{{ t('header.theme.monokai') }}</span>
      </button>
      <button class="theme-preset-btn" data-preset="dracula" title="{{ t('header.theme.dracula') }}">
        <span class="preset-swatch preset-swatch-dracula"></span>
        <span>{{ t('header.theme.dracula') }}</span>
      </button>
      <button class="theme-preset-btn" data-preset="solarized" title="{{ t('header.theme.solarized') }}">
        <span class="preset-swatch preset-swatch-solarized"></span>
        <span>{{ t('header.theme.solarized') }}</span>
      </button>
    </div>
  </div>
</div>

<!-- Add search options panel with context-aware options -->
<div id="searchOptionsPanel" class="search-options-panel hidden">
  <div class="options-header">
    <h3>{{ t('header.search.options') }}</h3>
    <button class="close-options-btn" id="closeSearchOptions">
      <i class="fas fa-times"></i>
    </button>
  </div>
  <div class="options-section">
    <h4>{{ t('header.search.searchIn') }}</h4>
    <div class="search-option-tags">
      {% if request.path == '/loras/recipes' %}
      <div class="search-option-tag active" data-option="title">{{ t('header.search.filters.title') }}</div>
      <div class="search-option-tag active" data-option="tags">{{ t('header.search.filters.tags') }}</div>
      <div class="search-option-tag active" data-option="loraName">{{ t('header.search.filters.loraName') }}</div>
      <div class="search-option-tag active" data-option="loraModel">{{ t('header.search.filters.loraModel') }}</div>
      <div class="search-option-tag active" data-option="prompt">{{ t('header.search.filters.prompt') }}</div>
      {% elif request.path == '/checkpoints' %}
      <div class="search-option-tag active" data-option="filename">{{ t('header.search.filters.filename') }}</div>
      <div class="search-option-tag active" data-option="modelname">{{ t('header.search.filters.modelname') }}</div>
      <div class="search-option-tag active" data-option="tags">{{ t('header.search.filters.tags') }}</div>
      <div class="search-option-tag" data-option="creator">{{ t('header.search.filters.creator') }}</div>
      {% elif request.path == '/embeddings' or request.path == '/other' %}
      <div class="search-option-tag active" data-option="filename">{{ t('header.search.filters.filename') }}</div>
      <div class="search-option-tag active" data-option="modelname">{{ t('header.search.filters.modelname') }}</div>
      <div class="search-option-tag active" data-option="tags">{{ t('header.search.filters.tags') }}</div>
      <div class="search-option-tag" data-option="creator">{{ t('header.search.filters.creator') }}</div>
      {% elif request.path == '/loras' %}
      <!-- LoRAs page: trigger-word search is opt-in (see SearchStrategy) -->
      <div class="search-option-tag active" data-option="filename">{{ t('header.search.filters.filename') }}</div>
      <div class="search-option-tag active" data-option="modelname">{{ t('header.search.filters.modelname') }}</div>
      <div class="search-option-tag active" data-option="tags">{{ t('header.search.filters.tags') }}</div>
      <div class="search-option-tag" data-option="creator">{{ t('header.search.filters.creator') }}</div>
      <div class="search-option-tag" data-option="triggerWords">{{ t('header.search.filters.triggerWords') }}</div>
      {% else %}
      <!-- Default options for the remaining model pages (e.g. workflows) -->
      <div class="search-option-tag active" data-option="filename">{{ t('header.search.filters.filename') }}</div>
      <div class="search-option-tag active" data-option="modelname">{{ t('header.search.filters.modelname') }}</div>
      <div class="search-option-tag active" data-option="tags">{{ t('header.search.filters.tags') }}</div>
      <div class="search-option-tag" data-option="creator">{{ t('header.search.filters.creator') }}</div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Add filter panel -->
<div id="filterPanel" class="filter-panel hidden">
  <div class="filter-header">
    <h3>{{ t(filter_title_key) }}</h3>
    <button class="close-filter-btn" onclick="filterManager.closeFilterPanel()">
      <i class="fas fa-times"></i>
    </button>
  </div>

  <!-- Presets Section -->
  <div class="filter-section presets-section">
    <h4>{{ t('header.filter.presets') }}</h4>
    <div class="filter-presets" id="filterPresets">
    </div>
  </div>

  <div class="filter-section">
    <h4>{{ t('header.filter.baseModel') }}</h4>
    <input
      type="text"
      id="baseModelSearchInput"
      class="filter-search-input"
      placeholder="{{ t('header.filter.baseModelSearchPlaceholder') }}"
      autocomplete="off"
      autocorrect="off"
      autocapitalize="none"
      spellcheck="false"
    >
    <div class="filter-tags" id="baseModelTags">
      <!-- Tags will be dynamically inserted here -->
    </div>
    <div id="baseModelEmptyState" class="filter-empty-state" hidden>
      {{ t('header.filter.noBaseModelMatches') }}
    </div>
  </div>
  <div class="filter-section">
    <div class="filter-section-header">
      <h4>{{ t('header.filter.modelTags') }}</h4>
      <div class="tag-logic-toggle" id="tagLogicToggle">
        <button class="tag-logic-option" data-value="any" title="{{ t('header.filter.tagLogicAny') }}">{{ t('header.filter.any') }}</button>
        <button class="tag-logic-option" data-value="all" title="{{ t('header.filter.tagLogicAll') }}">{{ t('header.filter.all') }}</button>
      </div>
    </div>
    <input type="text" id="modelTagsSearchInput" class="filter-search-input"
      placeholder="{{ t('header.filter.tagSearchPlaceholder') }}" autocomplete="off">
    <div class="filter-tags" id="modelTagsFilter">
      <!-- Top tags will be dynamically inserted here -->
      <div class="tags-loading">{{ t('common.status.loading') }}</div>
    </div>
    <div id="modelTagsEmptyState" class="filter-empty-state" hidden>
      {{ t('header.filter.noTagMatches') }}
    </div>
  </div>
  {% if current_page == 'recipes' %}
  <div class="filter-section">
    <h4>{{ t('header.filter.loraAvailability') }}</h4>
    <div class="filter-tags" id="loraAvailabilityTags">
      <div class="filter-tag lora-availability-tag" data-availability="ready">
        {{ t('header.filter.availabilityReady') }}
      </div>
      <div class="filter-tag lora-availability-tag" data-availability="missing">
        {{ t('header.filter.availabilityMissing') }}
      </div>
      <div class="filter-tag lora-availability-tag" data-availability="deleted">
        {{ t('header.filter.availabilityDeleted') }}
      </div>
    </div>
  </div>
  <div class="filter-section">
    <h4>{{ t('header.filter.workflow') }}</h4>
    <div class="filter-tags" id="hasWorkflowTags">
      <div class="filter-tag has-workflow-tag">
        {{ t('header.filter.hasWorkflow') }}
      </div>
    </div>
  </div>
  {% endif %}
  {% if current_page == 'loras' or current_page == 'checkpoints' or current_page == 'other' %}
  <div class="filter-section">
    <h4>{{ t('header.filter.modelTypes') }}</h4>
    <div class="filter-tags" id="modelTypeTags">
      <div class="tags-loading">{{ t('common.status.loading') }}</div>
    </div>
  </div>
  {% endif %}
  {% if current_page != 'recipes' %}
  <div class="filter-section">
    <h4>{{ t('header.filter.license') }}</h4>
    <div class="filter-tags">
      <div class="filter-tag license-tag" data-license="noCredit" title="{{ t('header.filter.noCreditRequiredTooltip') }}">
        {{ t('header.filter.noCreditRequired') }}
      </div>
      <div class="filter-tag license-tag" data-license="allowSelling" title="{{ t('header.filter.allowSellingGeneratedContentTooltip') }}">
        {{ t('header.filter.allowSellingGeneratedContent') }}
      </div>
    </div>
  </div>
  {% endif %}
  <div class="filter-actions">
    <button class="clear-filters-btn" onclick="filterManager.clearFilters()">
      {{ t('header.filter.clearAll') }}
    </button>
  </div>
</div>