dev-toolbar.component.html

<!-- Copyright The Linux Foundation and each contributor to LFX. -->
<!-- SPDX-License-Identifier: MIT -->

@if (showDevToolbar()) {
  <div class="fixed top-0 left-0 right-0 z-50 bg-gray-900 text-white px-4 py-2" data-testid="dev-tools-bar">
    <div class="flex items-center gap-4 max-w-full">
      <!-- Persona Selector -->
      <div class="flex items-center gap-2" data-testid="dev-tools-bar-persona">
        <label for="persona-select" class="text-xs text-gray-400">Persona:</label>
        <lfx-select
          [form]="form"
          control="persona"
          [options]="personaPresets"
          optionLabel="label"
          optionValue="value"
          [showClear]="false"
          styleClass="min-w-44 dev-tools-select"
          inputId="persona-select"
          data-testid="dev-tools-bar-persona-selector" />
      </div>

      <!-- Project/Foundation Selector (hidden on Me lens) -->
      @if (showProjectSelector()) {
        <div class="flex items-center gap-2" data-testid="dev-tools-bar-project-override">
          <label for="project-override-select" class="text-xs text-gray-400">{{ selectorLabel() }}</label>
          <lfx-select
            [form]="form"
            control="selectedProjectUid"
            [options]="projectContextService.availableProjects()"
            optionLabel="name"
            optionValue="uid"
            [filter]="true"
            filterPlaceholder="Search..."
            placeholder="Select..."
            [showClear]="false"
            styleClass="min-w-52 dev-tools-select"
            inputId="project-override-select"
            data-testid="dev-tools-bar-project-override-select" />
        </div>
      }

      <!-- Organization Selector (visible on foundation lens) -->
      @if (isFoundationLens() && showOrganizationSelector()) {
        <div class="flex items-center gap-2" data-testid="dev-tools-bar-organization">
          <label for="organization-select" class="text-xs text-gray-400">Organization:</label>
          <lfx-select
            [form]="form"
            control="selectedAccountId"
            [options]="availableAccounts()"
            optionLabel="accountName"
            optionValue="accountId"
            [filter]="true"
            filterPlaceholder="Search organizations..."
            placeholder="Select an organization"
            [showClear]="false"
            styleClass="min-w-64 dev-tools-select"
            inputId="organization-select"
            data-testid="dev-tools-bar-organization-select" />
        </div>
      }

      <!-- Spacer -->
      <div class="flex-1"></div>

      <lfx-button
        icon="fa-solid fa-trash-can"
        label="Clear Cache"
        severity="secondary"
        size="small"
        [text]="true"
        styleClass="!text-gray-300 hover:!text-white hover:!bg-gray-800"
        (onClick)="clearCache()"
        data-testid="dev-tools-bar-clear-cache">
      </lfx-button>
    </div>
  </div>
}