{% extends 'base.html' %}

{% load static %}

{% block contenido %}

    <div class="container">
    <form action="{% url 'Lista_Create' %}" method="POST">
                         {% csrf_token %}
            <div class="row s12 center">
            <h4>CREAR LISTA DE CONTACTOS</h4>
        </div>
        <div class="row">
            <div class="input-field col s12">
          <input name="nombre" id="nombre"  required="true" type="text" >
          <label for="nombre">Nombre de la Lista</label>
        </div>
        </div>

        <div class="row center">
            <div class="col s12">
                <button class="btn waves-effect waves-light" type="submit" name="action">Guardar
              <i class="material-icons right">save</i>
                </button>
            </div>

                </div>

            <div class="row center">
                <div class="col s12 center">
                    <h5>Listas</h5>
                </div>
            <div class="col s12 center">
                <table class="striped center responsive-table">
        <thead>
          <tr>
              <th>Título</th>
              <th>Miembros</th>


              <th>Acciones</th>
          </tr>
        </thead>
                          {% for template in listas %}
                              <tr>
                              <td>{{ template.nombre }}</td>
                                  <td>{{ template.contactos.all.count }}</td>

                              <td>

                                  <a  class="tooltipped" data-tooltip="Ver Empleados" href="{% url 'Lista_Empleados' id=template.id %}" ><i  class="material-icons">preview</i></a>
                                  <a  class="tooltipped" data-tooltip="Descargar Excel" href="{% url 'Lista_Empleados_Excel' id=template.id %}" ><i  class="material-icons">arrow_circle_down</i></a>

                                  <a  class="tooltipped" data-tooltip="Añadir (Excel)" href="{% url 'Lista_Import_Excel' id=template.id %}" ><i  class="material-icons">add_circle</i></a>
                                   <a class="tooltipped" data-tooltip="Editar Nombre" href="{% url 'Lista_Edit' id=template.id%}"><i class="material-icons">edit</i></a>
              <a class="tooltipped" data-tooltip="Borrar Lista" href="#" onclick="delete_lista({{ template.id}} ,'{{template.nombre}}')"><i class="material-icons">delete</i></a>

                              </td>
                              </tr>

                    {% endfor %}
                </table>
            </div>

            </div>


    </form>

      <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Eliminar Lista</h4>
      <p>Se va a eliminar la lista <b><span id="lista_name"></span></b></p>
    </div>
    <div class="modal-footer">

        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Cancelar</a>
      <a href="#!"  onclick="submitform()"  class="modal-close waves-effect waves-green btn-flat">Aceptar</a>
    </div>
  </div>
 <form id="form2" name="form2"  method="POST" action="{% url "Delete_Lista" %}">
             {% csrf_token %}
             <input id="lista_id" type="hidden" name="lista_id" value=""/>

         </form>
    </div>

{% endblock %}

{% block jscripts %}
    <script>
    $(document).ready(function(){
    $('.tooltipped').tooltip();
  });
     function delete_lista(id,name) {
        $("#lista_name").text(name);
        $('input[name="lista_id"]:hidden').val(id);
        $("#modal1").modal('open');
        console.log('delete');

    }
    function submitform() {
      document.form2.submit();
}
    function closemodal() {
therapistid=null;
    $('#modal1').close();
}
    function limpiar(){

  $('#texto').val('');
  M.textareaAutoResize($('#texto'));    }
    </script>
{% endblock %}