<div class="btn-group"
     data-toggle="buttons"
     role="group">
  <div class="btn-group active">
    <button type="button"
            aria-expanded="false"
            aria-controls="collapseExample"
            class="btn btn-info btn_panel-switcher pointer"
            (click)="openTab('panel-lobby')"
            data-target="#panel-lobby"
            data-toggle="collapse">
      <span>{{'plugins.sound.lobby_music' | translate}}</span>
    </button>
  </div>
  <div class="btn-group">
    <button type="button"
            aria-expanded="false"
            aria-controls="collapseExample"
            class="btn btn-info btn_panel-switcher pointer"
            (click)="openTab('panel-countdownRunning')"
            data-target="#panel-countdownRunning"
            data-toggle="collapse">
      <span>{{'plugins.sound.running_music' | translate}}</span>
    </button>
  </div>
  <div class="btn-group">
    <button type="button"
            aria-expanded="false"
            aria-controls="collapseExample"
            class="btn btn-info btn_panel-switcher pointer"
            (click)="openTab('panel-countdownEnd')"
            data-target="#panel-countdownEnd"
            data-toggle="collapse">
      <span>{{'plugins.sound.finish_music' | translate}}</span>
    </button>
  </div>
</div>

<datalist id="tickmarks">
  <option value="0"
          label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50"
          label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100"
          label="100%">
</datalist>

<div class="col-12 mt-5">
  <div class="row">
    <div class="col-12 col-sm-6">
      <p class="mb-0 mr-2 text-light align-self-center h-100 w-100 d-flex align-items-center justify-content-around"
         style="line-height: 1.2;">
        <span>
          <span>{{'plugins.sound.global_volume' | translate}}:&nbsp;</span>
          <span>{{config.volumeConfig.global}}&nbsp;&#37;</span>
        </span>
        <input type="range"
               list="tickmarks"
               (input)="setGlobalVolume($event)"
               [value]="config.volumeConfig.global">
      </p>
    </div>
    <div class="col-12 col-sm-6">
      <div class="col-12 mb-2 d-flex"
           [attr.data-intro]="'component.answeroptions.description.multiple_selection_survey' | translate">
        <label class="btn pointer mb-0 align-self-center"
               [class.btn-success]="config.volumeConfig.useGlobalVolume"
               [class.btn-danger]="!config.volumeConfig.useGlobalVolume">
          <input type="checkbox"
                 class="d-none"
                 id="toggle-global-volume"
                 [attr.aria-label]="'component.answeroptions.description.multiple_selection_survey' | translate"
                 autocomplete="off"
                 role="switch"
                 [checked]="config.volumeConfig.useGlobalVolume"
                 (change)="config.volumeConfig.useGlobalVolume = !config.volumeConfig.useGlobalVolume"
                 [title]="'component.answeroptions.multiple_selection_survey' | translate">
          <span *ngIf="config.volumeConfig.useGlobalVolume">{{'plugins.sound.activated' | translate}}</span>
          <span *ngIf="!config.volumeConfig.useGlobalVolume">{{'plugins.sound.deactivated' | translate}}</span>
        </label>
      </div>
    </div>
  </div>
</div>
<div class="collapse show"
     id="panel-lobby">
  <div class="card card-body border-0 mt-5">
    <div class="row">
      <div class="col-12">
        <h3>{{'plugins.sound.lobby_music_detailed' | translate }}</h3>
      </div>
      <div class="col-12 mb-2 d-flex"
           [attr.data-intro]="'component.answeroptions.description.multiple_selection_survey' | translate">
        <label class="btn pointer mb-0 align-self-center"
               [class.btn-success]="config.enabled.lobby"
               [class.btn-danger]="!config.enabled.lobby">
          <input id="toggle-lobby-music"
                 type="checkbox"
                 class="d-none"
                 [attr.aria-label]="'Activate/Deactivate Lobby Music Button'"
                 autocomplete="off"
                 role="switch"
                 [checked]="config.enabled.lobby"
                 (change)="config.enabled.lobby = !config.enabled.lobby"
                 [title]="'Activate/Deactivate Lobby Music Button'">
          <span *ngIf="config.enabled.lobby">{{'plugins.sound.active' | translate}}</span>
          <span *ngIf="!config.enabled.lobby">{{'plugins.sound.inactive' | translate}}</span>
        </label>
        <p class="mb-0 d-flex align-items-center ml-5 text-light">{{'plugins.sound.volume' | translate}}: {{config.volumeConfig.lobby}} %</p>
      </div>
      <div class="col-12 mt-5">
        <div class="row">
          <div class="col-12 col-sm-6">
            <select id="lobbySoundSelect"
                    class="rounded"
                    (change)="selectSound('lobby', $event)"
                    title="soundSelect">
              <option *ngFor="let elem of lobbySongs"
                      [selected]="config.titleConfig.lobby === elem.id"
                      [value]="elem.id">{{elem.text}}
              </option>
            </select>
          </div>
          <div class="col-12 col-sm-6">
            <!--suppress JSValidateTypes -->
            <app-audio-player [src]="config.titleConfig.lobby"
                              [target]="'lobby'"
                              id="player-lobby"
                              [original_volume]="config.volumeConfig.useGlobalVolume ? config.volumeConfig.global : config.volumeConfig.lobby"
                              (volumeChange)="config.volumeConfig.lobby = $event"></app-audio-player>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="collapse"
     id="panel-countdownRunning"
     role="tabpanel">
  <div class="card card-body border-0 mt-5">
    <div class="row">
      <div class="col-12">
        <h3>{{'plugins.sound.running_music_detailed' | translate }}</h3>
      </div>
      <div class="col-12 mb-2 d-flex"
           [attr.data-intro]="'component.answeroptions.description.multiple_selection_survey' | translate">
        <label class="btn pointer mb-0 align-self-center"
               [class.btn-success]="config.enabled.countdownRunning"
               [class.btn-danger]="!config.enabled.countdownRunning">
          <input type="checkbox"
                 class="d-none"
                 id="toggle-countdown-running-music"
                 [attr.aria-label]="'Activate/Deactivate Countdown Running Button'"
                 autocomplete="off"
                 role="switch"
                 [checked]="config.enabled.countdownRunning"
                 (change)="config.enabled.countdownRunning = !config.enabled.countdownRunning"
                 [title]="'Activate/Deactivate Countdown Running Button'">
          <span *ngIf="config.enabled.countdownRunning">{{'plugins.sound.active' | translate}}</span>
          <span *ngIf="!config.enabled.countdownRunning">{{'plugins.sound.inactive' | translate}}</span>
        </label>
        <p class="mb-0 d-flex align-items-center ml-5 text-light">{{'plugins.sound.volume' | translate}}: {{config.volumeConfig.countdownRunning}} %</p>
      </div>
      <div class="col-12 mt-5">
        <div class="row">
          <div class="col-12 col-sm-6">
            <select id="countdownRunningSelect"
                    class="rounded"
                    (change)="selectSound('countdownRunning', $event)"
                    title="soundSelect">
              <option *ngFor="let elem of countdownRunningSounds"
                      [selected]="config.titleConfig.countdownRunning === elem.id"
                      [value]="elem.id">{{elem.text}}
              </option>
            </select>
          </div>
          <div class="col-12 col-sm-6">
            <!--suppress JSValidateTypes -->
            <app-audio-player [src]="config.titleConfig.countdownRunning"
                              [target]="'countdownRunning'"
                              id="player-countdown-running"
                              [original_volume]="config.volumeConfig.useGlobalVolume ? config.volumeConfig.global : config.volumeConfig.countdownRunning"
                              (volumeChange)="config.volumeConfig.countdownRunning = $event"></app-audio-player>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="collapse"
     id="panel-countdownEnd"
     role="tabpanel">
  <div class="card card-body border-0 mt-5">
    <div class="row">
      <div class="col-12">
        <h3>{{'plugins.sound.finish_music_detailed' | translate }}</h3>
      </div>
      <div class="col-12 mb-2 d-flex"
           [attr.data-intro]="'component.answeroptions.description.multiple_selection_survey' | translate">
        <label class="btn pointer mb-0 align-self-center"
               [class.btn-success]="config.enabled.countdownEnd"
               [class.btn-danger]="!config.enabled.countdownEnd">
          <input type="checkbox"
                 class="d-none"
                 id="toggle-countdown-end-music"
                 [attr.aria-label]="'Activate/Deactivate Countdown End Button'"
                 autocomplete="off"
                 role="switch"
                 [checked]="config.enabled.countdownEnd"
                 (change)="config.enabled.countdownEnd = !config.enabled.countdownEnd"
                 [title]="'Activate/Deactivate Countdown End Button'">
          <span *ngIf="config.enabled.countdownEnd">{{'plugins.sound.active' | translate}}</span>
          <span *ngIf="!config.enabled.countdownEnd">{{'plugins.sound.inactive' | translate}}</span>
        </label>
        <p class="mb-0 d-flex align-items-center ml-5 text-light">{{'plugins.sound.volume' | translate}}: {{config.volumeConfig.countdownEnd}} %</p>
      </div>
      <div class="col-12 mt-5">
        <div class="row">
          <div class="col-12 col-sm-6">
            <select id="countdownEndSelect"
                    class="rounded"
                    (change)="selectSound('countdownEnd', $event)"
                    title="soundSelect">
              <option *ngFor="let elem of countdownEndSounds"
                      [selected]="config.titleConfig.countdownEnd === elem.id"
                      [value]="elem.id">{{elem.text}}
              </option>
            </select>
          </div>
          <div class="col-12 col-sm-6">
            <!--suppress JSValidateTypes -->
            <app-audio-player [src]="config.titleConfig.countdownEnd"
                              [target]="'countdownEnd'"
                              id="player-countdown-end"
                              [original_volume]="config.volumeConfig.useGlobalVolume ? config.volumeConfig.global : config.volumeConfig.countdownEnd"
                              (volumeChange)="config.volumeConfig.countdownEnd = $event"></app-audio-player>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
