<div class="dialog-container">
  <app-layouts-default-dialog
    [disableClose]="false"
    (closed)="onClosed($event)"
  >
    <div appLayoutsDefaultDialog="header">
      {{ 'dialog.title.newChatRoom' | ucapI18n }}
    </div>
    <div class="dialog-body" appLayoutsDefaultDialog="body">
      <mat-horizontal-stepper
        [linear]="true"
        #stepper
        [selectedIndex]="currentStep"
      >
        <mat-step label="Select room type">
          <div
            class="normal-room"
            [ngClass]="
              isTimer !== undefined && isTimer === false ? 'checked' : ''
            "
            (click)="isTimer = false"
          >
            <span class="title">{{ 'dialog.normalRoom' | ucapI18n }}</span>
            <img />
            <div
              class="description"
              [innerHTML]="
                'dialog.normalRoomDescription'
                  | ucapI18n: { maxCount: maxChatRoomUser }
              "
            ></div>
          </div>

          <div
            class="normal-room"
            [ngClass]="
              isTimer !== undefined && isTimer === true ? 'checked' : ''
            "
            (click)="isTimer = true"
          >
            <span class="title">{{ 'dialog.timerRoom' | ucapI18n }}</span>
            <img />
            <div
              class="description"
              [innerHTML]="
                'dialog.timerRoomDescription'
                  | ucapI18n: { maxCount: maxChatRoomUser }
              "
            ></div>
          </div>
        </mat-step>
        <mat-step label="Select users">
          <app-group-select-user
            [isDialog]="true"
            [checkable]="true"
            (changeUserList)="onChangeUserList($event)"
          ></app-group-select-user>
        </mat-step>
      </mat-horizontal-stepper>
    </div>
    <div appLayoutsDefaultDialog="action">
      <button mat-button (click)="onCancel(stepper)">
        {{
          (stepper.selectedIndex === 0
            ? 'dialog.button.cancel'
            : 'dialog.button.previous'
          ) | ucapI18n
        }}
      </button>
      <button
        mat-button
        *ngIf="stepper.selectedIndex === 0"
        (click)="onConfirm(stepper)"
      >
        {{ 'dialog.button.selectRoomUser' | ucapI18n }}
      </button>
      <button
        mat-button
        *ngIf="stepper.selectedIndex === 1"
        (click)="onOpenRoom(stepper)"
      >
        {{ 'dialog.button.openRoom' | ucapI18n }}
      </button>
    </div>
  </app-layouts-default-dialog>
</div>
