<header id="uiMainHeader" class="shadow-lg">

  <nav class="navbar navbar-dark bg-dark">

    <ul class="navbar-nav">

      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/events">
          <i class="fas fa-terminal">
            <span *ngIf="counters.events > 0" class="badge badge-pill badge-danger">{{ counters.events }}</span>
          </i>
          <span class="nav-text">Events</span>
        </a>
      </li>

      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" [class.text-muted]="!api.module('net.recon').running" routerLink="/lan">
          <i class="fa fa-network-wired">
            <span *ngIf="counters.hosts > 0" class="badge badge-pill badge-danger">{{ counters.hosts }}</span>
          </i>
          <span class="nav-text">LAN</span>
        </a>
      </li>

      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" [class.text-muted]="!api.module('wifi').running" routerLink="/wifi">
          <i class="fa fa-wifi">
            <span *ngIf="counters.aps > 0" class="badge badge-pill badge-danger">{{ counters.aps }}</span>
          </i>
          <span class="nav-text">WiFi</span>
        </a>
      </li>

      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" [class.text-muted]="!api.module('ble.recon').running" routerLink="/ble">
          <i class="fab fa-bluetooth-b">
            <span *ngIf="counters.ble > 0" class="badge badge-pill badge-danger">{{ counters.ble }}</span>
          </i>
          <span class="nav-text">BLE</span>
        </a>
      </li>

      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" [class.text-muted]="!api.module('hid').running" routerLink="/hid">
          <i class="fa fa-keyboard">
            <span *ngIf="counters.hid > 0" class="badge badge-pill badge-danger">{{ counters.hid }}</span>
          </i>
          <span class="nav-text">HID</span>
        </a>
      </li>

      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" [class.text-muted]="!api.module('can').running" routerLink="/can">
          <i class="fa fa-car">
            <span *ngIf="counters.can > 0" class="badge badge-pill badge-danger">{{ counters.can }}</span>
          </i>
          <span class="nav-text">CAN</span>
        </a>
      </li>

      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" [class.text-muted]="!api.module('gps').running" routerLink="/gps">
          <i class="fas fa-globe-europe">
            <span *ngIf="counters.gps > 0" class="badge badge-pill badge-danger">
              <i class="fas fa-satellite"></i>
              {{ counters.gps }}
            </span>
          </i>
          <span class="nav-text">GPS</span>
        </a>
      </li>

      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/caplets">
          <i class="fas fa-scroll">
            <span *ngIf="counters.caplets > 0" class="badge badge-pill badge-danger">{{ counters.caplets }}</span>
          </i>
          <span class="nav-text">Caplets</span>
        </a>
      </li>

      <li class="nav-item" *ngFor="let mod of api.settings.pinned.modules | keyvalue" routerLinkActive="active">
        <a class="nav-link pinned" [class.text-muted]="!api.module(mod.key).running"
          routerLink="/advanced/{{ mod.key }}" ngbTooltip="{{ api.module(mod.key).description }}" placement="bottom">
          <i class="fa fa-{{ mod.key | modicon }}"></i>
          <span class="nav-text">{{ mod.key }}</span>
        </a>
      </li>

      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/advanced">
          <i class="fa fa-cogs">
            <span *ngIf="counters.running > 0" class="badge badge-pill badge-danger">{{ counters.running }}</span>
          </i>
          <span class="nav-text">Advanced</span>
        </a>
      </li>

      <li class="nav-item right">
        <a style="cursor:pointer" class="nav-link" (click)="logout()">
          <i class="fas fa-sign-out-alt"></i>
          <span class="nav-text">Logout</span>
        </a>
      </li>

      <li *ngIf="!api.settings.omnibar" class="nav-item right">
        <a class="nav-link" style="cursor:pointer" (click)="api.settings.omnibar = !api.settings.omnibar">
          <i class="fas fa-bars"></i>
          <span class="nav-text">Omnibar</span>
        </a>
      </li>

      <li *ngIf="rest.state.recording" class="nav-item right replayDate">
        <span class="badge badge-pill badge-danger">
          <i class="fas fa-video" style="margin-right:3px"></i>
          recording
        </span>
      </li>

      <li *ngIf="rest.state.replaying" class="nav-item right replayDate">
        <span class="badge badge-pill badge-danger">
          <i class="fas fa-video" style="margin-right:3px"></i>
          {{ api.session.polled_at | date:'medium' }}
        </span>
      </li>

    </ul>

  </nav>

  <omnibar></omnibar>
</header>

<div *ngIf="sessionError" id="sessionError">
  <div class="alert alert-danger" role="alert">
    <h5 class="alert-heading">ERROR</h5>
    <p class="mb-0">
      {{ sessionError.message }}
    </p>
  </div>
</div>

<div *ngIf="api.settings.Warning()" id="sslWarning" style="margin: 0.8rem">
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    <h5 class="alert-heading">WARNING</h5>
    <p class="mb-0">
      {{ api.settings.URL() }} is using an <strong>insecure connection</strong>, refer to <a
        href="https://www.bettercap.org/modules/core/api.rest/#parameters" target="_blank">the documentation</a> to
      configure the api.rest module to use SSL.<br />
    </p>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</div>

<div id="commandError" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="commandErrorTitle">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header error-header">
        <div class="modal-title error-title" id="commandErrorTitle">
          <h5>Error</h5>
        </div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body error-body" *ngIf="commandError">
        <i class="fas fa-exclamation-triangle" style="font-size:4rem; width: 100%; text-align:center"></i>
        <br />
        <br />
        {{ commandError.error | unbash }}
      </div>
    </div>
  </div>
</div>