{% extends "base.html" %}

{% block title %}{{ name }}{% endblock %}

{% block content %}
<hgroup class="title-box">
    <h1> <img src="/static/motificon.png" alt="Motif Icon" class="title-icon"/> {{ name }} </h1>
</hgroup>
<!-- Clips -->

<div class="entrypage-connections">
    <h2>Songs Featured:</h2>
    <ul>
    {% for song_id, motif_id, song in clip_info %}
        <li class="entrypage-clip">
            <audio
                controls
                src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
            </audio>
            <span class="clip-pointer"><a href="/song/{{ song_id }}">{{ song }}</a></span>
        </li>
    {% endfor %}
    </ul>
</div>
{% endblock %}