{% extends 'speeches/base_player.html' %}
{% load url from future %}
{% load humanize %}
{% load i18n %}

{% block title %}{% blocktrans with id=object.id %}Recording #{{ id }}{% endblocktrans %}{% endblock %}

{% block content %}

<div class="page-header">
    <h1>{% blocktrans with id=object.id %}Recording #{{ id }}{% endblocktrans %}</h1>

    <p>This recording was created {{ object.created|naturaltime }}.
    It consists of {{ object.timestamps.count|apnumber }} timestamps.

    <i class="icon-volume-up off-screen">{% trans "This speech has audio" %}</i>
    <audio id="audio{{ object.id }}" src="{{ MEDIA_URL }}{{ object.audio }}" controls></audio>
</div>

<ul>
{% for ts in object.timestamps.all %}
    <li>{{ ts.timestamp }} &ndash;
    {% if ts.speech %}
      {% with ts.speech as speech %}
        {% if not speech.is_public %}<span class="label label-info">Invisible</span>{% endif %}
        <span class="speech-speaker"> <strong>{{ speech.speaker|default_if_none:"Unknown Speaker" }}</strong></span>
        <span class="speech-summary"> said <a href="{% url "speeches:speech-view" speech.id%}"><em>&#8220;{{ speech.summary}}&#8221;</em></a></span>
        <span class="speech-date muted"><small>{{ speech.start_date|default_if_none:"Undated" }} </small></span>
        <audio class="audio-small" id="audio-speech{{ speech.id }}" src="{{ MEDIA_URL }}{{ speech.audio }}" controls></audio>
        <script>
           $('#audio-speech{{ speech.id }}').mediaelementplayer( { audioWidth: 100, audioHeight: 24, features: [ 'playpause', 'current', 'duration' ] } ); 
        </script>
      {% endwith %}
    {% else %}
        no attached speech.
    {% endif %}
{% empty %}
    <li>This recording had no associated timestamps (normally shouldn't happen).</li>
{% endfor %}
</ul>

<h2>{% trans "Actions" %}</h2>

    <input type="button" value="Edit Timestamps" id="edit-timestamps"
        onClick="window.location='{% url "speeches:recording-edit" recording.id%}'">

<form class="form-horizontal" method="post">
    {% include 'speeches/form.html' with submit="Update" type="recording" %}
</form>

{% endblock %}

