<div class="animated fadeInLeft card-panel white">
    <div class='row'>
        <div class='col s10 offset-s1 '>
            <center>
                <h3>{{nombreLista}}</h3>
            </center>
        </div>
    </div>
    <div class='row'>
        <div class="col s12 ">
            <h5>{{traducirFrase("Detalles")}}</h5>
            <table class="responsive-table striped">
                <thead>
                    <tr v-if="dataBuffer.Tabla5 && dataBuffer.Tabla5.total && dataBuffer.Tabla5.total.Registros">
                        <th>{{traducirFrase("Estado")}}</th>
                        <th>{{traducirFrase("Nombre del estatus")}}</th>
                        <th v-for='n in dataBuffer.Tabla5.total.Registros.length'>{{n-1}}</th>
                        <th>{{traducirFrase("Subtotal")}}</th>
                        <th>{{traducirFrase("Opciones")}}</th>
                    </tr>
                    <tr v-else>
                        <th>{{traducirFrase("Estado")}}</th>
                        <th>{{traducirFrase("Nombre del estatus")}}</th>
                        <th>0</th>
                        <th>{{traducirFrase("Subtotal")}}</th>
                        <th>{{traducirFrase("Opciones")}}</th>
                    </tr>
                </thead>
                <tbody v-if="dataBuffer.Tabla5 && dataBuffer.Tabla5.Registros && dataBuffer.Tabla5.Registros.length > 0">
                    <tr v-for='stat in dataBuffer.Tabla5.Registros'>
                        <td>{{stat.Status}}</td>
                        <td>{{stat.NombreStatus}}</td>
                        <td v-for='pas in stat.Pasadas'>
                            {{pas}}
                        </td>
                        <td>{{stat.subtotal}}</td>
                        <td>
                            <a href="#" class="tooltipped" v-bind:data-tooltip="translate('Reiniciar estado')" data-position="top" v-on:click="resetListStatus(stat.Status, stat.NombreStatus)"><i class="material-icons">refresh</i></a>
                            <a href="#" class="tooltipped" v-bind:data-tooltip="translate('Descargar reporte de estado')" data-position="top" v-on:click="downloadStatusList(stat.Status, listActive)"><i class="material-icons">file_download</i></a>
                        </td>
                    </tr>
                </tbody>
                <tbody v-else>
                    <tr>
                        {{ traducirFrase("No hay informacion que mostrar") }}
                    </tr>
                </tbody>
                <thead>
                    <tr v-if="dataBuffer.Tabla5 && dataBuffer.Tabla5.total">
                        <th colspan='2'>Total</th>
                        <th v-for='tot in dataBuffer.Tabla5.total.Registros'>
                            {{tot}}
                        </th>
                        <th>{{dataBuffer.Tabla5.total.total}}</th>
                        <th></th>
                    </tr>
                    <tr v-else>
                        <th colspan='2'>Total</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="col s12  ">
            <h5>{{traducirFrase("Estatus en la lista")}}</h5>
            <table class="responsive-table striped">
                <thead>
                    <tr>
                        <th>{{traducirFrase("Estatus")}}</th>
                        <th>{{traducirFrase("Nombre del estado")}}</th>
                        <th>{{traducirFrase("Llamado")}}</th>
                        <th>{{traducirFrase("No llamado")}}</th>
                        <th>{{traducirFrase("Marcable")}}</th>
                        <th>{{traducirFrase("Porcentaje")}}</th>
                    </tr>
                </thead>
                <tbody v-if="dataBuffer.Tabla1 && dataBuffer.Tabla1.Registros && dataBuffer.Tabla1.Registros.length > 0">
                    <tr v-for='stat in dataBuffer.Tabla1.Registros'>
                        <td>{{stat.status}}</td>
                        <td>{{stat.nombreStatus}}</td>
                        <td>{{stat.llamado}}</td>
                        <td>{{stat.noLlamado}}</td>
                        <td>{{stat.marcable}}</td>
                        <td>{{stat.penetracion}}%</td>
                    </tr>
                </tbody>
                <tbody v-else>
                    <tr>
                        {{ traducirFrase("No hay informacion que mostrar") }}
                    </tr>
                </tbody>
                <thead>
                    <tr>
                        <th colspan='2'>{{traducirFrase("Subtotales")}}</th>
                        <th>{{ dataBuffer.Tabla1 && dataBuffer.Tabla1.subtotales ? dataBuffer.Tabla1.subtotales.llamado : "-"}}</th>
                        <th>{{ dataBuffer.Tabla1 && dataBuffer.Tabla1.subtotales ? dataBuffer.Tabla1.subtotales.noLlamado : "-"}}</th>
                        <th></th>
                        <th></th>
                    </tr>
                    <tr>
                        <th colspan='2'>{{traducirFrase("Totales")}}</th>
                        <th>{{dataBuffer.Tabla1 && dataBuffer.Tabla1.totales ? dataBuffer.Tabla1.totales.llamado : "-"}}</th>
                        <th></th>
                        <th>{{ dataBuffer.Tabla1 && dataBuffer.Tabla1.totales ? dataBuffer.Tabla1.totales.marcable : "-" }}</th>
                        <th>{{ dataBuffer.Tabla1 && dataBuffer.Tabla1.totales ? dataBuffer.Tabla1.totales.penetracion : "-" }}%</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="col s6  ">
            <h5>{{traducirFrase("Zonas horarias en esta lista")}}</h5>
            <table class="responsive-table striped">
                <thead>
                    <tr>
                        <th>{{traducirFrase("GMT (Tiempo Local)")}}</th>
                        <th>{{traducirFrase("Llamado")}}</th>
                        <th>{{traducirFrase("No llamado")}}</th>
                    </tr>
                </thead>
                <tbody v-if="dataBuffer.Tabla2 && dataBuffer.Tabla2.Registros && dataBuffer.Tabla2.Registros.length > 0">
                    <tr v-for='zona in dataBuffer.Tabla2.Registros'>
                        <td>{{zona.GTM}}</td>
                        <td>{{zona.llamado}}</td>
                        <td>{{zona.noLlamado}}</td>
                    </tr>
                </tbody>
                <tbody v-else>
                    <tr>
                        {{ traducirFrase("No hay informacion que mostrar") }}
                    </tr>
                </tbody>
                <thead>
                    <tr>
                        <th>{{traducirFrase("Subtotales")}}</th>
                        <th>{{dataBuffer.Tabla2 && dataBuffer.Tabla2.subtotales ? dataBuffer.Tabla2.subtotales.llamado : "-"}}</th>
                        <th>{{dataBuffer.Tabla2 && dataBuffer.Tabla2.subtotales ? dataBuffer.Tabla2.subtotales.noLlamado : "-"}}</th>
                    </tr>
                    <tr>
                        <th>{{traducirFrase("Total")}}</th>
                        <th colspan='2'>{{ dataBuffer.Tabla2 ? dataBuffer.Tabla2.total : "-" }}</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="col s6  ">
            <h5>{{traducirFrase("Dueños en esta lista")}}</h5>
            <table class="responsive-table striped">
                <thead>
                    <tr>
                        <th>{{traducirFrase("Dueño")}}</th>
                        <th>{{traducirFrase("Llamado")}}</th>
                        <th>{{traducirFrase("No llamado")}}</th>
                    </tr>
                </thead>
                <tbody v-if="dataBuffer.Tabla3 && dataBuffer.Tabla3.Registros && dataBuffer.Tabla3.Registros.length > 0">
                    <tr v-for='dueno in dataBuffer.Tabla3.Registros'>
                        <td>{{dueno.dueno}}</td>
                        <td>{{dueno.llamado}}</td>
                        <td>{{dueno.noLlamado}}</td>
                    </tr>
                </tbody>
                <tbody v-else>
                    <tr>
                        {{ traducirFrase("No hay informacion que mostrar") }}
                    </tr>
                </tbody>
                <thead>
                    <tr>
                        <th>{{traducirFrase("Subtotales")}}</th>
                        <th>{{ dataBuffer.Tabla3.subtotales ? dataBuffer.Tabla3.subtotales.llamado : "-" }}</th>
                        <th>{{ dataBuffer.Tabla3.subtotales ? dataBuffer.Tabla3.subtotales.noLlamado : "-" }}</th>
                    </tr>
                    <tr>
                        <th>{{traducirFrase("Total")}}</th>
                        <th colspan='2'>{{ dataBuffer.Tabla3 ? dataBuffer.Tabla3.total : "-"}}</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class='col s2 offset-s5'>
            <br>
            <button id="botonBack" class="waves-effect waves-light btn center-align" v-on:click="swipeComponent('settingsDef')">{{traducirFrase("Volver")}}<i class="material-icons right">arrow_back</i></button>
        </div>
    </div>
</div>
