<ion-view class="mopidy-mobile-playback" ng-controller="MixerCtrl as mixer" view-title="{{'Playback' | translate}}">
  <ion-nav-buttons side="primary">
    <button class="button button-clear icon mopidy-mobile-icon-mute"
            ng-class="{'button-assertive': mixer.mute}"
            ng-click="mixer.setMute(!mixer.mute)"
            >
    </button>
  </ion-nav-buttons>

  <ion-nav-title class="mopidy-mobile-playback">
    <div class="range">
      <i class="mopidy-mobile-icon-volume-low"></i>
      <input ng-change="mixer.changeVolume()"
             ng-model="mixer.volume"
             type="range"
             min="0"
             max="100"
             >
      <i class="mopidy-mobile-icon-volume-high"></i>
    </div>
  </ion-nav-title>

  <ion-content class="has-header has-footer has-subfooter padding">
    <div ng-if="track.artists[0].name">
      {{track.artists[0].name}}
    </div>
    <div>
      <strong>
        {{track.name || ('Nothing playing' | translate)}}
      </strong>
    </div>
    <div ng-if="track.album.name">
      {{track.album.name}}
    </div>
    <div ng-if="stream.title">
      {{stream.title}}
    </div>
    <div ng-if="image">
      <img ng-src="{{image.uri}}">
    </div>
  </ion-content>

  <ion-footer-bar class="bar-subfooter">
    <div class="range">
      {{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-footer-bar>

  <ion-footer-bar>
    <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="mopidy-mobile-button-control mopidy-mobile-icon-previous"
              ng-click="previous()"
              ng-disabled="!tlTracks.previous"
              >
      </button>
      <button class="mopidy-mobile-button-control"
              ng-class="state != 'playing' ? 'mopidy-mobile-icon-play' : 'mopidy-mobile-icon-pause'"
              ng-click="state != 'playing' ? play() : pause()"
              >
      </button>
      <button class="mopidy-mobile-button-control mopidy-mobile-icon-stop"
              ng-click="stop()"
              ng-disabled="state == 'stopped'"
              >
      </button>
      <button class="mopidy-mobile-button-control 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-view>
