<nav class="navbar navbar-dark navbar-expand-sm bg-primary">
  <div class="container-fluid justify-content-start">
    <button class="btn btn-primary bi-list" (click)="loadRecentPolls(); offcanvas.open(content)"></button>
    <img class="navbar-logo" ngSrc="/assets/logo.png" alt="Apollusia Logo" width="32" height="32">
    <a class="navbar-brand" routerLink="/">Apollusia</a>
    <ul class="ms-auto navbar-nav">
      <a class="btn btn-primary bi-calendar-plus d-none d-sm-block" type="button" routerLink="poll/create">
        Create Poll
      </a>
      <li class="nav-item">
        <div ngbDropdown>
          <button type="button" class="nav-link bi-person-circle" ngbDropdownToggle></button>
          <div ngbDropdownMenu class="dropdown-menu dropdown-menu-end">
            @if (user) {
              <h5 class="dropdown-header">
                Signed in as <strong>{{ user.username }}</strong>
              </h5>
              <a ngbDropdownItem href="{{ environment.keycloak.url }}/realms/{{ environment.keycloak.realm }}/account" target="_blank" class="bi-person-gear">
                Account Settings
              </a>
              <a ngbDropdownItem href="{{ environment.keycloak.url }}/realms/{{ environment.keycloak.realm }}/account#/account-security/signing-in" target="_blank" class="bi-person-lock">
                Change Password & 2FA
              </a>
              <button ngbDropdownItem (click)="logout()" class="text-warning bi-box-arrow-right">
                Sign Out
              </button>
            } @else {
              <button ngbDropdownItem (click)="login()" class="bi-box-arrow-in-right">
                Sign In
              </button>
            }
            <div class="dropdown-divider"></div>
            <a ngbDropdownItem routerLink="settings">
              <i class="bi-gear icon"></i>
              Settings
            </a>
            <h5 class="dropdown-header">Theme</h5>
            @for (theme of themes; track theme) {
              <button ngbDropdownItem [class]="theme.icon" (click)="theme$.next(theme.value)">
                {{ theme.name }}
                <i [class.bi-check]="(theme$ | async) === theme.value"></i>
              </button>
            }
          </div>
        </div>
      </li>
    </ul>
  </div>
</nav>
<ng-template #content let-offcanvas>
  <div class="offcanvas-header">
    <h4 class="offcanvas-title" id="offcanvas-basic-title">
      <img class="navbar-logo" ngSrc="/assets/logo.png" alt="Apollusia Logo" width="32" height="32">
      Apollusia
    </h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="offcanvas.dismiss()"></button>
  </div>
  <div class="offcanvas-body" (click)="$any($event.target)?.href && offcanvas.dismiss()">
    <ul class="nav nav-pills flex-column h-100">
      <li class="nav-item">
        <a class="nav-item nav-link bi-house" routerLinkActive="active" routerLink="dashboard">
          Dashboard
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-item nav-link bi-calendar-plus" routerLinkActive="active" routerLink="poll/create">
          Create Poll
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-item nav-link bi-gear" routerLinkActive="active" routerLink="settings">
          Settings
        </a>
      </li>
      <hr/>
      <h6>
        Recent Polls
      </h6>
      @for (poll of recentPolls; track poll.id) {
        <li class="nav-item w-100">
          <a class="nav-link text-truncate" routerLinkActive="active" [routerLink]="['poll', poll.id, 'participate']">
            <i [class]="poll.location | locationIcon"></i>
            {{ poll.title }}
            <app-location-link class="small text-muted" [location]="poll.location" [shorten]="true"></app-location-link>
            <i class="bi-x float-end" ngbTooltip="Remove from Recent Polls" (click)="$event.stopImmediatePropagation(); $event.preventDefault(); removeRecent(poll)"></i>
          </a>
        </li>
      }
      <hr class="mt-auto"/>
      <li class="nav-item">
        <a class="nav-item nav-link bi-info-circle" routerLinkActive="active" routerLink="about">
          About
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-item nav-link bi-file-earmark-text" routerLinkActive="active" routerLink="legal">
          Legal
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-item nav-link bi-github" href="https://github.com/Morphclue/apollusia">
          GitHub
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-item nav-link bi-bug" href="https://github.com/Morphclue/apollusia/issues/new?template=bug_report.md" target="_blank">
          Report a bug
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-item nav-link bi-journal-text" [href]="'https://github.com/Morphclue/apollusia/' + changelogLink" target="_blank">
          Changelog <span class="text-muted">{{ version }}</span>
        </a>
      </li>
      <div class="small text-muted text-center">
        Copyright © Apollusia, {{ currentYear }}
      </div>
    </ul>
  </div>
</ng-template>
