<h2 mat-dialog-title translate>Attaching to drive</h2>
<div id="selected-room-title">
  <mat-icon>folder</mat-icon><span>{{ drive.path.split("\\").pop() }}</span>
</div>

<div id="content" *ngIf="!selectedRoom || !selectedRoom.isValid">
  <div translate class="content-header">
    Choose a room from the following list.
  </div>
  <div id="room-attach" *ngIf="availableRooms.length > 0">
    <mat-list>
      <mat-list-item
        class="room-row"
        [ngClass]="{
          selected: room == selectedRoom,
          disabled: !room.isValid
        }"
        *ngFor="let room of availableRooms"
        (click)="setSelected(room)"
      >
        <div
          mat-line
          [matTooltip]="
            (room.isValid ? '' : 'Room has active drive') | translate
          "
        >
          <span class="one-row-title">
            <app-avatar [blob]="room.avatar"></app-avatar
            ><span>{{ room.name }}</span>
          </span>
        </div>
      </mat-list-item>
    </mat-list>
  </div>
  <div *ngIf="availableRooms.length == 0" translate>
    No rooms available for selection.
  </div>
</div>
<div id="content" *ngIf="selectedRoom && selectedRoom.isValid">
  <div id="permission-header" class="content-header">
    <mat-icon>subdirectory_arrow_right</mat-icon>
    <span class="one-row-title">
      <app-avatar [blob]="selectedRoom.avatar"></app-avatar
      ><span>{{ selectedRoom.name }}</span>
    </span>
  </div>
  <div id="anonymous-attention" *ngIf="selectedRoomAllowAnonymous">
    <mat-icon class="primary" [inline]="true">warning</mat-icon>
    <span translate>Anonymous access is enabled in this room!</span>
  </div>
  <div id="member-permission-container">
    <div id="member-permission">
      <div *ngFor="let roomMember of selectedRoomMembers" class="member">
        <ng-container *ngIf="roomMember.permissions.isActive">
          <div>
            <div class="user">
              <app-avatar
                [accountAvatarRecord]="roomMember.avatar"
              ></app-avatar>
              <span class="avatarname">{{ roomMember.avatar.avatarName }}</span>
            </div>
          </div>
          <div class="chips">
            <mat-chip-list>
              <mat-chip
                color="primary"
                selected
                *ngIf="roomMember.permissions.isAdmin"
                >Admin</mat-chip
              >
              <mat-chip
                color="primary"
                selected
                *ngIf="
                  !roomMember.permissions.isAdmin &&
                  roomMember.permissions.canWriteDrive
                "
                >Full Access</mat-chip
              >
              <mat-chip
                *ngIf="
                  !roomMember.permissions.isAdmin &&
                  !roomMember.permissions.canWriteDrive &&
                  roomMember.permissions.canUploadDrive
                "
                >Upload Only</mat-chip
              >
              <mat-chip
                *ngIf="
                  !roomMember.permissions.isAdmin &&
                  !roomMember.permissions.canWriteDrive &&
                  !roomMember.permissions.canUploadDrive
                "
                >Read Only</mat-chip
              >
            </mat-chip-list>
          </div>
        </ng-container>
      </div>
    </div>
  </div>
</div>

<div
  id="attached-drive-attention"
  *ngIf="selectedRoom && !selectedRoom.isValid"
>
  <mat-icon class="primary" [inline]="true">warning</mat-icon
  ><span translate
    >The selected room already has an attached active drive.</span
  >
</div>

<mat-dialog-actions align="end">
  <button mat-button (click)="cancel()" *ngIf="!selectedRoom">
    <span translate>Cancel</span>
  </button>
  <button mat-button (click)="selectedRoom = null" *ngIf="selectedRoom">
    <span translate>Back</span>
  </button>
  <button
    mat-button
    color="primary"
    [disabled]="!(selectedRoom && selectedRoom.isValid)"
    (click)="attachRoom(selectedRoom)"
  >
    <span translate>Attach to room</span>
  </button>
</mat-dialog-actions>
