{% set _uiux_full_width_header = ('System Admin' in (ui_roles|default([], true))) or ('Firm Admin' in (ui_roles|default([], true))) or ('Partner' in (ui_roles|default([], true))) or ('Manager' in (ui_roles|default([], true))) or ('Branch Manager' in (ui_roles|default([], true))) or ('Staff' in (ui_roles|default([], true))) or ('Employee' in (ui_roles|default([], true))) or ('Client' in (ui_roles|default([], true))) or ('Consultant' in (ui_roles|default([], true))) %}
<header data-uiux-shared-header="true" class="sticky top-0 z-40 border-b border-slate-200/70 {{ 'bg-white/95' if _uiux_full_width_header else 'bg-slate-100/85' }} backdrop-blur-xl">
  <div class="{{ 'w-full px-4 py-3 sm:px-6 lg:px-8' if _uiux_full_width_header else 'mx-auto max-w-[1500px] px-3 py-3 sm:px-6 lg:px-8' }}">
    <div class="{{ 'border-0 bg-transparent px-0 py-0 shadow-none' if _uiux_full_width_header else 'rounded-3xl border border-slate-200 bg-white/95 px-3 py-3 shadow-soft sm:px-4' }}">
      <div class="flex items-center gap-2 sm:gap-3">
        <a href="/workspaces" class="flex min-w-0 flex-1 items-center gap-2 rounded-2xl px-1 py-1 transition hover:bg-slate-50 sm:gap-3 lg:min-w-[220px] lg:flex-none lg:px-2">
          {% if firm_branding.logo_url %}
            <img src="{{ firm_branding.logo_url }}" alt="{{ current_firm_name }} logo" class="h-10 w-10 shrink-0 rounded-2xl border border-slate-100 bg-white object-contain p-1 shadow-soft sm:h-11 sm:w-11" />
          {% else %}
            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-brand-600 text-sm font-bold text-white shadow-soft sm:h-11 sm:w-11">{{ (current_firm_name[:2] if current_firm_name else 'AF')|upper }}</div>
          {% endif %}
          <div class="min-w-0">
            <div class="truncate text-sm font-bold text-slate-900">{{ current_firm_name }}</div>
            <div class="truncate text-[11px] text-slate-500 sm:text-xs">{{ current_branch_name if active_branch_id else 'All Branches' }}{% if active_financial_year %} • FY {{ active_financial_year }}{% endif %}</div>
          </div>
        </a>

        <div class="hidden min-w-0 flex-1 flex-wrap items-center gap-2 lg:flex">
          {% set workspace_switcher_id = 'workspace_switcher_desktop' %}
          {% include "ui/templates/components/workspace_switcher.html" %}

          {% if full_auth and (can_switch_service_tenant(current_user, ui_perms, ui_roles) or can_switch_service_branch(current_user, ui_perms, ui_roles) or can_switch_employee_tenant(current_user, ui_perms, ui_roles) or can_switch_employee_branch(current_user, ui_perms, ui_roles) or can_view_settings(current_user, ui_perms, ui_roles)) %}
            {% if can_switch_service_tenant(current_user, ui_perms, ui_roles) or can_switch_employee_tenant(current_user, ui_perms, ui_roles) %}
              {% set context_tenants = get_context_tenants(request, current_user, ui_perms, ui_roles) %}
              <select title="Active Audit Firm" onchange="if(this.value){window.location.href=this.value;}" class="max-w-[210px] rounded-2xl border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 shadow-sm outline-none hover:border-brand-200 focus:ring-2 focus:ring-brand-100">
                {% for tenant in context_tenants %}
                  <option value="/system-settings/context/tenant/{{ tenant.id }}" {% if tenant.id == active_tenant_id %}selected{% endif %}>{{ tenant.name }}</option>
                {% endfor %}
              </select>
            {% endif %}

            {% if can_switch_service_branch(current_user, ui_perms, ui_roles) or can_switch_employee_branch(current_user, ui_perms, ui_roles) %}
              {% set context_branches = get_context_branches(request, current_user, ui_perms, ui_roles) %}
              <select title="Active Branch" onchange="if(this.value){window.location.href=this.value;}" class="max-w-[190px] rounded-2xl border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 shadow-sm outline-none hover:border-brand-200 focus:ring-2 focus:ring-brand-100">
                <option value="/system-settings/context/branch/0" {% if not active_branch_id %}selected{% endif %}>All Branches</option>
                {% for branch in context_branches %}
                  <option value="/system-settings/context/branch/{{ branch.id }}" {% if branch.id == active_branch_id %}selected{% endif %}>{{ branch.name }}</option>
                {% endfor %}
              </select>
            {% endif %}

            {% if can_view_settings(current_user, ui_perms, ui_roles) %}
              {% set context_financial_years = get_context_financial_years(request, current_user, ui_perms, ui_roles) %}
              <select title="Active Financial Year" data-testid="active-fy-select" aria-label="Active Financial Year" onchange="if(this.value){window.location.href=this.value;}" class="max-w-[170px] rounded-2xl border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 shadow-sm outline-none hover:border-brand-200 focus:ring-2 focus:ring-brand-100">
                {% for fy in context_financial_years %}
                  <option value="/system-settings/context/financial-year/{{ fy.year_code }}" {% if fy.year_code == active_financial_year %}selected{% endif %}>FY {{ fy.year_code }}{% if fy.is_current %} (Current){% endif %}{% if fy.is_locked %} - Locked{% endif %}</option>
                {% endfor %}
              </select>
            {% endif %}
          {% endif %}
        </div>

        <div class="ml-auto flex shrink-0 items-center gap-1.5 sm:gap-2">
          <a href="/alerts" aria-label="Alerts" class="relative inline-flex h-10 items-center justify-center rounded-2xl border border-slate-200 bg-white px-2.5 text-xs font-semibold text-slate-700 shadow-sm hover:border-brand-200 hover:text-brand-700 sm:px-3">
            <span class="hidden sm:inline">Alerts</span>
            <span class="sm:hidden">🔔</span>
            {% if unread_alert_count %}<span class="ml-1.5 rounded-full bg-brand-600 px-1.5 py-0.5 text-[10px] font-bold text-white sm:ml-2 sm:px-2">{{ unread_alert_count }}</span>{% endif %}
          </a>

          <details class="group relative hidden sm:block">
            <summary class="flex cursor-pointer list-none items-center gap-2 rounded-2xl border border-slate-200 bg-white px-2 py-2 shadow-sm hover:border-brand-200">
              {% if current_user_photo_url %}
                <img src="{{ current_user_photo_url }}" alt="Profile photo" class="h-8 w-8 rounded-xl object-cover" />
              {% else %}
                <div class="flex h-8 w-8 items-center justify-center rounded-xl bg-brand-600 text-xs font-bold text-white">{{ current_user_initials }}</div>
              {% endif %}
              <div class="hidden text-left xl:block">
                <div class="max-w-[150px] truncate text-xs font-bold text-slate-900">{{ current_user.full_name or current_user.email }}</div>
                <div class="max-w-[150px] truncate text-[11px] text-slate-500">{{ current_user.email }}</div>
              </div>
            </summary>
            <div class="absolute right-0 z-50 mt-2 w-56 rounded-2xl border border-slate-200 bg-white p-2 text-sm shadow-card">
              {% if "Consultant" in ui_roles %}
                <a class="block rounded-xl px-3 py-2 text-slate-700 hover:bg-slate-50" href="/consultant/profile">My Profile</a>
              {% elif "Client" in ui_roles %}
                <a class="block rounded-xl px-3 py-2 text-slate-700 hover:bg-slate-50" href="/client/profile">My Profile</a>
              {% else %}
                <a class="block rounded-xl px-3 py-2 text-slate-700 hover:bg-slate-50" href="/employee/profile">My Profile</a>
              {% endif %}
              <a class="block rounded-xl px-3 py-2 text-slate-700 hover:bg-slate-50" href="/change-password">Change Password</a>
              <a class="block rounded-xl px-3 py-2 text-red-600 hover:bg-red-50" href="/logout">Logout</a>
            </div>
          </details>

          <details class="group relative lg:hidden">
            <summary aria-label="Open workspace and account menu" class="flex h-10 w-10 cursor-pointer list-none items-center justify-center rounded-2xl border border-slate-200 bg-white text-lg font-bold text-slate-700 shadow-sm hover:border-brand-200 hover:text-brand-700">☰</summary>
            <div class="fixed inset-x-3 top-[5.4rem] z-50 max-h-[calc(100vh-6.2rem)] overflow-y-auto rounded-3xl border border-slate-200 bg-white p-4 shadow-card sm:absolute sm:inset-x-auto sm:right-0 sm:top-auto sm:mt-2 sm:w-[360px]">
              <div class="mb-3 flex items-center justify-between">
                <div>
                  <div class="text-sm font-bold text-slate-900">Workspace & context</div>
                  <div class="text-xs text-slate-500">Change workspace, branch or financial year</div>
                </div>
              </div>

              {% set workspace_switcher_id = 'workspace_switcher_mobile' %}
              {% include "ui/templates/components/workspace_switcher.html" %}

              {% if full_auth and (can_switch_service_tenant(current_user, ui_perms, ui_roles) or can_switch_service_branch(current_user, ui_perms, ui_roles) or can_switch_employee_tenant(current_user, ui_perms, ui_roles) or can_switch_employee_branch(current_user, ui_perms, ui_roles) or can_view_settings(current_user, ui_perms, ui_roles)) %}
                <div class="mt-4 grid gap-3">
                  {% if can_switch_service_tenant(current_user, ui_perms, ui_roles) or can_switch_employee_tenant(current_user, ui_perms, ui_roles) %}
                    {% set mobile_context_tenants = get_context_tenants(request, current_user, ui_perms, ui_roles) %}
                    <label class="grid gap-1 text-xs font-semibold text-slate-600">Audit Firm
                      <select onchange="if(this.value){window.location.href=this.value;}" class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-700">
                        {% for tenant in mobile_context_tenants %}<option value="/system-settings/context/tenant/{{ tenant.id }}" {% if tenant.id == active_tenant_id %}selected{% endif %}>{{ tenant.name }}</option>{% endfor %}
                      </select>
                    </label>
                  {% endif %}
                  {% if can_switch_service_branch(current_user, ui_perms, ui_roles) or can_switch_employee_branch(current_user, ui_perms, ui_roles) %}
                    {% set mobile_context_branches = get_context_branches(request, current_user, ui_perms, ui_roles) %}
                    <label class="grid gap-1 text-xs font-semibold text-slate-600">Branch
                      <select onchange="if(this.value){window.location.href=this.value;}" class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-700">
                        <option value="/system-settings/context/branch/0" {% if not active_branch_id %}selected{% endif %}>All Branches</option>
                        {% for branch in mobile_context_branches %}<option value="/system-settings/context/branch/{{ branch.id }}" {% if branch.id == active_branch_id %}selected{% endif %}>{{ branch.name }}</option>{% endfor %}
                      </select>
                    </label>
                  {% endif %}
                  {% if can_view_settings(current_user, ui_perms, ui_roles) %}
                    {% set mobile_context_financial_years = get_context_financial_years(request, current_user, ui_perms, ui_roles) %}
                    <label class="grid gap-1 text-xs font-semibold text-slate-600">Financial Year
                      <select data-testid="active-fy-select-mobile" aria-label="Active Financial Year" onchange="if(this.value){window.location.href=this.value;}" class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-700">
                        {% for fy in mobile_context_financial_years %}<option value="/system-settings/context/financial-year/{{ fy.year_code }}" {% if fy.year_code == active_financial_year %}selected{% endif %}>FY {{ fy.year_code }}{% if fy.is_current %} (Current){% endif %}{% if fy.is_locked %} - Locked{% endif %}</option>{% endfor %}
                      </select>
                    </label>
                  {% endif %}
                </div>
              {% endif %}

              <div class="mt-4 border-t border-slate-100 pt-3">
                <div class="mb-2 flex items-center gap-3 rounded-2xl bg-slate-50 p-3">
                  {% if current_user_photo_url %}<img src="{{ current_user_photo_url }}" alt="Profile photo" class="h-9 w-9 rounded-xl object-cover" />{% else %}<div class="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-600 text-xs font-bold text-white">{{ current_user_initials }}</div>{% endif %}
                  <div class="min-w-0"><div class="truncate text-sm font-bold text-slate-900">{{ current_user.full_name or current_user.email }}</div><div class="truncate text-xs text-slate-500">{{ current_user.email }}</div></div>
                </div>
                {% if "Consultant" in ui_roles %}<a class="block rounded-xl px-3 py-2.5 text-sm text-slate-700 hover:bg-slate-50" href="/consultant/profile">My Profile</a>{% elif "Client" in ui_roles %}<a class="block rounded-xl px-3 py-2.5 text-sm text-slate-700 hover:bg-slate-50" href="/client/profile">My Profile</a>{% else %}<a class="block rounded-xl px-3 py-2.5 text-sm text-slate-700 hover:bg-slate-50" href="/employee/profile">My Profile</a>{% endif %}
                <a class="block rounded-xl px-3 py-2.5 text-sm text-slate-700 hover:bg-slate-50" href="/change-password">Change Password</a>
                <a class="block rounded-xl px-3 py-2.5 text-sm text-red-600 hover:bg-red-50" href="/logout">Logout</a>
              </div>
            </div>
          </details>
        </div>
      </div>
    </div>
  </div>
</header>

<script>
(function () {
  "use strict";

  if (window.__uiuxSharedHeaderDropdownAutoCloseV1) {
    return;
  }
  window.__uiuxSharedHeaderDropdownAutoCloseV1 = true;

  function getHeader() {
    return document.querySelector('[data-uiux-shared-header="true"]');
  }

  function getDropdowns() {
    var header = getHeader();
    return header ? Array.prototype.slice.call(header.querySelectorAll('details')) : [];
  }

  function closeDropdown(dropdown) {
    if (dropdown && dropdown.open) {
      dropdown.open = false;
    }
  }

  function closeAll(exceptDropdown) {
    getDropdowns().forEach(function (dropdown) {
      if (dropdown !== exceptDropdown) {
        closeDropdown(dropdown);
      }
    });
  }

  document.addEventListener('click', function (event) {
    var header = getHeader();
    if (!header) {
      return;
    }

    var clickedDropdown = event.target.closest('details');
    if (!clickedDropdown || !header.contains(clickedDropdown)) {
      closeAll(null);
      return;
    }

    if (event.target.closest('a[href]')) {
      closeDropdown(clickedDropdown);
    }
  });

  document.addEventListener('keydown', function (event) {
    if (event.key !== 'Escape') {
      return;
    }

    var openDropdowns = getDropdowns().filter(function (dropdown) {
      return dropdown.open;
    });

    if (!openDropdowns.length) {
      return;
    }

    openDropdowns.forEach(closeDropdown);

    var lastDropdown = openDropdowns[openDropdowns.length - 1];
    var summary = lastDropdown.querySelector('summary');
    if (summary && typeof summary.focus === 'function') {
      summary.focus();
    }
  });

  getDropdowns().forEach(function (dropdown) {
    dropdown.addEventListener('toggle', function () {
      if (dropdown.open) {
        closeAll(dropdown);
      }
    });
  });
})();
</script>