<nav data-cy="navbar" class="navbar navbar-dark navbar-expand-lg bg-dark fixed-top">
  <button
    class="navbar-toggler d-lg-none"
    [attr.aria-expanded]="!isNavbarCollapsed"
    aria-controls="navbarResponsive"
    (click)="collapse.toggle()"
  >
    <fa-icon icon="bars"></fa-icon>
  </button>
  <div
    #collapse="ngbCollapse"
    class="navbar-collapse collapse"
    id="navbarResponsive"
    [(ngbCollapse)]="isNavbarCollapsed"
    [animation]="true"
    [ngSwitch]="account !== null"
  >
    <ul class="navbar-nav container-fluid">
      <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
        <a class="nav-link" routerLink="/" (click)="collapseNavbar()" style="padding: 0px">
          <span>
            <div class="row">
              <div style="background-color: white; border-radius: 5px; padding: 0px">
                <img src="/content/img/logo-top.png" title="codeAbility Home" alt="codeAbility" width="150px" />
              </div>
            </div>
            <!-- <span jhiTranslate="global.menu.home">Home</span> -->
          </span>
        </a>
      </li>
      <li ngbDropdown id="language" class="nav-item dropdown pointer" display="dynamic" *ngIf="languages && languages.length > 1">
        <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="languagesnavBarDropdown">
          <span>
            <fa-icon icon="flag"></fa-icon>
            <span jhiTranslate="global.menu.language">Language</span>
          </span>
        </a>
        <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="languagesnavBarDropdown">
          <li *ngFor="let language of languages">
            <a
              id="{{ language }}"
              class="dropdown-item"
              [jhiActiveMenu]="language"
              href="javascript:void(0);"
              (click)="changeLanguage(language); collapseNavbar()"
              >{{ language | findLanguageFromKey }}</a
            >
          </li>
          <!-- Just for backup, we add a hidden local login link in the menu -->
          <li>
            <a id="localLogin" class="dropdown-item" href="/login">Local Login</a>
          </li>
          -->
        </ul>
      </li>
      <!-- jhipster-needle-add-element-to-menu - JHipster will add new menu items here -->
      <!-- Search -->
      <li id="search" class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
        <a class="nav-link" routerLink="/" (click)="collapseNavbar()" routerLink="/search">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
            <path
              d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
            />
          </svg>
          <span jhiTranslate="global.menu.search"></span>
        </a>
      </li>
      <!-- end Search -->
      <!-- Bookmarks -->
      <li class="nav-item" routerLinkActive="active" *ngSwitchCase="true" [routerLinkActiveOptions]="{ exact: true }">
        <a class="nav-link" routerLink="/bookmarks">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmarks" viewBox="0 0 16 16">
            <path
              d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L7 13.101l-4.223 2.815A.5.5 0 0 1 2 15.5V4zm2-1a1 1 0 0 0-1 1v10.566l3.723-2.482a.5.5 0 0 1 .554 0L11 14.566V4a1 1 0 0 0-1-1H4z"
            />
            <path d="M4.268 1H12a1 1 0 0 1 1 1v11.768l.223.148A.5.5 0 0 0 14 13.5V2a2 2 0 0 0-2-2H6a2 2 0 0 0-1.732 1z" />
          </svg>
          <span jhiTranslate="global.menu.bookmarks"></span>
        </a>
      </li>
      <!-- End Bookmarks -->

      <!-- Link to OER -->
      <ng-container *ngSwitchCase="true">
        <li *ngIf="oerLink" class="nav-item">
          <a href="{{ oerLink }}" class="nav-link" target="oerWindow">
            <fa-icon style="margin-top: 5%" icon="edit"></fa-icon> <span jhiTranslate="global.menu.edit_exercise"></span>
          </a>
        </li>
      </ng-container>
      <!-- End Link to OER -->

      <!-- Entities -->
      <li
        *jhiHasAnyAuthority="'ROLE_ADMIN'"
        ngbDropdown
        class="nav-item dropdown pointer"
        display="dynamic"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
      >
        <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="entity-menu" data-cy="entity">
          <span>
            <fa-icon icon="th-list"></fa-icon>
            <span jhiTranslate="global.menu.entities.main">Entities</span>
          </span>
        </a>
        <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="entity-menu">
          <li>
            <a
              class="dropdown-item"
              routerLink="saved-searches"
              routerLinkActive="active"
              [routerLinkActiveOptions]="{ exact: true }"
              (click)="collapseNavbar()"
            >
              <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.entities.savedSearches">Saved Searches</span>
            </a>
          </li>
          <li>
            <a
              class="dropdown-item"
              routerLink="user-watch-list"
              routerLinkActive="active"
              [routerLinkActiveOptions]="{ exact: true }"
              (click)="collapseNavbar()"
            >
              <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.entities.userWatchList">user watch list</span>
            </a>
          </li>
          <li>
            <a
              class="dropdown-item"
              routerLink="watch-list-entry"
              routerLinkActive="active"
              [routerLinkActiveOptions]="{ exact: true }"
              (click)="collapseNavbar()"
            >
              <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.entities.watchListEntry">watch list entry</span>
            </a>
          </li>
          <li>
            <a
              class="dropdown-item"
              routerLink="statistics"
              routerLinkActive="active"
              [routerLinkActiveOptions]="{ exact: true }"
              (click)="collapseNavbar()"
            >
              <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.entities.statistics">statistics</span>
            </a>
          </li>
          <li>
            <a
              class="dropdown-item"
              routerLink="likes"
              routerLinkActive="active"
              [routerLinkActiveOptions]="{ exact: true }"
              (click)="collapseNavbar()"
            >
              <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.entities.likes">Likes</span>
            </a>
          </li>

          <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
        </ul>
      </li>
      <!-- End Entities -->

      <!--  Admin -->
      <li
        *jhiHasAnyAuthority="'ROLE_ADMIN'"
        ngbDropdown
        class="nav-item dropdown pointer"
        display="dynamic"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
      >
        <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="admin-menu" data-cy="adminMenu">
          <span>
            <fa-icon icon="users-cog"></fa-icon>
            <span jhiTranslate="global.menu.admin.main">Administration</span>
          </span>
        </a>
        <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="admin-menu">
          <li>
            <a class="dropdown-item" routerLink="admin/user-management" routerLinkActive="active" (click)="collapseNavbar()">
              <fa-icon icon="users" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.admin.userManagement">User management</span>
            </a>
          </li>
          <li>
            <a class="dropdown-item" routerLink="admin/metrics" routerLinkActive="active" (click)="collapseNavbar()">
              <fa-icon icon="tachometer-alt" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.admin.metrics">Metrics</span>
            </a>
          </li>
          <li>
            <a class="dropdown-item" routerLink="admin/health" routerLinkActive="active" (click)="collapseNavbar()">
              <fa-icon icon="heart" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.admin.health">Health</span>
            </a>
          </li>
          <li>
            <a class="dropdown-item" routerLink="admin/configuration" routerLinkActive="active" (click)="collapseNavbar()">
              <fa-icon icon="cogs" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.admin.configuration">Configuration</span>
            </a>
          </li>
          <li>
            <a class="dropdown-item" routerLink="admin/audits" routerLinkActive="active" (click)="collapseNavbar()">
              <fa-icon icon="bell" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.admin.audits">Audits</span>
            </a>
          </li>
          <li>
            <a class="dropdown-item" routerLink="admin/logs" routerLinkActive="active" (click)="collapseNavbar()">
              <fa-icon icon="tasks" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.admin.logs">Logs</span>
            </a>
          </li>
          <li>
            <a class="dropdown-item" (click)="collapseNavbar(); resetPagesCache()">
              <fa-icon icon="times" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.admin.pagesCacheReset">reset pages Cache</span>
            </a>
          </li>
          <li>
            <a class="dropdown-item" (click)="collapseNavbar(); syncEntities()">
              <fa-icon icon="times" [fixedWidth]="true"></fa-icon>
              <span>reset entities with ES search</span>
            </a>
          </li>
          <li *ngIf="openAPIEnabled">
            <a class="dropdown-item" routerLink="admin/docs" routerLinkActive="active" (click)="collapseNavbar()">
              <fa-icon icon="book" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.admin.apidocs">API</span>
            </a>
          </li>
          <!-- jhipster-needle-add-element-to-admin-menu - JHipster will add entities to the admin menu here -->
          <li *ngIf="!inProduction">
            <a class="dropdown-item" href="./h2-console/" target="_tab" (click)="collapseNavbar()">
              <fa-icon icon="database" [fixedWidth]="true"></fa-icon>
              <span jhiTranslate="global.menu.admin.database">Database</span>
            </a>
          </li>
        </ul>
      </li>
      <!-- End Admin -->

      <!-- Login -->
      <li
        id="account-menu-item"
        ngbDropdown
        #myDrop="ngbDropdown"
        class="nav-item dropdown pointer"
        display="dynamic"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
      >
        <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="account-menu">
          <span *ngIf="!getImageUrl()">
            <fa-icon icon="user"></fa-icon>
            <span jhiTranslate="global.menu.account.main"> Account </span>
          </span>
          <span *ngIf="getImageUrl()">
            <img [src]="getImageUrl()" class="profile-image rounded-circle" alt="Avatar" />
            <span jhiTranslate="global.menu.account.main"> Account </span>
          </span>
        </a>
        <ul class="dropdown-menu search-container" ngbDropdownMenu aria-labelledby="account-menu" style="min-width: 300px">
          <ng-container *ngIf="!isAuthenticated()">
            <li *ngFor="let config of configs">
              <div class="row p-1">
                <!-- <div class="col-4">
                  <img src="{{ 'oauth2.' + config.registrationId + '.icon' | translate }}" alt="oAuth2Login" style="max-width: 50px" />
                </div> -->
                <div class="col">
                  <button
                    [disabled]="!contentEditable"
                    type="submit"
                    class="btn btn-outline-secondary"
                    *ngSwitchCase="false"
                    (click)="loginWithOauth2(config.registrationId); collapseNavbar()"
                    jhiTranslate="oauth2.{{ config.registrationId }}.text"
                  >
                    Login
                  </button>
                </div>
              </div>
            </li>
            <div class="" style="padding-top: 10pt">
              <label for="acceptTerms" class="form-check-label">
                <input id="datapolicy" type="checkbox" [checked]="contentEditable" (change)="toggleEditable($event)" />
                {{ 'login.form.acceptTerms1' | translate }}
                <a jhitranslate="login.form.acceptTerms" href="/datapolicy">{{ 'login.form.acceptTerms2' | translate }}</a>
              </label>
              <div class="alert alert-danger" *ngIf="!contentEditable" jhiTranslate="login.messages.error.terms">
                Please accept the datapolicy terms to be able to log in.
              </div>
            </div>
            <div class="dropdown-divider"></div>
            <div class="row p-1">
              <!-- <div class="col-4">
                <img src="{{ 'oauth2.' + config.registrationId + '.icon' | translate }}" alt="oAuth2Login" style="max-width: 50px" />
              </div> -->
              <!-- <div class="col">
                <a class="btn btn-outline-secondary" routerLink="/login" jhiTranslate="oauth2.local.text"> Login locally </a>
              </div> -->
              <div class="alert alert-warning">
                <span jhiTranslate="global.messages.info.register.noaccount">You don't have an educational account?</span>
                <a
                  class="alert-link"
                  href="mailto:artemis-support-inormatik@uibk.ac.at?subject=Account"
                  jhiTranslate="global.messages.info.register.link"
                  >Click here to register a new account</a
                >
              </div>
            </div>
            <!-- <form class="form" role="form" (ngSubmit)="login()" [formGroup]="loginForm">
              <li>
                <h5 style="color: #b3b3b3; margin-bottom: 25px">Admin login</h5>
                <div class="input-group mb-3">
                  <input
                    type="text"
                    class="form-control"
                    name="username"
                    id="username"
                    formControlName="username"
                    placeholder="{{ 'global.form.username.placeholder' | translate }}"
                    #username
                  />
                </div>
                <div class="input-group mb-3">
                  <input
                    type="password"
                    class="form-control"
                    formControlName="password"
                    name="password"
                    id="password"
                    placeholder="{{ 'login.form.password.placeholder' | translate }}"
                  />
                </div>
                <li>
                  <div class="form-check">
                    <label class="form-check-label" for="rememberMe">
                      <input class="form-check-input" type="checkbox" name="rememberMe" id="rememberMe" formControlName="rememberMe" />
                      <span jhiTranslate="login.form.rememberme">Remember me</span>
                    </label>
                  </div>
                </li>
                <div
                  id="authenticationMessage"
                  class="alert alert-danger"
                  *ngIf="authenticationError"
                  jhiTranslate="login.messages.error.authentication"
                >
                  <strong>Failed to sign in!</strong> Please check your credentials and try again.
                </div>
                <button
                  id="submit_without_gitlab"
                  [disabled]="!contentEditable"
                  type="submit"
                  class="btn btn-outline-secondary"
                  style="border-color: #d0d0d0"
                  jhiTranslate="login.form.button"
                >
                  Sign in
                </button>
              </li>
            </form> -->
          </ng-container>

          <div *ngIf="isAuthenticated()">
            <div class="row">
              <!-- <li ngbDropdownItem class="col-12">
                <a style="color: #212529" routerLink="account/settings" routerLinkActive="active" (click)="collapseNavbar()">
                  <fa-icon icon="wrench" [fixedWidth]="true"></fa-icon>
                  <span jhiTranslate="global.menu.account.settings">Settings</span>
                </a>
              </li>
              <li ngbDropdownItem class="col-12">
                <a style="color: #212529" routerLink="account/password" routerLinkActive="active" (click)="collapseNavbar()">
                  <fa-icon icon="lock" [fixedWidth]="true"></fa-icon>
                  <span jhiTranslate="global.menu.account.passwordDescription">Change password</span>
                </a>
              </li> -->

              <li ngbDropdownItem class="col-12">
                <a
                  routerLink="account/achievements"
                  routerLinkActive="active"
                  style="color: #212529; word-wrap: break-word"
                  (click)="collapseNavbar()"
                >
                  <fa-icon icon="award" [fixedWidth]="true"></fa-icon>
                  <span jhiTranslate="global.menu.account.achievements">Achievements</span>
                </a>
              </li>

              <li ngbDropdownItem class="col-12">
                <a routerLink="" (click)="logout()" id="logout" style="color: #212529">
                  <fa-icon icon="sign-out-alt" [fixedWidth]="true"></fa-icon>
                  <span jhiTranslate="global.menu.account.logout">Sign out</span>
                </a>
              </li>
            </div>
          </div>
        </ul>
      </li>
      <!--  end login -->
      <!-- help -->
      <li
        ngbDropdown
        class="nav-item dropdown pointer"
        display="dynamic"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
      >
        <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);">
          <svg
            aria-hidden="true"
            focusable="false"
            data-prefix="far"
            data-icon="question-circle"
            class="svg-inline--fa fa-question-circle fa-w-16"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
          >
            <path
              fill="currentColor"
              d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
            ></path>
          </svg>
          <span jhiTranslate="global.menu.help">Help</span>
        </a>
        <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="help-menu" style="left: auto; right: 0">
          <li ngbDropdownItem>
            <a class="dropdown-item" routerLink="pages/{{ translateService.currentLang }}/helpStart" (click)="collapseNavbar()">
              <fa-icon icon="question-circle"></fa-icon><span jhiTranslate="global.menu.helpEntry.helpPages">Erste Hilfe Seite</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>