<div class="wrapper-bootstrap">
    <div class="container-fluid">
        <div class="titulo">
            <div class="row my-4">
                <div class="col-lg-8">
                    <h1 class="heading-3 mt-3 mb-2">FM & Workplaces | Suscriptores</h1>
                </div>
                
                <div class="col-12">
                    <form action="{{download_link}}" method="POST">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="form-group">
                                <label for="exampleInputEmail1">Desde</label>
                                <input type="date" name="download_from" class="form-control">
                            </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                <label for="exampleInputEmail1">Hasta</label>
                                <input type="date" name="download_to" class="form-control">
                            </div>
                            </div>
                            <input type="hidden" name="download" value="1">
                            <div class="col-12 mt-2">
                                <button class="btn btn-primary" type="submit" role="submit"><i class="fas fa-download mr-2"></i>Descargar Listado</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <table class="table table-striped w-auto table-responsive table-responsive-xl">
                    <caption>Listado de Suscriptores</caption>
                <thead>
                    <tr>
                        <th class="th-md">Fecha de suscripción</th>
                        <th class="th-md">Nombre</th>
                        <th class="th-md">Apellido</th>
                        <th class="th-md">Profesión</th>
                        <th class="th-lg">Empresa</th>
                        <th class="th-md">Cargo</th>
                        <th class="th-md">Teléfono</th>
                        <th class="th-lg">E-Mail</th>
                        <th class="th-lg">Domicilio</th>
                        <th class="th-md">CP</th>
                        <th class="th-md">Ciudad</th>
                        <th class="th-lg">Región</th>
                        <th class="th-lg">País</th>
                        <th class="th-lg">Domicilio Laboral</th>
                        <th class="th-lg">Rubro</th>
                        <th class="th-lg">Otro Rubro</th>
                        <th class="th-lg">Producto o Servicio</th>
                        <th class="th-md">Empleados</th>
                        <th class="th-md">Part. en la empresa</th>
                    </tr>
                </thead>
                <tbody>
                    {% for subscriber in subscribers %}
                    <tr>
                        <td>{{ subscriber.subscription_date }}</td>
                        <td>{{ subscriber.first_name }}</td>
                        <td>{{ subscriber.last_name }}</td>
                        <td>{{ subscriber.profession }}</td>
                        <td>{{ subscriber.company }}</td>
                        <td>{{ subscriber.position }}</td>
                        <td>{{ subscriber.phone }}</td>
                        <td>{{ subscriber.email }}</td>
                        <td>{{ subscriber.address }}</td>
                        <td>{{ subscriber.postal_code }}</td>
                        <td>{{ subscriber.city }}</td>
                        <td>{{ subscriber.region }}</td>
                        <td>
                            {% if subscriber.country %}
                                {{ country_choices[subscriber.country] }}
                            {% else %}
                                No actualizado
                            {% endif %}     
                        </td>
                        <td>
                            {% if subscriber.is_working_address %}
                                Si
                            {% else %}
                                No
                            {% endif %}
                        </td>
                        <td>
                            {% if subscriber.company_area %}
                                {{ company_area_choices[subscriber.company_area] }}
                            {% else %}
                                No actualizado
                            {% endif %}  
                        </td>
                        <td>{{ subscriber.company_area_other }}</td>
                        <td>{{ subscriber.main_product }}</td>
                        <td>
                            {% if subscriber.employees_quantity %}
                                {{subscriber.employees_quantity}}
                            {% else %}
                                No
                            {% endif %}
                        </td>
                        <td>
                            {% if subscriber.company_participation %}
                                Si
                            {% else %}
                                No
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                </table>
            </div>

            {# <div class="col-lg-6 my-4">
                <a class="btn btn-primary" href="{{download_link}}" role="button"><i class="fas fa-download mr-2"></i>Descargar Listado</a>
            </div> #}
            <div class="col-lg-6 my-4">
                <nav aria-label="navigation">
                <ul class="pagination justify-content-end">
                    {% if pagination.current_page > 1 %}
                    <li class="page-item">
                        <a class="page-link" href="{{pagination.base_url}}{{1}}" tabindex="-1">Primera</a>
                    </li>
                    {% endif %}    
                    
                    {% if pagination.current_page > 2 %}
                        {% for i in min(pagination.current_page - 1, 3)..1 %}
                            <li class="page-item"><a class="page-link" href="{{pagination.base_url}}{{pagination.current_page - i}}">{{pagination.current_page - i}}</a></li>
                        {% endfor %}
                    {% endif %} 
                    
                    <li class="page-item active" aria-current="page">
                    <a class="page-link" href="#">{{pagination.current_page}} <span class="sr-only">(current)</span></a>
                    </li>
                    
                    {% if pagination.total_pages - pagination.current_page > 1 %}
                        {% for i in 1..min(pagination.total_pages - pagination.current_page, 3) %}
                            <li class="page-item"><a class="page-link" href="{{pagination.base_url}}{{pagination.current_page + i}}">{{pagination.current_page + i}}</a></li>
                        {% endfor %}
                    {% endif %} 
    
                    {% if pagination.current_page < pagination.total_pages %}
                    <li class="page-item">
                        <a class="page-link" href="{{pagination.base_url}}{{pagination.total_pages}}" tabindex="-1">Última</a>
                    </li>
                    {% endif %}
                </ul>
                </nav>
            </div>
        </div>
    </div>
</div>