{% extends "bootstrap/base.html" %}
{% block title %}Spotify Connect{% endblock %}
{% from "bootstrap/utils.html" import flashed_messages %}

{% block navbar %}
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Spotify Connect</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li data-login-required>
            <p class="navbar-text">
                Currently Active Device?: <span id="activeDevice"></span>
            </p>
        </li>
        <li data-login-required>
            <a id="setDisplayNameLink" href="#" data-toggle="modal" data-target="#displayNameModal">Set Display Name</a>
        </li>
        <li>
            <a id="loginLink" href="#" data-toggle="modal" data-target="#loginModal">Login</a>
            <a id="logoutLink" href="{{url_for('login_logout')}}" style="display:none">Logout</a>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
{% endblock %}

{% block content %}
<!-- Messages -->
<div class="container">
  <div class="row">
    <div class="col-md-12" id="messageDiv">
      {{flashed_messages(container=False)}}
    </div>
  </div>
</div>
<div class="container">
    <div class="well">
        <div id="player" class="row">
          <div class="col-sm-6 col-md-4">
            <div class="thumbnail" id="player">
              <img style="display:none" id="albumCover" src="" alt="Album cover"></img>

              <div class="caption text-center">
                <span id="albumCoverPlaceholder" style="font-size:100pt" class="glyphicon glyphicon-music"></span>
                <h3 id="trackInfo" data-music-info data-id="">Loading...</h3>
                <h4 id="artistInfo" data-music-info data-id="">Loading...</h4>
                <h5 id="albumInfo" data-music-info data-id="">Loading...</h5>
                <div id="controls">
                    <p>
                        <span class="glyphicon glyphicon-volume-down" aria-hidden="true"></span>
                        <input id="volumeSlider" type="text" data-slider-id='volumeSlider' data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0" data-slider-enabled="false" data-type="playback" data-action="volume"/>
                        <span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
                    </p>
                    <div class="btn-group btn-group-lg" role="group" aria-label="playback">
                        <button data-type="playback" data-action="shuffle" type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-random" aria-hidden="true"></span>
                        </button>
                        <button data-type="playback" data-action="repeat" type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
                        </button>
                    </div>
                    <div class="btn-group btn-group-lg" role="group" aria-label="playback">
                        <button data-type="playback" data-action="prev" type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span>
                        </button>
                        <button data-type="playback" data-action="play" type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
                        </button>
                        <button style="display:none" data-type="playback" data-action="pause" type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-pause" aria-hidden="true"></span>
                        </button>
                        <button data-type="playback" data-action="next" type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span>
                        </button>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</div>

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="loginModalLabel">Login</h4>
      </div>
      <div class="modal-body">
        <form action="{{url_for('login_password')}}" method="POST">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Username" name="username">
            </div>
            <br>
            <div class="input-group">
              <input type="password" class="form-control" placeholder="Password" name="password">
            </div>
            </div>
            <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Login</button>
            </div>
        </form>
    </div>
  </div>
</div>

<div class="modal fade" id="displayNameModal" tabindex="-1" role="dialog" aria-labelledby="displayNameModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="displayNameModalLabel">Set display name</h4>
      </div>
      <div class="modal-body">
        <form action="{{url_for('info_display_name')}}" method="POST" id="displayNameForm">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Display name" autocomplete="off" name="displayName">
            </div>
            <br>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </form>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{super()}}
<script src="{{url_for('static', filename='js/bootstrap-slider.min.js')}}"></script>
<script src="{{url_for('static', filename='js/main.js')}}"></script>
{% endblock %}

{% block styles %}
{{super()}}
<link href="{{url_for('static', filename='css/bootstrap-slider.css')}}" rel="stylesheet">
<style>
    .btn.disabled.active{
        box-shadow: inset 0 3px 5px rgba(0,0,0,.275);
    }
</style>
{% endblock %}