<!doctype html>
<html ng-app="partyApp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Party!</title>

    <link href="vendors/bootstrap.min.css" rel="stylesheet">
    <link href="vendors/fontawesome-all.min.css" rel="stylesheet">
    <link href="{{ style }}" rel="stylesheet">

    <script type="text/javascript" src="vendors/mopidy.min.js"></script>
    <script type="text/javascript" src="vendors/angular.min.js"></script>
    <script type="text/javascript" src="controller.js"></script>
  </head>
  <body ng-controller="MainController">
    <div class="container-fluid" style="margin-top:20px">
      <div class="row">
        <div class="col-4">
         {% if not hide_pause %}
          <button type="button" class="btn" ng-model="button" ng-click="togglePause()" ng-disabled="!ready || currentState.length === 0" ng-class="{'btn-success' : currentState.paused, 'btn-danger': !currentState.paused}">
            <span class="fas fa-pause" ng-class="{'fa-play': currentState.paused, 'fa-pause' : !currentState.paused}"></span>
          </button>
		 {% end %}
         {% if not hide_skip %}
          <button type="button" class="btn btn-primary" ng-model="button" ng-click="nextTrack()" ng-disabled="!ready || currentState.length === 0">
            <span class="fas fa-step-forward"></span>
          </button>
		 {% end %}
          <p><small>
            <span class="fas fa-music" ng-if="currentState.length > 0"></span>
            <span class="fas fa-exclamation-triangle" ng-if="currentState.length === 0"></span>
            {{! currentState.length }} track{{! currentState.length != 1 ? 's' : '' }}
          </small></p>
        </div>
        <div class="col-8">
          <div class="card card-body bg-light">
            <span>{{! currentState.track.name }}
              <small>
                <span ng-if="currentState.track.artists">by</span>
                <span ng-repeat="artist in currentState.track.artists">
                  <span ng-if="!$first"> & </span>
                  {{! artist.name }}
                </span>
              </small>
              <small>{{! printDuration(currentState.track) }}</small>
            </span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <form ng-submit="search()">
            <input type="text" role="search" class="form-control" placeholder="Search..." ng-model="searchField" ng-disabled="!ready">
          </form>
          <div ng-show="loading" class="container-fluid">
            <p><span class="fas fa-hourglass"></span> Loading...</p>
          </div>
        </div>
      </div>

      <div class="alert" role="alert" ng-show="message.length" ng-class="{'alert-success' : (message[0] == 'success'), 'alert-danger' : (message[0] == 'error')}">
        {{! message[1] }}
      </div>

      <ul class="list-group" style="margin-top:20px">
        <li class="list-group-item" ng-repeat="track in tracks">
          <button type="button" class="btn btn-xs btn-success add-button" ng-model="button" ng-click="addTrack(track)" ng-disabled="track.disabled">
            <span class="fas fa-play" ng-if="!track.disabled"></span>
            <span class="fas fa-check" ng-if="track.disabled"></span>
          </button>
          {{! track.name }} <small>{{! printDuration(track) }}</small><br>
          <small>
            {{! track.album.name }}
            <span ng-if="track.artists">by</span>
            <span ng-repeat="artist in track.artists">
              <span ng-if="!$first"> & </span>
              {{! artist.name }}
            </span>
          </small>
        </li>
      </ul>
      <div class="mt-1 mx-auto" style="width: 64px;">
        <button type="button" class="btn" ng-model="button" ng-click="lookupOnePageOfTracks()" ng-show="tracksToLookup.length">
          More
        </button>
      </div>
    </div>
  </body>
</html>
