<div class="row">
  <ng-container *ngIf="attendeeService.getMemberGroups().length === 1; else attendeesByGroup">
    <div class="col-12">
      <ng-container *ngIf="!attendeeService.attendees.length">
        <h3 class="text-center text-light center-top d-flex align-self-center justify-content-center">{{'component.lobby.waiting_for_players' | translate}}</h3>
      </ng-container>
      <div *ngFor="let elem of attendeeService.attendees"
           class="mb-1 col-sm-4 col-md-3">
        <div [id]="elem.id"
             (click)="currentQuizService.isOwner ? openKickMemberModal(removeMemberModal, elem.name) : return"
             class="member-wrapper"
             [class.pointer]="currentQuizService.isOwner"
             [class.own-nick]="attendeeService.isOwnNick(elem.name)"
             [style.color]="'#' + sanitizeHTML(transformForegroundColor(hexToRgb(elem.colorCode)))"
             [style.background-color]="'#' + sanitizeHTML(elem.colorCode)">
          <p class="mb-0 text-center"
             [innerHTML]="parseNickname(elem.name)"></p>
        </div>
      </div>
    </div>
  </ng-container>
</div>

<app-audio-player *ngIf="currentQuizService.isOwner && currentQuizService.quiz.sessionConfig?.music.enabled.lobby"
                  [original_volume]="currentQuizService.quiz.sessionConfig.music.volumeConfig.useGlobalVolume ? currentQuizService.quiz.sessionConfig.music.volumeConfig.global : currentQuizService.quiz.sessionConfig.music.volumeConfig.lobby"
                  [autostart]="true"
                  [target]="'lobby'"
                  [src]="currentQuizService.quiz.sessionConfig.music.titleConfig.lobby"></app-audio-player>

<ngx-qrcode [qrc-value]="qrCodeContent"
            qrc-class="qrCodeContent position-absolute"
            qrc-errorCorrectionLevel="L"
            qrc-element-type="img"
            class="justify-content-center align-items-center qr-code-element"
            [class.d-flex]="showQrCode"
            [class.d-none]="!showQrCode">
</ngx-qrcode>

<ng-template #attendeesByGroup>
  <div class="col-12 col-sm-6"
       *ngFor="let group of attendeeService.getMemberGroups()">
    <div class="pb-4">
      <h4 class="text-light">Team {{group}}</h4>
      <ng-container *ngIf="!attendeeService.getMembersOfGroup(group).length">
        <span class="text-light attendee-text">{{'component.lobby.waiting_for_players' | translate}}</span>
      </ng-container>
      <div *ngFor="let elem of attendeeService.getMembersOfGroup(group)"
           (click)="currentQuizService.isOwner ? openKickMemberModal(removeMemberModal, elem.name) : return"
           [class.pointer]="currentQuizService.isOwner"
           class="d-inline-flex mw-100 mr-3">
        <i [id]="elem.id"
           class="member-wrapper px-1 py-1 fas fa-user fa-2x"
           [class.own-nick]="attendeeService.isOwnNick(elem.name)"
           [style.background-color]="'#' + sanitizeHTML(transformForegroundColor(hexToRgb(elem.colorCode)))"
           [style.color]="'#' + sanitizeHTML(elem.colorCode)">
        </i>
        <p class="ml-2 attendee-text text-light text-truncate"
           [innerHTML]="parseNickname(elem.name)"></p>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #removeMemberModal
             let-c="close"
             let-d="dismiss">
  <div class="modal-header">
    <button type="button"
            class="close pointer"
            data-dismiss="modal"
            aria-label="Close"
            (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>

  </div>

  <div class="modal-body">
    <p class="d-inline-flex"
       [innerHTML]="'component.lobby.kick_member_confirmation' | translate:{NAME: parseNickname(_nickToRemove)}"></p>
  </div>

  <div class="modal-footer">
    <button type="button"
            class="btn btn-danger pointer mr-auto"
            data-dismiss="modal"
            (click)="kickMember(_nickToRemove)"
            [innerHTML]="'global.yes' | translate"></button>

    <button type="button"
            class="btn btn-secondary pointer"
            data-dismiss="modal"
            (click)="d()"
            [innerHTML]="'global.no' | translate"></button>

  </div>
</ng-template>
