{% import "macros/icons.html" as icons %}

<header class="sticky top-0 bg-white border-b border-slate-200 z-10">
  <div class="px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16 -mb-px">

          <!-- Header: Left side -->
          <div class="flex">
              <!-- Hamburger button -->
              <button
                  class="text-slate-500 hover:text-slate-600 lg:hidden"
                  _="install ToggleSidebar"
              >
                  <span class="sr-only">Open sidebar</span>
                  <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <rect x="4" y="5" width="16" height="2" />
                      <rect x="4" y="11" width="16" height="2" />
                      <rect x="4" y="17" width="16" height="2" />
                  </svg>
              </button>

          </div>

          <!-- Header: Right side -->
          <div class="flex items-center space-x-3">

              <!-- Workspace switcher -->
              <div class="relative inline-flex">
                <button
                    class="inline-flex justify-center items-center group h-8"
                    aria-haspopup="true"
                    _="install DropdownMenuToggle(menuId: 'workspace-switcher-menu')"
                >
                  <span class="truncate text-sm font-medium group-hover:text-slate-800 mr-1">{{ current_workspace.name }}</span>
                  {{ icons.chevron_down('w-3 h-3 shrink-0 fill-slate-400') }}
                </button>
                <div
                    id="workspace-switcher-menu"
                    class="origin-top-right z-10 absolute top-full right-0 w-56 bg-white focus:outline-none mt-1 transition ease-out duration-200 transform hidden"
                >
                    <ul class="divide-y divide-gray-100 rounded shadow-lg ring-1 ring-black ring-opacity-5">
                      {% for workspace in workspaces %}
                      <li class="w-full px-1 py-1">
                        <a href="//{{ workspace.domain }}/admin/" class="block rounded text-sm hover:bg-slate-100 p-2">
                          <div class="font-medium text-slate-800">{{ workspace.name }}</div>
                          <div class="text-xs text-slate-500">{{ workspace.domain }}</div>
                        </a>
                      </li>
                      {% endfor %}
                      <li class="w-full px-1 py-1">
                        <a href="{{ url_for('dashboard.workspaces:create') }}" class="block rounded text-sm hover:bg-slate-100 p-2">
                          <div class="flex justify-between items-center w-full font-medium text-slate-800">
                            Create new workspace
                            {{ icons.plus('w-4 h-4') }}
                          </div>
                        </a>
                      </li>
                    </ul>
                </div>
              </div>

              <!-- Divider -->
              <hr class="w-px h-6 bg-slate-200" />

              <!-- User button -->
              <div class="relative inline-flex">
                  <button
                      class="inline-flex justify-center items-center group"
                      aria-haspopup="true"
                      _="install DropdownMenuToggle(menuId: 'user-menu')"
                  >
                      <div class="w-8 h-8 rounded-full flex justify-center items-center bg-primary text-white">{{ user.email[0] | upper }}</div>
                  </button>
                  <div
                      id="user-menu"
                      class="origin-top-right z-10 absolute top-full right-0 min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 transition ease-out duration-200 transform hidden"
                  >
                      <div class="pt-0.5 pb-2 px-3 mb-1 border-b border-slate-200 text-sm">
                          <div class="font-medium text-slate-800">{{ user.email }}</div>
                      </div>
                      <ul>
                          <li>
                              <a class="font-medium text-sm text-primary-500 hover:text-primary-600 flex items-center py-1 px-3" href="{{ url_for('dashboard.auth:logout') }}">Sign out</a>
                          </li>
                      </ul>
                  </div>
              </div>

          </div>

      </div>
  </div>
</header>
