<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>forked-daapd</title>
  <link rel="stylesheet" href="/css/font-awesome.min.css">
  <link rel="stylesheet" href="/css/bulma.min.css">
  <link rel="stylesheet" href="/css/forked-daapd.css">
</head>

<body>
<div id="root" v-cloak>


<!--
  ############# Navbar #############
-->
<nav class="navbar">
  <div class="navbar-brand">
    <b class="navbar-item">forked-daapd</b>
    <a class="navbar-item" href="https://github.com/ejurgensen/forked-daapd" title="GitHub"><i class="fa fa-github"></i></a>
  </div>
</nav>


<!--
  ############# Hero section #############
-->
<section class="hero is-dark is-bold">
  <div class="hero-body">
    <div class="container">
      <div class="columns">

        <div class="column">
          <nav class="level is-mobile">
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">Artists</p>
                <p class="title is-size-6-mobile">{{ library.artists }}</p>
              </div>
            </div>
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">Albums</p>
                <p class="title is-size-6-mobile">{{ library.albums }}</p>
              </div>
            </div>
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">Songs</p>
                <p class="title is-size-6-mobile">{{ library.songs }}</p>
              </div>
            </div>
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">Total playtime</p>
                <p class="title is-size-6-mobile">{{ library.db_playtime | duration }}</p>
              </div>
            </div>
          </nav>
        </div>

      </div> <!-- columns -->
    </div><!-- container -->
  </div><!-- hero -->
</section>


<!--
  ############# Status section #############
-->
<section class="section">
  <div class="container">
    <!-- Section-heading -->
    <div class="columns is-centered fd-section-heading">
      <div class="column is-10"><h1 class="is-uppercase is-size-7">Status</h1></div>
    </div>

    <!-- Library update -->
    <div class="columns is-centered fd-section-content">
      <div class="column is-3">
        <h2 class="title is-5">
          <span class="icon" v-show="library.updating"><i class="fa fa-refresh fa-spin"></i>
          </span><span class="icon" v-show="!library.updating"><i class="fa fa-music"></i></span>
           Library
         </h2>
      </div>

      <div class="column is-7 content">
        <a class="button" v-on:click="update" v-show="!library.updating">Update library</a>
        <p v-show="library.updating">Update in progress ...</p>
      </div>
    </div>

    <!-- Pairing -->
    <div class="columns is-centered fd-section-content">
      <div class="column is-3">
        <h2 class="title is-5"><span class="icon"><i class="fa fa-mobile"></i></span> Remote Pairing</h2>
      </div>

      <div class="column is-7 content">
        <!-- Paring request active -->
        <div class="content" v-show="pairing.active">
          <p>Remote pairing request from <b>{{pairing.remote}}</b></p>
          <form v-on:submit.prevent="kickoffPairing">
            <div class="field has-addons">
              <div class="control">
                <input class="input" type="text" placeholder="Enter pairing code" v-model="pairing_req.pin">
              </div>
              <div class="control">
                <button class="button is-primary" type="submit">Send</button>
              </div>
            </div>
          </form>
        </div>
        <!-- No pairing requests -->
        <div class="content" v-show="!pairing.active">
          <p>No active pairing request.</p>
          <a class="button"  v-on:click="loadPairing" v-show="!config.websocket_port">Refresh</a>
        </div>
      </div>
    </div>

    <!-- Outputs -->
    <div class="columns is-centered fd-section-content">
      <div class="column is-3">
        <h2 class="title is-5">
          <span class="icon"><i class="fa fa-volume-up"></i></span>
           Outputs
         </h2>
      </div>

      <div class="column is-7 content">
        <div v-for="output in outputs">
          <div class="field">
            <div class="control">
              <label class="checkbox">
                <input type="checkbox" v-model="output.selected" v-on:change="selectOutputs"> {{ output.name }}
              </label>
            </div>
          </div>
          <form v-on:submit.prevent="kickoffVerification" style="margin-bottom:24px;" v-show="output.needs_auth_key">
            <div class="field has-addons">
              <div class="control">
                <input class="input" type="text" placeholder="Enter verification code" v-model="verification_req.pin">
              </div>
              <div class="control">
                <button class="button is-primary" type="submit">Send</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

  </div>
</section>

<!--
  ############# Online accounts & services section #############
-->
<section class="section">
  <div class="container">
    <!-- Section-heading -->
    <div class="columns is-centered fd-section-heading">
      <div class="column is-10"><h1 class="is-uppercase is-size-7">Online accounts &amp; services</h1></div>
    </div>

    <!-- Spotify -->
    <div class="columns is-centered fd-section-content" v-show="spotify.enabled">
      <div class="column is-3">
        <h2 class="title is-5"><span class="icon"><i class="fa fa-spotify"></i></span> Spotify</h2>
      </div>

      <div class="column is-7 content">
        <div class="content" v-show="!spotify.libspotify_installed">
          <p><b>libspotify</b> is not installed (required for playing spotify tracks)</p>
        </div>
        <div class="content" v-show="spotify.libspotify_installed">
          <!-- libspotify -->
          <div v-show="!spotify.libspotify_logged_in"><p><b>libspotify</b> (requires Spotify premium account, enables playback of Spotify songs)</p>
            <form v-on:submit.prevent="loginLibspotify">
              <div class="field has-addons">
                <div class="control">
                  <input class="input" type="text" placeholder="Username" v-model="libspotify.user">
                  <p class="help is-danger">{{ libspotify.errors.user }}</p>
                </div>
                <div class="control">
                  <input class="input" type="password" placeholder="Password" v-model="libspotify.password">
                  <p class="help is-danger">{{ libspotify.errors.password }}</p>
                </div>
                <div class="control">
                  <button class="button" type="submit">Login</button>
                </div>
              </div>
              <p class="help is-danger">{{ libspotify.errors.error }}</p>
            </form>
          </div>
          <p v-show="spotify.libspotify_logged_in"><b>libspotify</b> (requires Spotify premium account, enables playback of Spotify songs): logged in as <b>{{ spotify.libspotify_user }}</b></p>
          <!-- Spotify web api -->
          <div v-show="!spotify.webapi_token_valid">
            <p><b>Spotify Web API</b> access is required to add saved albums and playlists to your library.</p>
            <a class="button" v-bind:href="spotify.oauth_uri">Authorize Web API access</a>
          </div>
          <div v-show="spotify.webapi_token_valid">
            <p><b>Spotify Web API</b>: access authorized for <b>{{ spotify.webapi_user }}</b></p>
            <a class="button" v-bind:href="spotify.oauth_uri">Reauthorize Web API access</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Last.fm -->
    <div class="columns is-centered fd-section-content" v-show="lastfm.enabled">
      <div class="column is-3">
        <h2 class="title is-5"><span class="icon"><i class="fa fa-lastfm"></i></span> Last.fm</h2>
      </div>

      <div class="column is-7 content">
        <!-- Scrobbling enabled -->
        <div class="content" v-show="lastfm.scrobbling_enabled">
          <a class="button" v-on:click="logoutLastfm">Stop scrobbling</a>
        </div>
        <!-- Scrobbling NOT enabled -->
        <div class="content" v-show="!lastfm.scrobbling_enabled">
          <p><b>Last.fm</b> (enable scrobbling)</p>
          <form v-on:submit.prevent="loginLastfm">
            <div class="field has-addons">
              <div class="control">
                <input class="input" type="text" placeholder="Username" v-model="lastfm_login.user">
                <p class="help is-danger">{{ lastfm_login.errors.user }}</p>
              </div>
              <div class="control">
                <input class="input" type="password" placeholder="Password" v-model="lastfm_login.password">
                <p class="help is-danger">{{ lastfm_login.errors.password }}</p>
              </div>
              <div class="control">
                <button class="button" type="submit">Login</button>
              </div>
            </div>
            <p class="help is-danger">{{ lastfm_login.errors.error }}</p>
          </form>
        </div>
      </div>
    </div>

  </div>
</section>


<!--
  ############# Footer #############
-->
<footer class="footer">
  <div class="container">
    <div class="content has-text-centered">
      <p>
        <strong>forked-daapd</strong> - version {{ config.version }}
      </p>
      <p class="is-size-7">Compiled with support for {{ config.buildoptions | join }}.</p>
      <p class="is-size-7">Web interface built with <a href="http://bulma.io">Bulma</a>, <a href="http://fontawesome.io/">Font Awesome</a>, <a href="https://vuejs.org/">Vue.js</a>, <a href="https://github.com/mzabriskie/axios">axios</a>.</p>
    </div>
  </div>
</footer>


</div> <!-- #root -->

<script src="/js/vue.min.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/forked-daapd.js"></script>

</body>
</html>
