<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-buttons side="secondary">
    <button class="mopidy-mobile-button-icon mopidy-mobile-icon-menu"
            ng-click="popover.show($event)"
            ng-controller="PlaybackMenuCtrl"
            >
    </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">
    <ion-refresher on-refresh="refresh()" pulling-text="{{'Pull to refresh' | translate}}">
    </ion-refresher>

    <div class="row row-top row-no-padding responsive-portrait">
      <div class="col" ng-if="!track">
        <h2 translate>Nothing playing</h2>
      </div>

      <div class="col" ng-if="track">
        <h2>{{track.name || track.uri}}</h2>
        <h3 class="mopidy-mobile-artists" ng-show="track.artists.length">
          <span ng-repeat="artist in track.artists">{{artist.name || artist.uri}}</span>
        </h3>
        <div class="hidden-landscape">
          <h4>{{streamTitle || track.album.name || track.genre}}</h4>
        </div>
        <div class="hidden-portrait">
          <h4 ng-show="streamTitle">{{streamTitle}}</h4>
          <h4 ng-show="track.album.name">{{track.album.name}}</h4>
          <h4 ng-show="track.genre">{{track.genre}}</h4>
          <h4 ng-show="track.date || track.album.date">{{track.date || track.album.date}}</h4>
        </div>
      </div>

      <div class="col" ng-if="image">
        <img ng-src="{{image.uri}}">
      </div>
    </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="toggleRandom()"
              >
      </button>
      <button class="mopidy-mobile-button-control mopidy-mobile-icon-previous"
              ng-click="previous()"
              ng-disabled="!hasPrevious"
              >
      </button>
      <button class="mopidy-mobile-button-control"
              ng-class="'mopidy-mobile-icon-' + (state != 'playing' ? 'play' : 'pause')"
              ng-click="togglePlay()"
              >
      </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="!hasNext"
              >
      </button>
      <button class="button button-clear button-icon button-small icon"
              ng-class="'mopidy-mobile-icon-repeat' + (options.single ? '1' : '') + (options.repeat ? ' button-positive' : '')"
              ng-click="toggleRepeat()"
              >
      </button>
    </div>
  </ion-footer-bar>
</ion-view>
