<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" appShowUserInfo [accountAvatarRecord]="roomMember.avatar">
              <app-avatar [accountAvatarRecord]="roomMember.avatar"></app-avatar>
              <span class="avatarname">
                <span *ngIf="!roomMember.avatar.deleted">{{ roomMember.avatar.avatarName }}</span
                ><span class="data-error" *ngIf="roomMember.avatar.deleted" translate>Deleted user</span>
              </span>
            </div>
          </div>
          <div class="chips">
            <mat-chip-listbox>
              <mat-chip-option color="primary" selected *ngIf="roomMember.permissions.isAdmin">Admin</mat-chip-option>
              <mat-chip-option color="primary" selected *ngIf="!roomMember.permissions.isAdmin && roomMember.permissions.canWriteDrive">Full Access</mat-chip-option>
              <mat-chip-option *ngIf="!roomMember.permissions.isAdmin && !roomMember.permissions.canWriteDrive && roomMember.permissions.canUploadDrive">Upload Only</mat-chip-option>
              <mat-chip-option *ngIf="!roomMember.permissions.isAdmin && !roomMember.permissions.canWriteDrive && !roomMember.permissions.canUploadDrive">Read Only</mat-chip-option>
            </mat-chip-listbox>
          </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>
