<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="!selectedNanoSlot">
          <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="selectedNanoSlot">
          <div id="nano-client-name-row">
            <input id="newNanoNameInput" class="nano-input" type="text" [(ngModel)]="newNanoName" />
            <button [disabled]="newNanoName === selectedNanoSlot.detail.name" mat-icon-button (click)="editName()">
              <mat-icon [class]="{ primary: newNanoName !== selectedNanoSlot.detail.name }">save</mat-icon>
            </button>
          </div>
          <div translate>
            Client valid until:
            <span>{{ selectedNanoSlot.expiration * 1000 | date: 'longDate' }}</span>
          </div>
          <div id="nano-anonymous-access-row">
            <mat-checkbox [checked]="selectedNanoSlot.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 #tooltipAnonymousAccess="matTooltip" (click)="tooltipAnonymousAccess.toggle()" [matTooltip]="'This overrides the anonymous access setting of all connected rooms.' | translate"
              >info</mat-icon
            >
          </div>
          <div id="nano-require-explicit-peer-trust-row" *ngIf="isOnlyTrustedUsersFeatureAvailable">
            <mat-checkbox [checked]="selectedNanoSlot.detail.remoteConfig.require_explicit_peer_trust" labelPosition="before" color="primary" (change)="setRequireExplicitPeerTrust($event.checked)">
              <span translate>Require explicit peer trust:</span>
            </mat-checkbox>
            <mat-icon [matTooltip]="'Only peers that you have explicitly trusted can interact with the Nano from any room. This is not applicable to anonymous peers.' | 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 selectedNanoSlot.detail.remoteConfig.drives">
              <div class="drive-title-row">
                <mat-icon>folder</mat-icon>
                <span
                  ><span #tooltipFolderName="matTooltip" (click)="tooltipFolderName.toggle()" [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="nano-client-side-panel-click-trap" *ngIf="!showSideBar" (click)="showSideBar = true"></div>
            <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 matRipple [matRippleUnbounded]="true" [matRippleCentered]="true" class="sidebar-indicator" [ngClass]="{ open: showSideBar }" (click)="showSideBar = !showSideBar"
                >chevron_left</mat-icon
              >
              <mat-icon matRipple [matRippleUnbounded]="true" [matRippleCentered]="true" class="icon-size" (click)="getNanoSlots()">refresh</mat-icon>
              <mat-icon matRipple [matRippleUnbounded]="true" [matRippleCentered]="true" class="no-show">chevron_left</mat-icon>
            </div>
            <div id="nano-client-list">
              <ul>
                <li
                  *ngFor="let nanoSlot of filteredNanoSlots"
                  [ngClass]="{ selectable: nanoSlot.detail, selected: nanoSlot === selectedNanoSlot, etalonSlot: nanoSlot.isEtalonSlot }"
                  (click)="selectNanoSlot(nanoSlot)"
                >
                  <ng-container *ngIf="nanoSlot.detail">
                    <span matRipple class="nano-client-row" [matTooltip]="isNanoUpToDate(nanoSlot) ? nanoSlot.detail?.name : ('Nano Client version out of date' | translate)">
                      <span *ngIf="isNanoUpToDate(nanoSlot); 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">{{ nanoSlot.detail?.name }}</span>
                    </span>
                  </ng-container>
                  <ng-container *ngIf="!nanoSlot.detail">
                    <ng-container *ngIf="nanoSlot.occupiedSlot">
                      <span class="nano-client-row" [matTooltip]="getLastActiveDate(nanoSlot)">
                        <span class="mdi mdi-square-rounded icon-size"></span>
                        <span class="nano-client-name" translate>Occupied slot</span>
                      </span>
                    </ng-container>
                    <ng-container *ngIf="!nanoSlot.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="waitingNanoSlots > 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>{{ waitingNanoSlots }}</span>
              </div>
            </div>
          </ng-container>
        </ng-container>
      </div>
    </div>
  </div>
</div>
