<div>
  <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start space-around">
    <div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill>
      <button mat-raised-button color="primary" (click)="getSessionId()">GET SESSIONID</button>
    </div>
    <div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill>
      <button mat-raised-button color="primary" (click)="getToken()" [disabled]="getTokenDisabled()">GET TOKEN</button>
    </div>
    <div fxLayout="column" fxFlex="10" fxFlexAlign="center" fxFill>
      <button mat-raised-button color="warn" (click)="cleanAllSessions()" [disabled]="data.length == 0">CLEAN</button>
    </div>
  </div>

  <div>
    <h3>Session Properties</h3>
    <table>
      <tr>
        <th>Recording Mode</th>
        <th>Default Recording Layout</th>
        <th *ngIf="this.selectedDefaultRecordingLayout === 'CUSTOM'">Default Custom Layout</th>
        <th>Media Mode</th>
        <th>Custom sessionId</th>
      </tr>
      <tr id="tr-session-properties">
        <td>
          <mat-select placeholder="RecordingMode" [(ngModel)]="selectedRecordingMode">
            <mat-option *ngFor="let recordingMode of recordingModes" [value]="recordingMode">
              {{ recordingMode }}
            </mat-option>
          </mat-select>
        </td>
        <td>
          <mat-select placeholder="DeafaultRecordingLayout" [(ngModel)]="selectedDefaultRecordingLayout">
            <mat-option *ngFor="let defaultRecordingLayout of defaultRecordingLayouts" [value]="defaultRecordingLayout">
              {{ defaultRecordingLayout }}
            </mat-option>
          </mat-select>
        </td>
        <td *ngIf="this.selectedDefaultRecordingLayout === 'CUSTOM'">
          <mat-form-field id="default-custom-layout-field">
            <input matInput placeholder="Custom Layout" [(ngModel)]="customLayout">
          </mat-form-field>
        </td>
        <td>
          <mat-select placeholder="MediaMode" [(ngModel)]="selectedMediaMode">
            <mat-option *ngFor="let mediaMode of mediaModes" [value]="mediaMode">
              {{ mediaMode }}
            </mat-option>
          </mat-select>
        </td>
        <td>
          <mat-form-field id="custom-session-id">
            <input matInput placeholder="Custom sessionId" [(ngModel)]="customSessionId">
          </mat-form-field>
        </td>
      </tr>
    </table>
  </div>

  <hr style="margin: 30px 0 30px 0">

  <div id="table-row" fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start">
    <div fxLayout="column" fxFlex="65" fxFlexAlign="start" fxFill>
      <table class="api-rest-table">
        <tr>
          <th *ngIf="this.data.length > 1">Selection</th>
          <th class="first-col">Session IDs</th>
          <th>Tokens</th>
        </tr>
        <tr *ngFor="let sid of this.data; let ind = index">
          <td *ngIf="this.data.length > 1" style="text-align: center">
                <mat-radio-button [checked]="selectedRadioIndex === ind" (click)="selectedRadioIndex = ind" name="sidOption"></mat-radio-button>
          </td>
          <td class="first-col">
            <mat-card [style.background]="getBackgroundColor(ind)">{{sid[0]}}</mat-card>
          </td>
          <td>
            <mat-card *ngIf="sid[1].length > 0" [style.background]="getBackgroundColor(ind)" style="max-width: 700px">
              <p *ngFor="let token of sid[1]" style="word-wrap: break-word">{{token}}</p>
            </mat-card>
          </td>
        </tr>
      </table>
    </div>
    <div fxLayout="column" fxFlex="35" fxFlexAlign="start" fxFill>
      <table>
        <tr>
          <th>OpenVidu Role</th>
          <th>Server data</th>
        </tr>
        <tr id="tr-token-options" *ngIf="data.length > 0">
          <td>
            <mat-select placeholder="OpenVidu Role" [(ngModel)]="selectedRole">
              <mat-option *ngFor="let role of openViduRoles" [value]="role">
                {{ role }}
              </mat-option>
            </mat-select>
          </td>
          <td>
            <mat-form-field id="server-data-field">
              <input matInput placeholder="Server Data" [(ngModel)]="serverData">
            </mat-form-field>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>
