<div>
  <div>
    <div id="nano-manager-page">
      <div id="nano-details">
        <h1 translate>Nano Client manager</h1>
        <div id="nano-client-details-click-trap" *ngIf="showSideBar" (click)="showSideBar=false;"></div>
        <div>
          <p translate *ngIf="outOfDateNano"><mat-icon color="primary" [inline]="true">warning</mat-icon> One or more of your Nano clients are out of date. Please make sure to download and update the out of date Nanos on their host machines. You can download the latest Nano Client from our <a [href]="websiteDownloadPage" translate>downloads</a> page.</p>
          <br />
        </div>
        <div *ngIf="!selectedNanoClient">
          <p translate>Download your Nano client from <a target="_blank" [href]="websiteDownloadPage" translate>here</a>.</p>
          <p translate>You need an active Nano license for the Nano client to work properly. Check the status of your licenses at the <a translate routerLink="/licenses">licenses</a> page.</p>
          <p translate>On this page you can remotely edit your running Nano clients.</p>
          <p translate>Edit Nano client settings like:</p>
          <ul>
            <li translate>Client name and anonymous access</li>
            <li translate>Create and delete Drives</li>
            <li translate>Attach/detach Drives to/from Rooms</li>
          </ul>
          <p translate>For more help, check out the <a target="_blank" [href]="'https://www.clarabot.info/nano/en/webapp-guide/client/' | translate" translate>online documentation</a> for more information about using the Nano manager.</p>
        </div>
        <div *ngIf="selectedNanoClient">
          <div id="nano-client-name-row">
            <input id="newNanoNameInput" class="nano-input" type="text" [(ngModel)]="newNanoName" />
            <button [disabled]="newNanoName == selectedNanoClient.detail.name" mat-icon-button (click)="editName()">
              <mat-icon [class]="{primary: newNanoName != selectedNanoClient.detail.name}">save</mat-icon>
            </button>
          </div>
          <div translate>
            Client valid until:
            <span>{{ selectedNanoClient.expiration * 1000 | date: "longDate" }}</span>
          </div>
          <div id="nano-anonymous-access-row">
            <mat-checkbox [checked]="selectedNanoClient.detail.remoteConfig.deny_anonymous" labelPosition="before" color="primary" (change)="setAnonymous($event.checked)">
              <span translate>Reject 'Allow anonymous' setting for all rooms:</span>
            </mat-checkbox>
            <mat-icon [matTooltip]="'This overrides the anonymous access setting of all connected rooms.' | translate">info</mat-icon>
          </div>
          <div id="admin-password-change-row">
            <button mat-raised-button color="primary" (click)="openChangeAdminPasswordDialog()">
              <span translate>Change admin password</span>
            </button>
          </div>
          <div id="drives-list-title">
            <h2 translate>Drives</h2>
          </div>
          <div id="drive-list">
            <div class="drive-row" *ngFor="let drive of selectedNanoClient.detail.remoteConfig.drives">
              <div class="drive-title-row">
                <mat-icon>folder</mat-icon>
                <span><span [matTooltip]="drive.path" [matTooltipPosition]="'right'">{{getTopLevelFolderName(drive.path)}}</span></span>
                <mat-icon color="primary" (click)="copyMessage(drive.path)" [matTooltip]="'Copy drive path' | translate">content_copy</mat-icon>
                <mat-icon color="primary" (click)="deleteDrive(drive)" [matTooltip]="'Delete drive' | translate">delete</mat-icon>
              </div>
              <div class="drive-room-row" *ngFor="let room of drive.roomDetails">
                <span class="drive-room-title" *ngIf="room.isValid; else roomErrorBlock"><app-avatar [blob]="room.avatar"></app-avatar>{{room.name}}</span>
                <ng-template #roomErrorBlock><span class="warn">{{room.id}} (deleted room)</span></ng-template>
                <div class="mdi mdi-book-remove-multiple" [matTooltip]="'Remove room' | translate" (click)="removeRoomFromDrive(drive, room)"></div>
              </div>
              <div class="drive-room-new-row" translate (click)="openAttachRoomDialog(drive)">
                + Attach room
              </div>
            </div>
            <div class="drive-new" translate (click)="openNewDriveDialog()">
              + Create Drive
            </div>
          </div>
        </div>
      </div>

      <div id="nano-client-side-panel" [ngClass]="{'showSideBar': showSideBar}">
        <ng-container *ngIf="!sidebarReady">
          <mat-spinner id="nano-clients-spinner" diameter="40"></mat-spinner>
        </ng-container>
        <ng-container *ngIf="sidebarReady">
          <ng-container *ngIf="!hasLicense">
            <div id="no-license-container">
              <p translate>It seems like you have no active licenses set up.</p>
              <p translate>Go to the <a translate routerLink="/licenses">licenses</a> page to see the status of your current licenses.</p>
            </div>
          </ng-container>
          <ng-container *ngIf="hasLicense">
            <div id="nano-client-side-panel-click-trap" *ngIf="!showSideBar" (click)="showSideBar=true;"></div>
            <div id="nano-client-search-row">
              <!-- <mat-icon class="icon-size">search</mat-icon>
              <input id="nano-client-filter-input" type="text" class="nano-input" [(ngModel)]="nanoClientFilter" (input)="filterInput()" /> -->
              <mat-icon class="sidebar-indicator" [ngClass]="{'open': showSideBar}" (click)="showSideBar=!showSideBar;">chevron_left</mat-icon>
              <mat-icon class="icon-size" (click)="getNanoClients()">refresh</mat-icon>
              <mat-icon class="no-show">chevron_left</mat-icon>
            </div>
            <div id="nano-client-list">
              <ul>
                <li *ngFor="let nanoClient of filteredNanoClients" [ngClass]="{ selectable: nanoClient.detail, selected: nanoClient === selectedNanoClient }" (click)="selectNanoClient(nanoClient)">
                  <ng-container *ngIf="nanoClient.detail">
                    <span class="nano-client-row" [matTooltip]="isNanoUpToDate(nanoClient) ? nanoClient.detail?.name : ('Nano Client version out of date' | translate)">
                      <span *ngIf="isNanoUpToDate(nanoClient); else outOfDateBlock" class="mdi mdi-server icon-size"></span>
                      <ng-template #outOfDateBlock><span class="mdi mdi-alert icon-size primary"></span></ng-template>
                      <span class="nano-client-name">{{ nanoClient.detail?.name }}</span>
                    </span>
                  </ng-container>
                  <ng-container *ngIf="!nanoClient.detail">
                    <ng-container *ngIf="nanoClient.occupiedSlot">
                      <span class="nano-client-row" [matTooltip]="getLastActiveDate(nanoClient)">
                        <span class="mdi mdi-square-rounded icon-size"></span>
                        <span class="nano-client-name" translate>Occupied slot</span>
                      </span>
                    </ng-container>
                    <ng-container *ngIf="!nanoClient.occupiedSlot">
                      <span class="nano-client-row">
                        <span class="mdi mdi-square-rounded-outline icon-size"></span>
                        <span translate>Empty slot</span>
                      </span>
                    </ng-container>
                  </ng-container>
                </li>
              </ul>
            </div>
            <div id="overflow-alert" *ngIf="waitingNanoClients > 0" [matTooltip]="'Estimation may be incorrect depending on Nano client communication speed' | translate">
              <mat-icon color="primary">report_gmailerrorred</mat-icon>
              <div translate>Waiting Nanos: <span>{{ waitingNanoClients }}</span></div>
            </div>
          </ng-container>
        </ng-container>
      </div>
    </div>
  </div>
</div>