{% extends 'layouts/default/page.html' %}

{% load bootstrap4 %}

{% block content %}

    {% if not utterances %}

    <div class="alert alert-warning">No results</div>

    {% else %}

    Sort:
    <ul>
        <li> <a href="/corpus/search-utterances/?collection_key={{ collection_key }}&sort=snr">SNR</a> </li>
        <li> <a href="/corpus/search-utterances/?collection_key={{ collection_key }}&sort=length">Duration</a> </li>
    </ul>

    <div class="card mb-2">
        <div class="card-body">
            Collection key: <b>{{ collection_key }}</b>
            <br>
            Records: <b>{{ count_all }}</b>
            <br>
            <br>
            Summary time: <br>
            - Seconds: <b>{{ summary_time }}</b> <br>
            - Minutes: <b>{{ summary_time_min }}</b> <br>
            - Hours: <b>{{ summary_time_hours }}</b> 
        </div>
    </div>

    {% for utterance in utterances %}

    <div class="card mb-2">
        <div class="card-body">
            <audio controls src="/media/{{ utterance.get_filename_path }}" type="audio/wav">
                Your browser does not support the <code>audio</code> element.
            </audio>
            <br>
            <code>{{ utterance.label }}</code>
            <br>
            <br>
            Duration: <b>{{ utterance.length }}</b> sec.
            <br>
            SNR: <b>{{ utterance.get_snr_formatted }}</b>
            <br>
            Loudness: <b>{{ utterance.get_loudness_formatted }}</b>
            <br>
            Label lang: <b>{{ utterance.label_lang }}</b>
            <br>
            Audio lang: <b>{{ utterance.audio_lang }}</b>
        </div>
    </div>

    {% endfor %}

    {% bootstrap_pagination utterances size="small" extra=request.GET.urlencode %}

    {% endif %}

{% endblock %}