{% extends 'base.html' %}
{% load static %}

{% block stylesheets %}
    <style>
        body .container{
            padding-top: 100px;
            height: 100%;
            flex: 1 0;
        }
    </style>

{% endblock %}

{% block body %}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://stephino.github.io/dist/recorder.js"></script>


    <script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.js"></script>
    <script src="//wzrd.in/standalone/blob-util@latest"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            document.getElementById('a0').click();
            document.getElementById('a1').click();

        });
    </script>

    <style type="text/css">
        .row > a {
            display: inline-block;
            text-align: center;
            font-size: 20px;
            line-height: 50px;
            vertical-align: middle;
            width: 50px;
            height: 50px;
            border-radius: 20px;
            color: #fff;
            font-weight: bold;
            text-decoration: underline;
            background-color: #0093E9;
            background-image: -webkit-gradient(linear, left bottom, left top, from(#0093E9), to(#80D0C7));
            background-image: -o-linear-gradient(bottom, #0093E9 0%, #80D0C7 100%);
            background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
            float: right;
            margin-left: 20px;
            cursor: pointer;
        }
        .row > a:hover {
            text-decoration: none;
        }
        .row > a:active {
            background-image: -webkit-gradient(linear, left top, left bottom, from(#0093E9), to(#80D0C7));
            background-image: -o-linear-gradient(top, #0093E9 0%, #80D0C7 100%);
            background-image: linear-gradient(180deg, #0093E9 0%, #80D0C7 100%);
        }
    </style>
    {% for r,value in respuestas.items %}
        <div class="card mb-5">
            <h5 class="card-header font-weight-bold">Respuesta {{ forloop.counter }}</h5>
            <div class="card-body">
                <div class="row-fluid justify-content-center align-content-center" id="audioControls">

                    <div class="row ml-1">
                        <div class="col-md-6">
                            <label>Fecha de nacimiento: </label>
                            <p>{{ value.datos.fechaNacimiento }}</p>
                        </div>

                        <div class="col-md-6">
                            <label>Fecha de la respuesta: </label>
                            <p>{{ value.datos.date|date:"d/m/yy" }}</p>
                        </div>
                    </div>
                    <div class="row ml-1">
                        <div class="col-md-6">
                            <label>Lugar de nacimiento</label>
                            <p>{{ value.datos.paisNacimiento }}, {{ value.datos.ciudadNacimiento }}</p>
                        </div>

                        <div class="col-md-6">
                            <label>Lugar de residencia actual</label>
                            <p>{{ value.datos.paisActual }}, {{ value.datos.ciudadActual }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                {% for a in value.audios %}
                    <div class="row mb-3">
                        <audio controls controlsList="nodownload" src="/static/audios/{{ a }}.wav"></audio>
                        <a href="/static/audios/{{ a }}.wav" id="a0" name="212287" download="{{ a }}.wav">▼</a>
                    </div>
                {% endfor %}
            </div>
        </div>

    {% endfor %}
    <div style="padding-bottom: 100px !important;"></div>

{% endblock %}

{% block footer1 %}
{% endblock %}

{% block action_buttons %}

{% endblock %}