{% extends "layout.html" %}

{% block content %}
        <h1>Générateur de playlist</h1>
        <form name="qr-generate" class="card">
            <ul>
               {% for track_number in range(1, 18) %}
                <li>
                    {{ '%02d' % track_number }}.mp3
                    <audio controls src="http://mp3.samuelsorin.fr/{{ '%02d' % track_number }}.mp3"></audio>
                    <input type="checkbox" name="audio" value="{{ track_number }}">
                </li>
              {% endfor %}
            </ul>
            <input type="submit" value="Générer ma playlist ! ">
        </form>

        {% if url %}
        <div class="qr_code">
            <a href="{{ url }}">
                <img src="{{ qrcode_path }}" title="Playlist">
            </a>
        </div>
        {% endif %}
{% endblock %}