<ng-template #moreInfoButton>
  <div class="more-info-btn-container">
    <a
      class="more-info-btn peertube-button-link peertube-button-icon mt-2 d-block ellipsis" [ngClass]="{ 'icon-only': collapsed, 'label-xl': moreInfoLabel.length > 10 }"
      routerLink="/about" i18n-title title="More info" routerLinkActive="active"
      >
      <my-global-icon iconName="help"></my-global-icon>

      @if (!collapsed) {
        {{ moreInfoLabel }}
      }
    </a>
  </div>
</ng-template>

<div class="menu-container" [ngClass]="{ collapsed: collapsed, 'logged-in': loggedIn }">

  <div class="main-menu-wrapper">
    <div class="main-menu-scrollbar">

      <div class="main-menu">
        <div class="mobile-controls">
          <span class="icon-logo"></span>

          <my-button rounded="true" icon="cross" theme="tertiary" (click)="toggleMenu()"></my-button>
        </div>

        <div class="toggle-menu-container">
          @if (collapsed) {
            <button type="button" class="button-unstyle toggle-menu" i18n-title title="Display the lateral menu" (click)="toggleMenu()">
              <my-global-icon class="transform-rotate-180" iconName="chevron-left"></my-global-icon>
            </button>
          } @else {
            <button type="button" class="button-unstyle toggle-menu" i18n-title title= "Hide the lateral menu" (click)="toggleMenu()">
              <my-global-icon iconName="chevron-left"></my-global-icon>
            </button>
          }
        </div>

        @if (!loggedIn) {
          <div class="about about-top">
            <div i18n [ngClass]="{ 'visually-hidden': collapsed }" class="block-title me-2">{{ instanceName }}</div>
            <div [ngClass]="{ 'visually-hidden': collapsed }" class="description">{{ shortDescription }}</div>
            <ng-container *ngTemplateOutlet="moreInfoButton"></ng-container>
          </div>
        }

        <nav>
          @for (menuSection of menuSections; track menuSection) {
            <ul class="ul-unstyle" [ngClass]="[ menuSection.key, 'menu-block' ]">
              <li>
                <div class="block-title ellipsis" [ngClass]="{ 'visually-hidden': collapsed }">{{ menuSection.title }}</div>

                <ul class="ul-unstyle">
                  @for (link of menuSection.links; track link) {
                    <li>
                      @if (link.isPrimaryButton === true) {
                        <my-button
                          class="d-block menu-button" [ngClass]="link.ngClass" theme="primary" [icon]="link.icon"
                          [title]="link.label" [ptRouterLink]="link.path" [ptQueryParams]="link.query" [href]="link.url"
                          autoFontSize="true"
                        >

                          @if (!collapsed) {
                            {{ link.label }}
                          }
                        </my-button>
                      } @else {
                        <ng-template #linkTemplate>
                          @if (link.icon) {
                            <my-global-icon [iconName]="link.icon" [ngClass]="link.iconClass" aria-hidden="true"></my-global-icon>
                          }

                          <span [ngClass]="{ 'visually-hidden': collapsed }">{{ link.label }}</span>
                        </ng-template>

                        @if (link.path) {
                          <a class="menu-link ellipsis" [routerLink]="link.path" [queryParams]="link.query" routerLinkActive="active" [ngClass]="link.ngClass" [title]="link.label">
                            <ng-container *ngTemplateOutlet="linkTemplate"></ng-container>
                          </a>
                        } @else {
                          <a class="menu-link ellipsis" [href]="link.url" [ngClass]="link.ngClass" [title]="link.label" target="_blank">
                            <ng-container *ngTemplateOutlet="linkTemplate"></ng-container>
                          </a>
                        }
                      }
                    </li>
                  }
                </ul>
              </li>
            </ul>
          }
        </nav>

        @if (loggedIn) {
          <div class="about">
            <div [ngClass]="{ 'visually-hidden': collapsed }" class="block-title">{{ instanceName }}</div>
            <ng-container *ngTemplateOutlet="moreInfoButton"></ng-container>
          </div>
        }
      </div>
    </div>
  </div>

  @if (!collapsed) {
    <div class="powered-by" class="mt-3 mx-4">
      <div class="fs-8" i18n>
        Platform powered by <a class="fw-bold" href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">PeerTube</a>
      </div>

      <a class="d-block fs-8 fw-bold" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer" i18n>Discover more platforms</a>
    </div>
  }
</div>

<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->
<div class="menu-overlay" [ngClass]="{ 'menu-collapsed': collapsed }" (click)="toggleMenu()"></div>
