<!DOCTYPE html>
<html ng-app="Squeezefox" ng-csp>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'">
    <title>Squeezefox</title>
    <meta name="description" content="Squeezefox is a remote control for logitech squeezebox servers and players">
    <meta name="viewport" content="width=device-width">
    <link href="buildingblocks/style/toolbars.css" rel="stylesheet" type="text/css">
    <link href="buildingblocks/style/icons.css" rel="stylesheet" type="text/css">
    <link href="buildingblocks/icons/styles/media_icons.css" rel="stylesheet" type="text/css">
    <link href="buildingblocks/icons/styles/action_icons.css" rel="stylesheet" type="text/css">
    <link href="buildingblocks/icons/styles/settings_icons.css" rel="stylesheet" type="text/css">
    <link href="buildingblocks/style/action_menu.css" rel="stylesheet" type="text/css">
    <link href="buildingblocks/style/scrolling.css" rel="stylesheet" type="text/css">
    <link href="buildingblocks/style/headers.css" rel="stylesheet" type="text/css">
    <link href="buildingblocks/style/drawer.css" rel="stylesheet" type="text/css">
    <link href="css/custom-lists.css" rel="stylesheet" type="text/css">
    <!-- based on bulidingblocks lists favorites, music -->
    <link href="buildingblocks/style/input_areas.css" rel="stylesheet" type="text/css">
    <!-- settings -->
    <link href="buildingblocks/style/buttons.css" rel="stylesheet" type="text/css">
    <link href="buildingblocks/style/progress_activity.css" rel="stylesheet" type="text/css">
    <link href="buildingblocks/style/status.css" rel="stylesheet" type="text/css">
    <!-- settings -->
    <link href="buildingblocks/transitions.css" rel="stylesheet" type="text/css">
    <link href="buildingblocks/util.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/lib/angular-csp.css">
    <link rel="stylesheet" href="css/lib/font-awesome-4.1.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body ng-controller="WindowCtrl">
    <section id="sidebar" data-type="sidebar">
      <header>
        <h1>Squeezefox</h1>
      </header>
      <nav>
        <ul>
          <li><a href="#content" ng-click="changeWindow('play')">Playing</a></li>
          <li><a href="#content" ng-click="changeWindow('music')">Search</a></li>
          <li><a href="#content" ng-click="changeWindow('favorites')">Favorites</a></li>
          <li><a href="#content" ng-click="changeWindow('settings')">Settings</a></li>
        </ul>
      </nav>
    </section>
    <section id="drawer" role="region">
      <header>
        <a href="#content"><span class="icon icon-menu">hide sidebar</span></a>
        <a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
        <menu type="toolbar">
          <button ng-click="powerToggle()"><i class="fa fa-power-off"></i></button>
        </menu>
        <h1>{{ windowTitle(current_window) }}</h1>
      </header>
      <div role="main" id="main">
        <div id="window-play" ng-class="CSS_window('play')"  ng-controller="PlayerStatusCtrl">
          <!-- playing + cover + toolbar -->
          <div id="flip_container">
            <div id="volbar" ng-show="showVolumeBar">
              <a ng-click="volumeUp()"><i class="fa fa-volume-up"></i></a>
              <a ng-click="volumeDown()"><i class="fa fa-volume-down"></i></a><!-- XXX visual feedback when clicking vol buttons?! -->
            </div>
            <div id="flip_card" class="shadow" ng-class="CSS_transition()">
              <div id="playerStatus" class="front face">
                <div id="playingInfo">
                  <div id="playingArtist">{{ currentArtist }}</div>
                  <div id="playingTitle">{{ currentTitle }}
                      <em ng-hide="playing">(Paused)</em>
                      <span id="playingAlbum">{{ currentAlbum }}</span>
                  </div>
                </div>
                <div id="coverimage">
                  <div ng-hide="active">
                      <p ng-hide="players">Please wait</p>
                      <progress></progress>
                      <p ng-hide="players">Have you already picked your<br>
                      server in the Settings?</p>
                  </div>
                  <img ng-show="active" ng-model="artworkURL" ng-src="{{ artworkURL }}">
                  <!--
                    maybe use this for placeholder image is given is broken
                    http://hueypetersen.com/posts/2012/07/24/creating-a-fallback-image-directive-with-angularjs/
                    -->
                </div>
              </div>
              <div class="back face">
                <!-- playlist -->
                <section data-type="list">
                  <header>Playlist</header>
                  <ul>
                    <li ng-repeat="item in $parent.playlist.list">
                      <a href="#" ng-click="playItem(item['playlist index'])">
                        <p><span class="fa fa-music np-anim" ng-show="((playlist.current == item['playlist index']) && playing)"></span> {{ item.title }}</p>
                        <p ng-show="item.artist">by {{item.artist }} {{ prettyDuration(item.duration) }}</p>
                      </a>
                    </li>
                  </ul>
                </section>
              </div>
            </div>
          </div>
          <!-- end of flippy -->
          <!-- bottom toolbar -->
          <div role="toolbar">
            <ul>
              <li><button class="media-icon media-skipbackwards" ng-click="back()">Backward</button></li>
              <li><button class="media-icon" ng-class="CSS_Playing()" ng-click="playPause()">Play</button></li>
              <li><button class="media-icon media-skipforward" ng-click="forward()">Forward</button></li>
            </ul>
            <ul>
              <li><button ng-click="transitionToggle()" class="media-icon media-playlistfilter"></button></li>
              <li><button class="media-icon" ng-class="CSS_Shuffle()" ng-click="toggleShuffle()">Toggle Shuffle</button></li>
              <!-- media-shuffleoff -->
            </ul>
          </div>
        </div>
        <!-- end of playing window -->
        <div id="window-music" ng-class="CSS_window('music')" ng-controller="MusicSearchCtrl">
          <form role="search" class="bottom">
            <button type="submit" ng-click="search(searchterm)">Search</button>
            <p>
              <input type="text" placeholder="Enter song name..." required="" ng-model="searchterm">
              <button type="reset">Clear</button>
            </p>
          </form>
          <section data-type="list" ng-show="searchresults">
            <nav data-type="scrollbar"></nav>
            <header>Search Results</header>
            <div ng-show="searchprogress.track" class="content center">
                <progress></progress>
            </div>
            <header ng-hide="noresults.contributors">Artists</header>
            <ul ng-hide="noresults.contributors">
              <li ng-repeat="item in searchresults.contributors">
                <!--<aside ng-show="searchdetails.contributors[item.track_id]" class="pack-end">
                  <img alt="placeholder" ng-src="{{ searchdetails.contributors[item.track_id].coverurl }}">
                </aside>-->
                <a href="#" ng-click="actionDialog(item)">
                  <p>{{ item.contributor }}</p>
                  <p ng-show="searchdetails.contributors[item.track_id]">by {{ searchdetails.contributors[item.track_id].artist }}</p>
                </a>
              </li>
            </ul>
            <header ng-hide="noresults.albums">Albums</header>
            <ul ng-hide="noresults.albums">
              <li ng-repeat="item in searchresults.albums">
                <aside ng-show="searchdetails.albums[item.album_id].coverurl" class="pack-end">
                  <img alt="placeholder" ng-src="{{ searchdetails.albums[item.album_id].coverurl }}">
                </aside>
                <a href="#" ng-click="actionDialog(item)">
                  <p>{{ item.album }}</p>
                  <p ng-show="searchdetails.albums[item.album_id]">by {{ searchdetails.albums[item.album_id].artist }}</p>
                </a>
              </li>
            </ul>
            <header ng-hide="noresults.tracks">Tracks</header>
            <ul ng-hide="noresults.tracks">
              <li ng-repeat="item in searchresults.tracks">
                <aside ng-show="searchdetails.tracks[item.track_id].coverurl" class="pack-end">
                  <img alt="placeholder" ng-src="{{ searchdetails.tracks[item.track_id].coverurl }}">
                </aside>
                <a href="#" ng-click="actionDialog(item)">
                  <p>{{ item.track }}</p>
                  <p ng-show="searchdetails.tracks[item.track_id]">by {{ searchdetails.tracks[item.track_id].artist }}</p>
                </a>
              </li>
            </ul>
          </section>
          <form role="dialog" data-type="action" ng-show="searchDialog.visible">
            <header>{{ searchDialog.title }}</header>
            <menu>
              <button ng-repeat="action in searchDialog.actions" ng-click="action.func.apply(null, action.params)">{{ action.title }}</button>
            </menu>
          </form>
        </div>
        <div id="window-favorites" ng-class="CSS_window('favorites')" ng-controller="FavoritesCtrl">
          <section data-type="list">
            <header>Favorites</header>
            <ul ng-show="favorites">
              <li ng-show="freddysbox"><!-- XXX only for my personal use, wouldnt work well in a release yet -->
                <a href="#" ng-click="playDeezer()">
                  <p>Deezer Loved Tracks</p>
                </a>
              </li>
              <li ng-repeat="item in favorites">
                <!--
                  <aside class="pack-end">
                    <img alt="placeholder" src="x">
                  </aside>-->
                <a href="#" ng-click="playFavorite(item.id)">
                  <p>{{ item.name }}</p>
                </a>
              </li>
            </ul>
            <div ng-hide="favorites">
              <p>Did not find any favorites.</p>
              <button ng-click="loadFavorites()">Retry</button>
            </div>
          </section>
        </div>
        <div id="window-settings" ng-class="CSS_window('settings')" ng-controller="SettingsCtrl">
          <form>
            <fieldset>
              <legend class="action">Server Address</legend>
              <p ng-hide="$parent.server.addr">First enter server IP or hostname and the port.</p>
              <section>
                <p>
                  <input type="text" placeholder="192.168.1.1" required="" ng-model="server.addr">
                  <button type="reset">Clear</button>
                </p>
                <p>
                  <input type="text" placeholder="9000" value="9000" required="" ng-model="server.port">
                  <button type="reset">Clear</button>
                </p>
                <a class="recommend" role="button" href="#" ng-click="tryServer()">Find Players</a>
              </section>
            </fieldset>
            <fieldset>
              <legend class="action">Player</legend>
              <p>Please select a player:</p>
              <section ng-show="players">
                <select ng-model="$parent.selectedPlayer" ng-options="player.name for player in players">
                </select>
              <p ng-hide="players.length">You must select a server before you can select a player.</p>
              </section>
            </fieldset>
            <fieldset>
              <legend>Help &amp; Support</legend>
              <p>Squeezefox is just a remote control for your existing music hardware.
              <a class="textlink" href="https://github.com/freddyb/squeezefox">See here for more</a></p>
            </fieldset>
          </form>
        </div>
      </div>
    </section>
  </body>

  <script type="text/javascript" src="js/libs/localforage.js"></script>
  <script type="text/javascript" src="js/libs/angular-1.3.0-beta.13.js"></script>
  <script type="text/javascript" src="js/libs/angular-animate.min.js"></script>
  <script type="text/javascript" src="buildingblocks/js/status.js"></script>
  <script type="text/javascript" src="js/controllers.js"></script>
</html>
