{% extends 'base.html' %}

{% load static %}
{% load render_table from django_tables2%} 
{% load export_url from django_tables2%} 
{% block contenido %}

<div class="container-fluid content-bg" style="padding: 0px 30px; background-color: rgba(242,242,242,0.5);">
  <div class="row">
<nav class="bcrumbs">
  <div class="nav-wrapper">
    <div class="col s12">
      <a href="https://remate.continua.com.mx/" class="breadcrumb">Inicio</a>
      <a href="{% url 'Whatsapp_Historic' %}" class="breadcrumb">Historial de Envíos</a>
      <a href="#" class="breadcrumb">Resumen de Envío</a>
    </div>
  </div>
</nav>
</div>
</div>  


    <div class="container-fluid content-bg">
            <div class="row s12 center">
            <h4>Resumen de envío de Whatsapp a contactos</h4>
        </div>
 <div class="row s12 center">
            <h5>{{ titulo}}</h5>
        </div>


        <div class="row s12 center">
            <h6>Enviado a {{ target }} contactos</h6>
        </div>
    <div class="row s12 center">
    <div class="col s4">Entregados: {{estadisticas.total_entregados}} /{{target}} </div>
    <div class="col s4">Abiertos: {{estadisticas.total_abiertos}}/{{estadisticas.total_entregados}} </div>
    <div class="col s4">Rechazados: {{estadisticas.total_rechazados}}/{{target}} </div>
    </div>
        <div class="row s12 center">
    <div class="col s4">Tasa de entrega : {{estadisticas.tasa_entrega}}%  </div>
    <div class="col s4">Tasa de apertura: {{estadisticas.tasa_apertura}}% </div>
    <div class="col s4">Tasa de rebote: {{estadisticas.tasa_rebote}}% </div>
    </div>

    <div class="row s12 center">
      {% render_table tabla %}

    </div>
<div class="row s12 center">
  <p style="font-size: 13px; text-align: left;"><br>Descarga en un archivo el detalle de todos los mensajes enviados a tus contactos:<br><br></p>
    {% for format in export_formats %}
    <a class="col s3 link-xport" href="{% export_url format %}">
      <i class="material-icons icon-wh">description</i> Exportar a <code>{{ format }} </code>
    </a>
    {% endfor %}
  </div>

    </div>


{% endblock %}

{% block jscripts %}

{% endblock %}