{% extends "base.html" %}
{% load static %}
{% load widget_tweaks %}

{% block inicio %}
<div class="form-group form-group-md col-md-7">
    <h4>Listado Archivos de Audio</h4>
</div>
<div class="form-group form-group-md col-md-2">
    <button type="button" class="btn_web btn btn-danger"  onclick="location.href='/'">INICIO</button>
</div>
{% endblock inicio %}

{% block contenido %}

<fieldset id="set_pago">
    <legend class="titulos">LISTA DE AUDIOS:</legend> 

{% for key, items in diccionario.iteritems %}
    <table class="table table-bordered">
    <thead>
        <tr>
            <th colspan="2"><img style="max-width: 50px;" src="{%  static 'img/carpeta_sound.png' %}" alt="Carpeta Soung"> {{ key.0 }} </th>
            <th style="width: 10%; text-align: center;"><button class="btn btn-info" id="btn{{key.1}}" onclick="mostrar('{{ key.1 }}')"> MOSTRAR </button></th>
        </tr>
    </thead>
    <tbody id="{{ key.1 }}" style="display: none;">   
        <tr>
            <th style="width: 20%;">ARCHIVO</th>
            <th colspan="2">ENLACE</th>
        </tr>
        {% for valor in items %}
        <tr>
            <td>{{ valor.0 }}</td>
            <td style="width: 60%;"> <input type="hidden" id="'{{valor.2}}'" value="{{ valor.1 }}">{{ valor.1 }}</td>
            <td style="width: 10%; text-align: center;"><button type="button" style="font-size: .78em;" class="btn btn-success" onclick="copia_enlace('{{valor.2}}')"> COPIAR ENLACE </button></td>
        </tr>
        {% endfor %}
    </tbody>
    </table>    
{% endfor %}
</fieldset>

<script>

    function mostrar(id){
        elemento = '#' + id
        boton = '#btn' + id
        $(elemento).toggle();

        texto_boton = $(boton).text()

        if (texto_boton == " MOSTRAR ") {
            $(boton).text(" OCULTAR ")
            $(boton).removeClass("btn-info")
            $(boton).addClass("btn-danger")

        }

        if (texto_boton == " OCULTAR ") {
            $(boton).text(" MOSTRAR ")
            $(boton).removeClass("btn-danger")
            $(boton).addClass("btn-info") 
        }
    }

    function copia_enlace(id) {
        var elemento = '#' + id
        var aux = document.createElement("input");
        aux.setAttribute("value", $(elemento).val());
        document.body.appendChild(aux);
        aux.select();
        document.execCommand("copy");
        document.body.removeChild(aux);
        alert('Enlace Copiado')
    }

</script>

{% endblock contenido %}