{% extends 'base.html' %}

{% block content %}
<div class="selection">
<form method="POST" action="/play/">
<div class="form-group text-center">
  <p>Play your own music…</p>
  <input  type="radio"
          name="source"
          value="WIRE"
          checked="checked"
          id="sourceWire"
  />
  <label for="sourceWire">
    <i class="fa fa-plug" aria-hidden="true"></i>
    Plug in
  </label>
</div>

{% if themes %}
<div class="form-group text-center">
  <p>…or select a playlist :</p>
  {% for theme in themes %}
    <input  type="radio"
            name="source"
            value="{{ theme['code'] }}"
            id="{{ theme['code'] }}"
    />
    <label for="{{ theme['code'] }}">
      <i class="fa fa-{{ theme['fa_icon'] }}" aria-hidden="true"></i>
      {{ theme['display'] }}
    </label>
  {% endfor %}
</div>
{% endif %}

<div class="form-group text-center">
  <label for="duration" id="duration-label">Duration</label>
  <input class="duration" type="range" name="duration" min="5" max="{{ max_time }}" step=5 value="10" />
  <span>10 minutes</span>
</div>

<div class="text-center">
  <div class="btn-group">
    <button type="submit" class="btn btn-primary btn-lg">
      <i class="fa fa-play" aria-hidden="true"></i><span class="sr-only">Play</span>
    </button>
  </div>
</div>

</form>
</div>
{% endblock %}
