<ion-view hide-nav-bar="true" view-title="{{'Playback' | translate}}">

  <ion-header-bar>
    <div class="range" style="width: 100%">
      {{time.position | duration}}
      <input min="0" max="{{track.length || 0}}"
             ng-change="seek()"
             ng-disabled="!track.length"
             ng-model="time.position"
             type="range">
      {{track.length | duration}}
    </div>
  </ion-header-bar>

  <ion-content class="has-header has-subfooter">
    <div class="mopidy-mobile-trackview">
      <p>
        <strong>{{track.name || ('Nothing playing' | translate)}}</strong>
        <br>
        {{track.artists[0].name}}
        <br>
        {{track.album.name}}
      </p>

      <div ng-if="debug">
        <p>State: {{state}}</p>
        <p>Current: {{tlTracks.current.tlid}}</p>
        <p>EOT: {{tlTracks.eot.tlid}}</p>
        <p>Next: {{tlTracks.next.tlid}}</p>
        <p>Previous: {{tlTracks.previous.tlid}}</p>
      </div>

      <div ng-if="image">
        <img ng-src="{{image.uri}}">
      </div>
    </div>
  </ion-content>

  <ion-footer-bar class="bar-subfooter">
    <div class="button-bar">
      <button class="button button-clear button-icon button-small icon  mopidy-mobile-icon-random"
              ng-class="{'button-positive': options.random}"
              ng-click="setRandom(!options.random)"
              >
      </button>
      <button class="button button-icon icon mopidy-mobile-icon-previous"
              ng-click="previous()"
              ng-disabled="!tlTracks.previous"
              >
      </button>
      <button class="button button-icon icon"
              ng-class="state != 'playing' ? 'mopidy-mobile-icon-play' : 'mopidy-mobile-icon-pause'"
              ng-click="state != 'playing' ? play() : pause()"
              >
      </button>
      <button class="button button-icon icon mopidy-mobile-icon-stop"
              ng-click="stop()"
              ng-disabled="state == 'stopped'"
              >
      </button>
      <button class="button button-icon icon mopidy-mobile-icon-next"
              ng-click="next()"
              ng-disabled="!tlTracks.next"
              >
      </button>
      <button class="button button-clear button-icon button-small icon mopidy-mobile-icon-repeat"
              ng-class="{'button-positive': options.repeat}"
              ng-click="setRepeat(!options.repeat)"
              >
      </button>
    </div>
  </ion-footer-bar>

  <ion-footer-bar ng-controller="MixerCtrl as mixer">
    <div class="buttons">
      <button class="button button-clear icon mopidy-mobile-icon-mute"
              ng-class="{'button-assertive': mixer.mute}"
              ng-click="mixer.setMute(!mixer.mute)"
              >
      </button>
    </div>
    <div class="range" style="width: 100%">
      <i class="icon mopidy-mobile-icon-volume-low"></i>
      <input ng-change="mixer.changeVolume()"
             ng-model="mixer.volume"
             type="range"
             min="0"
             max="100"
             >
      <i class="icon mopidy-mobile-icon-volume-high"></i>
    </div>
  </ion-footer-bar>

</ion-view>
