<nav class="navbar navbar-header flex-nowrap"
     id="header">
  <div class="arsnova-logo d-flex align-items-center pointer">
    <!--suppress HtmlUnknownAttribute -->
    <svg [routerLink]="['/']" version="1.1" id="arsnova-logo-image" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" viewBox="0 0 1024 1024" xml:space="preserve">
        <!--suppress HtmlUnknownAttribute -->
        <g id="text">
          <text transform="translate(512 200)" class="arsnova-logo-origin" [innerHTML]="origin"></text>
          <text transform="matrix(1 0 0 1 69 500)" class="arsnova-logo-ars">ars</text>
          <text transform="matrix(1 0 0 1 420 500)" class="arsnova-logo-nova">nova</text>
          <text transform="matrix(1 0 0 1 512 820)" class="arsnova-logo-click">.click</text>
        </g>
      </svg>
  </div>
  <div class="header-title d-flex align-items-center">
    <div class="center-block">
      <div class="text-center header-label"
           *ngIf="headerLabelService.headerLabel !== 'default'"
           [innerHTML]="headerLabelService.headerLabel | translate"></div>
    </div>
  </div>
  <div class="text-right d-flex align-items-center pointer"
       id="connectionQualityHeader"
       role="dialog">
    <svg id="connectionQualityImage"
           height="50px"
           width="50px"
           [style.fill]="generateConnectionQualityColor()"
           (click)="openConnectionQualityModal(connectionQualityModal)"
           viewBox="0 0 128 128"
           version="1.1"
           xml:space="preserve"
           xmlns="http://www.w3.org/2000/svg">
          <g>
              <g>
                  <path id="firstRow"     d="M73.143,79.904c-2.585-1.189-5.692-2.014-9.139-2.01c-3.446-0.004-6.553,0.82-9.137,2.01            c-2.609,1.201-4.702,2.736-6.365,4.236l8.505,8.506c0.894-0.744,1.919-1.426,3.031-1.912c1.199-0.52,2.473-0.836,3.965-0.84      c1.564,0.004,2.891,0.352,4.139,0.918c1.047,0.475,2.007,1.137,2.855,1.842l8.515-8.514c-0.008-0.008-0.016-0.016-0.023-0.021       C77.832,82.629,75.736,81.096,73.143,79.904z"></path>
                  <path id="secondRow"    d="M80.057,62.309c-4.579-2.104-9.994-3.537-16.047-3.533c-6.053-0.004-11.466,1.429-16.045,3.531      c-5.233,2.405-9.402,5.632-12.597,8.701l8.486,8.486c0.45-0.426,0.917-0.854,1.411-1.275c2.287-1.965,5.03-3.842,8.151-5.205     c3.128-1.365,6.615-2.234,10.594-2.238c4.171,0.004,7.806,0.961,11.048,2.441c3.594,1.641,6.674,3.975,9.104,6.273l8.486-8.486      c-0.391-0.375-0.793-0.752-1.213-1.131C88.422,67.166,84.645,64.413,80.057,62.309z"></path>
                  <path *ngIf="!connectionService.lowSpeed && localStorageAvailable && sessionStorageAvailable" id="thirdRow"     d="M104.078,55.731c-4.45-3.999-10.01-8.043-16.711-11.116c-6.693-3.072-14.553-5.151-23.369-5.147     c-8.815-0.003-16.674,2.074-23.366,5.145c-7.741,3.555-13.948,8.383-18.692,12.967l8.487,8.487                                  c0.602-0.578,1.22-1.156,1.874-1.734c3.733-3.307,8.295-6.542,13.581-8.925c5.294-2.384,11.29-3.937,18.116-3.94                    c6.934,0.003,13.014,1.606,18.369,4.056c6.101,2.788,11.225,6.728,15.211,10.55l8.484-8.484    C105.424,56.973,104.77,56.354,104.078,55.731z"></path>
                  <path *ngIf="!connectionService.lowSpeed && !connectionService.mediumSpeed && localStorageAvailable && sessionStorageAvailable" id="fourthRow"    d="M97.259,27.395c-9.55-4.381-20.715-7.333-33.265-7.33c-12.55-0.003-23.712,2.946-33.26,7.325        c-9.341,4.287-17.149,9.901-23.464,15.519l8.502,8.502c5.602-4.907,12.416-9.71,20.346-13.286                                   c8.119-3.658,17.374-6.056,27.876-6.06c10.668,0.003,20.053,2.479,28.266,6.239c7.766,3.553,14.46,8.291,19.973,13.117              l8.498-8.498C114.414,37.307,106.601,31.678,97.259,27.395z"></path>
              </g>
              <circle id="circleRow" cx="64.008" cy="102.109" r="5.825"></circle>
          </g>
    </svg>
  </div>
</nav>

<ng-template #connectionQualityModal
             let-c="close"
             let-d="dismiss">
  <div class="modal-header">
    <h5 class="modal-title"
        id="exampleModalLabel"
        [innerHTML]="'region.header.connection_status.title' | translate"></h5>
    <button type="button"
            class="close pointer"
            data-dismiss="modal"
            aria-label="Close"
            (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <ul class="p-0 list-unstyled">
      <li>
        <i class="fas"
           [class.fa-check-square]="connectionService.serverAvailable"
           [class.text-success]="connectionService.serverAvailable"
           [class.fa-times]="!connectionService.serverAvailable"
           [class.text-danger]="!connectionService.serverAvailable"
           data-fa-transform="shrink-5"
           data-fa-mask="fas fa-square"></i>
        <p class="ml-2 mb-0 d-inline">
          <span>Server: </span>
          <span *ngIf="connectionService.serverAvailable">{{'region.header.connection_status.server_status.available' | translate}}</span>
          <span *ngIf="!connectionService.serverAvailable">{{'region.header.connection_status.server_status.not_available' | translate}}</span>
        </p>
      </li>
      <li>
        <i class="fas"
           [class.fa-check-square]="connectionService.websocketAvailable"
           [class.text-success]="connectionService.websocketAvailable"
           [class.fa-times]="!connectionService.websocketAvailable"
           [class.text-danger]="!connectionService.websocketAvailable"
           data-fa-transform="shrink-5"
           data-fa-mask="fas fa-square"></i>
        <p class="ml-2 mb-0 d-inline">
          <span>Websocket: </span>
          <span *ngIf="connectionService.websocketAvailable">{{'region.header.connection_status.websocket_status.connected' | translate}}</span>
          <span *ngIf="!connectionService.websocketAvailable">{{'region.header.connection_status.websocket_status.not_connected' | translate}}</span>
        </p>
      </li>
      <li>
        <i class="fas"
           [class.fa-check-square]="localStorageAvailable"
           [class.text-success]="localStorageAvailable"
           [class.fa-times]="!localStorageAvailable"
           [class.text-danger]="!localStorageAvailable"
           data-fa-transform="shrink-5"
           data-fa-mask="fas fa-square"></i>
        <p class="ml-2 mb-0 d-inline">
          <span>LocalStorage: </span>
          <span *ngIf="localStorageAvailable">{{'region.header.connection_status.localStorage_status.writable' | translate}}</span>
          <span *ngIf="!localStorageAvailable">{{'region.header.connection_status.localStorage_status.non_writable' | translate}}</span>
        </p>
      </li>
      <li>
        <i class="fas"
           [class.fa-check-square]="sessionStorageAvailable"
           [class.text-success]="sessionStorageAvailable"
           [class.fa-times]="!sessionStorageAvailable"
           [class.text-danger]="!sessionStorageAvailable"
           data-fa-transform="shrink-5"
           data-fa-mask="fas fa-square"></i>
        <p class="ml-2 mb-0 d-inline">
          <span>SessionStorage: </span>
          <span *ngIf="sessionStorageAvailable">{{'region.header.connection_status.sessionStorage_status.writable' | translate}}</span>
          <span *ngIf="!sessionStorageAvailable">{{'region.header.connection_status.sessionStorage_status.non_writable' | translate}}</span>
        </p>
      </li>
      <li>
        <i class="fas"
           [class.fa-check-square]="connectionService.rtt < 300 && connectionService.serverAvailable"
           [class.text-success]="connectionService.rtt < 300 && connectionService.serverAvailable"
           [class.fa-times]="connectionService.rtt > 300 || !connectionService.serverAvailable"
           [class.text-danger]="connectionService.rtt > 300 || !connectionService.serverAvailable"
           data-fa-transform="shrink-5"
           data-fa-mask="fas fa-square"></i>
        <p class="ml-2 mb-0 d-inline">
          <span>Round-Trip-Time: </span>
          <span *ngIf="connectionService.serverAvailable">{{connectionService.rtt}} ms</span>
          <span *ngIf="!connectionService.serverAvailable">{{'region.header.connection_status.server_status.not_available' | translate}}</span>
        </p>
      </li>
    </ul>
  </div>
  <div class="modal-footer">
    <button type="button"
            class="btn btn-secondary pointer"
            data-dismiss="modal"
            (click)="d()"
            [innerHTML]="'global.close_window' | translate"></button>
  </div>
</ng-template>
