@if (mobileMsg) {
  <div class="mobile-msg">
    <div class="msg ellipsis me-auto" i18n>Open in the application?</div>
    <a class="peertube-button-link secondary-button me-3" [href]="androidAppUrl || iosAppUrl" (click)="onOpenClientClick()">Open</a>

    <button class="border-0 p-0" title="Close this message" i18n-title (click)="hideMobileMsg()">
      <my-global-icon iconName="cross"></my-global-icon>
    </button>
  </div>
}

<div class="root" [ngClass]="{ 'search-hidden': searchHidden }">
  <a class="peertube-title" [routerLink]="getDefaultRoute()" [queryParams]="getDefaultRouteQuery()">
    <img [src]="getLogoUrl()" alt="" [title]="instanceName" class="logo" />

    @if (isInstanceNameDisplayed()) {
      <span class="instance-name">{{ instanceName }}</span>
    }
  </a>

  <!-- @if (!searchHidden) {
    <my-search-typeahead [hidden]="!isLoaded()"></my-search-typeahead>
  } --> 

  <div class="d-flex align-items-center buttons-container" [hidden]="!isLoaded()">
    @if (!loggedIn) {
      <!-- <my-button
        i18n-title title="Open settings modal"
        theme="tertiary" rounded="true" class="margin-button settings-button" icon="cog" (click)="openQuickSettings()"
      ></my-button> -->

      <!-- @if (isRegistrationAllowed()) {
        <a routerLink="/signup" class="peertube-button-link secondary-button w-100 ellipsis margin-button create-account-button">
          <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
        </a>
      } -->

      <!-- <my-login-link class="login-label" className="peertube-button-link primary-button w-100 ellipsis"></my-login-link>
      <my-login-link class="login-icon" className="peertube-button-link primary-button icon-only w-100 ellipsis" icon="true" label=""></my-login-link> -->
    } @else {
      <!-- <my-notification-dropdown class="margin-button"></my-notification-dropdown> -->

      <!-- <my-button
        i18n-title title="Go to the page where you can manage your account"
        theme="tertiary" rounded="true" class="margin-button settings-button" icon="cog" ptRouterLink="/my-account"
        inheritColor="true"
      ></my-button> -->

      <div
        class="logged-in-container" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
        container="body"
        >
        <!-- <button class="tertiary-button" ngbDropdownToggle>
          <my-actor-avatar [actor]="user.account" actorType="account" size="34" responseSize="true"></my-actor-avatar>

          <div class="logged-in-info text-start ms-2">
            <div class="display-name ellipsis">{{ user.account?.displayName }}</div>

            <div class="username ellipsis fs-8">&#64;{{ user.username }}</div>
          </div>
        </button> -->

        <div ngbDropdownMenu>
          @if (user.account) {
            <a
              ngbDropdownItem class="dropdown-item" [routerLink]="[ '/a', user.account.nameWithHost ]"
              #profile
              >
              <my-global-icon iconName="user" aria-hidden="true"></my-global-icon> <ng-container i18n>Public profile</ng-container>
            </a>
          }

          <div class="dropdown-divider"></div>

          <!-- @if (user.account) {
            <a ngbDropdownItem class="dropdown-item" routerLink="/my-account">
              <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> <ng-container i18n>Manage my account</ng-container>
            </a>
          } -->

          <div class="dropdown-divider"></div>

          <!-- <a
            myPluginSelector pluginSelectorId="menu-user-dropdown-language-item"
            ngbDropdownItem class="dropdown-item" routerLink="/my-account/settings" fragment="interface-settings"
            >
            <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
            <span i18n>Interface:</span>
            <span class="ms-auto ps-2 muted">{{ currentInterfaceLanguage }}</span>
          </a> -->

          <!-- @if (!isInMobileView) {
            <button ngbDropdownItem class="dropdown-item" (click)="openHotkeysCheatSheet()">
              <my-global-icon iconName="keyboard" aria-hidden="true"></my-global-icon>
              <ng-container i18n>Keyboard shortcuts</ng-container>
            </button>
          } -->

          <!-- <button ngbDropdownItem (click)="logout($event)" class="dropdown-item logout">
            <my-global-icon iconName="sign-out" aria-hidden="true"></my-global-icon>
            <ng-container i18n>Log out</ng-container>
          </button> -->
        </div>
      </div>
    }
  </div>

  <!-- <my-button theme="tertiary" rounded="true" class="menu-button margin-button" icon="menu" (click)="toggleMenu()"></my-button> -->
</div>

<!-- <my-quick-settings #quickSettingsModal></my-quick-settings> -->