
<div class="animated fadeInRight overlay" id="listasId">
    <div class="col s12 card-panel white">
        <br>
        <div class="row">
            <div class="col s3">
                <input type="text" id="busqueda" class="form-control" v-bind:placeholder="traducirFrase('Busqueda')" oninput="refresca()">
            </div>

        </div>
        <table class="table striped highlight responsive-table">
            <thead>
                <tr>
                <tr>
                    <th id="th1">{{traducirFrase("ID")}}</th>
                    <th id="th2">{{traducirFrase("Nombre")}}</th>
                    <th id="th3">{{traducirFrase("Descripción")}}</th>
                    <th id="th4">{{traducirFrase("Fecha ultima llamada")}}</th>
                    <th id="th5">{{traducirFrase("Campaña")}}</th>
                    <th id="th6">{{traducirFrase("Distribución de Registros")}}</th>
                    <th id="th7">{{traducirFrase("Registros")}}</th>
                    <th id="th8">{{traducirFrase("Opciones")}}</th>
                    <?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) {?>
                        <th id="th9">{{traducirFrase("Activo")}}</th>
                    <?php }?>
                    <?php if ($_SESSION["Grupo"] == GRUPO_SUPERVISORES) {?>
                        <th id="th9">{{traducirFrase("Activo")}}</th>
                    <?php }?>
                </tr>
            </thead>
            <tbody>
                <tr v-for="dato in d.Listas">
                    <td>{{dato.list_id}}</td>
                    <td>{{dato.list_name}}</td>
                    <td>{{dato.list_description}}</td>
                    <td>{{dato.list_lastcalldate}}</td>
                    <td>{{dato.campaign_id}}</td>
                    <td>
                        <div class="barraProgreso">
                            <div v-for="(status,index) in dato.Status" class="elementoBarraProgeso" :style='"--porcentaje:"+status.porcentaje+"%;--color:"+status.color+";--curvatura:"+(dato.Status.length == 1?"10px 10px 10px 10px":(index==0?"10px 0px 0px 10px":(index==dato.Status.length-1)?"0px 10px 10px 0px":"0px 0px 0px 0px"))' :title='status.estado+" - "+status.cuenta+" - "+status.porcentaje.toFixed(2)+"%"'>
                            </div>
                        </div>
                    </td>
                    <td>{{dato.totalRegistros}}</td>
                    <td>
                        <?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) {?>
                            <a href="#" class="tooltipped" v-bind:data-tooltip="translate('Editar lista')" data-position="top" v-on:click="editarLista(dato.list_id)"><i class="material-icons">edit</i></a>
                            <a href="#" class="tooltipped" v-bind:data-tooltip="translate('Borrar lista')" data-position="top" v-on:click="deleteList(dato.list_name,dato.list_id)"><i class="material-icons">delete</i></a>
                        <?php }?>
                        <a href="#" class="tooltipped" v-bind:data-tooltip="translate('Añadir registros')" data-position="top" v-on:click="anadirLead(dato.list_name,dato.list_id)"><i class="material-icons">add</i></a>
                        <a href="#" class="tooltipped" v-bind:data-tooltip="translate('Eliminar registros')" data-position="top" @click="eliminarLead(dato.list_name, dato.list_id)"><i class="material-icons">remove</i></a>
                        <a href="#" class="tooltipped" v-bind:data-tooltip="translate('Ver detalle de lista')" data-position="top" v-on:click="swipeComponent('settings',dato.list_id,dato.list_name)"><i class="material-icons">remove_red_eye</i></a>
                        <?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) {?>
                            <a href="#" class="tooltipped" v-bind:data-tooltip="translate('Duplicar lista')" data-position="top" v-on:click="duplicarLista(dato.list_name,dato.list_id)"><i class="material-icons">content_copy</i></a>
                        <?php }?>
                        <a class="tooltipped" v-bind:data-tooltip="translate('Descargar reporte de lista')" data-position="top" @click="downloadListReport('listas/getLeads?csv=true&lista='+dato.list_id)"><i class="material-icons">cloud_download</i></a>
                        <a class="tooltipped" v-bind:data-tooltip="translate('Reporte de lista')" data-position="top" :href="'reporteListaFecha?lista='+dato.list_id"><i class="material-icons">search</i></a>
                        <a href="#" class="tooltipped" v-bind:data-tooltip="translate('Reiniciar lista')" data-position="top" v-on:click="reiniciarLista(dato.list_name,dato.list_id)"><i class="material-icons">refresh</i></a </td>
                        <?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) {?>
                        <td>

                        <div class="switch">
                            <label class="active">
                                Off
                                <input type="checkbox" class="" v-on:click="activaCampana(dato.list_id)" :checked="dato.active == 'Y'">
                                <span id="switch" class="lever  "></span>
                                On
                            </label>
                        </div>
                    </td>
                    <?php }?>

                    <?php if ($_SESSION["Grupo"] == GRUPO_SUPERVISORES) {?>
                        <td>

                        <div class="switch">
                            <label class="active">
                                Off
                                <input disabled type="checkbox" class="" :checked="dato.active == 'Y'">
                                <span id="switch" class="lever  "></span>
                                On
                            </label>
                        </div>
                    </td>
                    <?php }?>

                </tr>
            </tbody>
        </table>
        <center><img src="<?=IMG_ADMIN;?>spinner.gif" id='barrita'></center>
        <br>
        <?php if ($_SESSION["Grupo"] == GRUPO_ADMINS) {?>
            <div class="center">
                <a class="waves-effect waves-light btn blue modal-trigger lighten-2 " href="#formuModal" onClick="limpiar();dameCampanas();" id="Nueva Lista">{{traducirFrase("Nueva lista")}}</a>
            </div>
        <?php }?>
        <center><img src="<?=IMG_ADMIN;?>spinner.gif"  width="60" height="60" style="display: none; margin-top: 2rem;" id="spinnerPagination"></center>
        <ul class="pagination center" id='paginacion'>

        </ul>
    </div>
</div>