{% extends 'base.htm' %}
{% load markdown_deux_tags %}

{% block styles %}
  <link rel='stylesheet' href='/static/styles/music.css' type='text/css' />
{% endblock %}

{% block content %}
<h2><a style='color: #556;text-decoration:none;' href='/bookmarks/'>Music</a></h2>
<input style='float:right;clear:both;' type="text" name="q" placeholder='Search'></input>

{% for session in sessions %}

<h4>{{ session.date | date:'jS F Y' }}<br/><em>{{ session.title }}</em></h4>
<div class='session'>

{% for set in session.sets.all %}

{% autoescape off %}
{{ set.desc | markdown}}
{% endautoescape %}

{% for recording in set.recordings.all %}

<table>
    <tr>
    <td class='datatype'>Date</td>
    <td>{{ recording.date }}</td>

    <td class='datatype'>Event</td>
    <td>{{ recording.album }}</td>
    </tr>

    <tr>
    <td class='datatype'>Title</td>
    <td>{{ recording.title }}</td>

    <td class='datatype'>Location</td>
    <td>{{ recording.location }}</td>
    </tr>

    <tr>
    <td class='datatype'>Performers</td>
    <td><ul>
    {% for performer in recording.performers %}
        <li>{{ performer }}</li>
    {% endfor %}
    </ul></td>

    <td class='datatype'>File</td>
    <td><a href='/media/{{ recording.file.name }}'>{{ recording.file.name }}</a></td>
    </tr>

    <tr>
    <td colspan='4'>
<audio controls>
  <source src='/media/{{ recording.file.name }}' type="audio/ogg">
Your browser does not support the &lt;audio&gt; element.
</audio>
    </td>
    </tr>
</table>

{% endfor %}
{% endfor %}
</div>
{% endfor %}

    {% if sessions.has_next or sessions.has_previous %}
<p style='text-align:center'margin:auto auto;'>
    <br/>

        {% if sessions.has_previous %}
    <a href='/bookmarks/{{ sessions.previous_page_number }}'>&lt;- Prev</a>
        {% endif %}

    &nbsp; &nbsp; &nbsp; &nbsp;
    Page {{ sessions.number }} of {{ sessions.sessions.num_pages }}
    &nbsp; &nbsp; &nbsp; &nbsp; 

        {% if sessions.has_next %}
    <a href='/bookmarks/{{ sessions.next_page_number }}'>Next -&gt;</a>
        {% endif %}

</p>
    {% endif %}

{% endblock %}