<div class="row">
    <div id="playerArea" class="col-xs-8 material-icons {{if playing "play-arrow" "pause"}} {{if playQueueEmpty "blockAnimation"}}" {{action "playerAreaPlay"}}>

        <div id="playerControls">
          {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}

          {{#if playQueueMultiple}}
              <span data-toggle="tooltip" data-placement="top" title="Previous" class="bootstrapTooltip"
                    id="prevTooltip" {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!--
          -->{{/if}}<!--
                    --><span data-toggle="tooltip" data-placement="top"
                              id="playingTooltip" class="bootstrapTooltip" title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="playerControllIcon"}}</span><!--
                  -->{{#if playQueueMultiple}}<!--
                --><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
                         title="Next song"  {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span><!--
                  -->{{/if}}<!--
          --><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="volumeMutedTooltip"
                   title={{volumeMutedTooltipTxt}}  {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeClass  class="playerControllIcon volumeButton"}}</span><!--
                  -->{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volumeBar"}}

            <span id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</span>

          <span class="pull-right">
            <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
                  title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen"  class="playerControllIcon"}}
            </span>
          </span>
        </div>
    </div>

    <div id="playlist" class="col-xs-4">
        <input id="fileInput" type="file" accept="audio/*" multiple="true" />

        <div id="playListControls">
            <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip"
                  title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>

            <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip"
                  title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>

            <span data-toggle="tooltip" data-placement="bottom" title="Add new music"
                  class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon" }}</span>
        </div>

        <div id="playListArea" class={{playListAreaClass}} {{action "playListAreaAddAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
            {{#if playQueueEmpty}}
                <div id="dragHere">Drag your music files here</div>
                {{paper-icon icon="library-music"}}
            {{/if}}

          {{#each playQueue as |item index|}}
              <div class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}}" {{action "goToSong" index bubbles=false}}>
                {{#if item.title}}
                  {{item.title}}
                  <div class="songArtist">{{item.artist}}</div>
                {{else}}
                  {{item.filename}}
                {{/if}}
                  <div data-toggle="tooltip" data-placement="bottom auto" title="Remove from playlist" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</div></div>
          {{/each}}
        </div>
    </div>
</div>


<div id="playerBottom" class="row">
  <span id="beatArea" class="col-xs-7">
      <div id="vertDivider"></div>
        {{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL noHover=true}}

        <span class="beatOption">
          {{range-slider start=threshold orientation="vertical" range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
            Beat Threshold
        </span>

        <span class="beatOption">
          {{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}}
            Beat Decay
        </span>

        <span class="beatOption">

          {{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}}
            Beat Frequency Range
        </span>

      <div id="playerButtonGroup">
        {{#paper-button raised=true warn=true action="defaultControls"}}Default{{/paper-button}}
      </div>
    </span>

    <span id="beatSpeakerContainer" class="col-xs-5">
        {{#paper-switch checked=speakerViewed noink=true}} {{speakerLabel}} {{/paper-switch}}
        {{#liquid-if speakerViewed}}
        <div id="beatSpeaker">
            <span id="beatSpeakerCenter" class="beatSpeakerCenter cursorPointer" {{action "clickSpeaker"}}></span>
          </div>
      {{else}}
        <div id ="beatHistory">
            {{#each beatHistory as |item|}}
              <p>{{{item}}}</p>
            {{/each}}
        </div>
      {{/liquid-if}}
        </span>
    </div>