{% extends 'base.html' %}

{% block content %}
<div class="row">

<div class="col-sm-2 text-center">
  Volume<br/>&nbsp;
  <input class="vertical" type="range" name="volume" min="0" max="100" step=1 value="{{ volume }}"/>
</div>
<div class="col-sm-2 text-center">
  Basses<br/>&nbsp;
  <input class="vertical" type="range" name="low" min="0" max="100" step=1 value="{{ low }}"/>
</div>
<div class="col-sm-2 text-center">
  Filtre<br/>passe bas
  <input class="vertical" type="range" name="filter" min="0" max="100" step=1 value="{{ filter }}"/>
</div>

<div class="col-sm-6 text-center">

<p class="square picture">{% if picture_mime and picture_data %}<img src="data:{{ picture_mime }};base64,{{ picture_data }}" alt="Album cover" />{% endif %}</p>

<p class="lead artist">{% if artist %}{{ artist }}{% else %}<i>Artiste inconnu</i>{% endif %}</p>
<p class="lead title">{% if title %}{{ title }}{% else %}<i>Titre inconnu</i>{% endif %}</p>
<div class="center-block">
  <div class="btn-group">
    {% if source != "WIRE" %}
    <a href="/previous/" class="btn btn-primary btn-lg">
      <i class="fa fa-backward" aria-hidden="true"></i><span class="sr-only">Previous</span>
    </a>
    {% endif %}
    <a href="/stop/" class="btn btn-primary btn-lg" >
      <i class="fa fa-stop" aria-hidden="true"></i><span class="sr-only">Stop</span>
    </a>
    {% if source != "WIRE" %}
    <a href="/next/" class="btn btn-primary btn-lg">
      <i class="fa fa-forward" aria-hidden="true"></i><span class="sr-only">Next</span>
    </a>
    {% endif %}
  </div>
</div>
</div>
</div>

{% endblock %}
