{% 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>Edit {% blocktrans with id=object.id %}Recording #{{ id }}{% endblocktrans %}</h1>

    <p>This recording was created {{ object.created|naturaltime }}.

    <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>

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

{% if recordingtimestamp_formset.non_form_errors %}
    <div class="alert alert-error alert-block">
        {{ recordingtimestamp_formset.non_form_errors }}
    </div>
{% endif %}

<form class="form-horizontal" method="post">
    {{ recordingtimestamp_formset.management_form }}

    {% for form in recordingtimestamp_formset %}
      {% if form.instance.speech %}
        <audio class="audio-small" id="audio-speech{{ form.instance.speech.id }}" src="{{ MEDIA_URL }}{{ form.instance.speech.audio }}" controls></audio>
        <script>
           $('#audio-speech{{ form.instance.speech.id }}').mediaelementplayer( { audioWidth: 100, audioHeight: 24, features: [ 'playpause', 'current', 'duration' ] } ); 
        </script>
      {% endif %}
        {% include 'speeches/form.html' %}
    {% endfor %}

    {% include 'speeches/form.html' with submit="Update" type="recording" %}
</form>

<script>
$(function() {
    var re = /^id_timestamps-(\d+)-id$/
    $('input[type=hidden][value=]').each(function () {
        var id = $(this).attr('id')
        if (re.test(id)) {
            $(id.replace(re, '#id_timestamps-$1-DELETE_controls')).hide()
        }
    })
})
</script>

{% endblock %}
