{% extends 'bases/base.html'%}
{% load static %}
{% block content %}
                <div class="app-main" id="main">
                    <!-- begin container-fluid -->
                    <div class="container-fluid">
                        <!-- begin row -->
                        <div class="row">
                            <div class="col-md-12 m-b-30">
                                <!-- begin page title -->
                                <div class="d-block d-sm-flex flex-nowrap align-items-center">
                                    <div class="page-title mb-2 mb-sm-0">
                                        <h1>Documentación</h1>
                                    </div>
                                    <div class="ml-auto d-flex align-items-center">
                                        <nav>
                                            <ol class="breadcrumb p-0 m-b-0">
                                                <li class="breadcrumb-item">
                                                    <a href="/"><i class="ti ti-home"></i></a>
                                                </li>
                                                <li class="breadcrumb-item active text-primary" aria-current="page">Documentación de ReportBro Designer</li>
                                            </ol>
                                        </nav>
                                    </div>
                                </div>
                                <!-- end page title -->
                            </div>
                        </div>
                        <!-- end row -->
                        <!--faq-contant-start-->
                        <div class="row">
                            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <div class="card card-statistics faq-contant p-0 p-sm-4">
                                    <div class="card-body">
                                        <div class="tab nav-center">
                                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                                <li class="nav-item">
                                                    <a class="nav-link active show" id="research-tab" data-toggle="tab" href="#research" role="tab" aria-controls="research" aria-selected="true"> Qué es Reportbro </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" id="design-tab" data-toggle="tab" href="#design" role="tab" aria-controls="design" aria-selected="false"> Compatibilidad
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" id="develop-tab" data-toggle="tab" href="#develop" role="tab" aria-controls="develop" aria-selected="false">
                                                       Especificaciones</a>
                                                </li>
                                                
                                            </ul>
                                            <div class="tab-content" id="v-pills-tabContent">
                                                <div class="tab-pane fade show pt-20 active" id="research" role="tabpanel">
                                                    <div class="accordion" id="accordionsimplefill">
                                                        <div class="mb-2 acd-group">
                                                            <div class="card-header bg-primary rounded-0">
                                                                <h5 class="mb-0">
                                                                    <a href="#collapse" class="btn-block text-white text-left acd-heading" data-toggle="collapse">1. Libreria ReportBro Designer </a>
                                                                </h5>
                                                            </div>
                                                            <div id="collapse" class="collapse show" data-parent="#accordionsimplefill">
                                                                <div class="card-body" style="text-align: justify;">
                                                                    <p><b>ReportBro</b>
                                                                     Designer es un plugin JavaScript que se puede integrar en su aplicación web.
                                                                         Aunque esto requiere un poco más de trabajo al principio, tener una herramienta de 
                                                                         diseño de plantillas integrada tiene bastantes beneficios como descubrirás leyendo. 
                                                                        La instalación es sencilla incluyendo algunas librerías JavaScript e inicializando 
                                                                        el Diseñador con algo de código HTML y JavaScript.</p>
                                                                        <p>Está optimizado para informes sencillos, es decir, para mostrar datos (texto, datos tabulares o imágenes) 
                                                                            exactamente como se definen en una plantilla de diseño. 
                                                                            Todos los parámetros se pasan directamente al informe y, por lo tanto, <b>ReportBro </b> no requiere conocimientos de SQL (u otro lenguaje de consulta) para crear un informe. Por el contrario, el uso de las mismas solicitudes de datos en la aplicación web subyacente y para la generación de informes elimina el riesgo de posibles incoherencias entre los datos mostrados en la pantalla y el informe impreso.
                                                                        </p>
                                                                        <p>  <b> ReportBro</b>
                                                                         permite diseñar fácil y rápidamente informes con un diseño perfecto. Imprimir la página actual en el pie de página es tan sencillo como insertar variables predefinidas para la página actual y el recuento total de páginas.
                                                                             Incluso para generar salidas Excel no se necesita ninguna configuración adicional debido a que ReportBro tiene una estructura muy clara es fácil de aprender.
                                                                            
                                                                           </p>

                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mb-2 acd-group">
                                                            <div class="card-header rounded-0 bg-primary">
                                                                <h5 class="mb-0">
                                                                    <a href="#collapse2" class="btn-block text-white text-left acd-heading collapsed" data-toggle="collapse">2. Libreria reportbro-lib
                                                                        </a>
                                                                </h5>
                                                            </div>
                                                            <div id="collapse2" class="collapse" data-parent="#accordionsimplefill">
                                                                <div class="card-body">
                                                                    <p> <b> ReportBro-lib</b> es una librería para generar informes PDF y XLSX escrita en python para su uso conjunto con <b>Django</b>. 
                                                                        Las plantillas de informes se pueden crear con <b>ReportBro Designer</b>, un plugin Javascript que se puede integrar en su aplicación web.</p>

                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="acd-group border-bottom-0">
                                                            <div class="card-header rounded-0 bg-primary">
                                                                <h5 class="mb-0">
                                                                    <a href="#collapse3" class="btn-block text-white text-left acd-heading collapsed" data-toggle="collapse">3.  ReportBro Admin</a>
                                                                </h5>
                                                            </div>
                                                            <div id="collapse3" class="collapse" data-parent="#accordionsimplefill">
                                                                <div class="card-body">
                                                                    <p><b>Proyecto libre que une las librerías JavaScript de ReportBro designer y la libreria reportbro-lib.</b></p>
                                                                    <p>Este proyecto constituye una app de django que permite la administración y fácil integración de todas las librerías referentes a ReportBro.</p>

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


                                                <div class="tab-pane fade  pt-20" id="design" role="tabpanel">
                                                    <div class="accordion" id="accordionsimplefill">
                                                        <div class="mb-2 acd-group">
                                                            <div class="card-header bg-primary rounded-0">
                                                                <h5 class="mb-0">
                                                                    <a href="#collapse" class="btn-block text-white text-left acd-heading" data-toggle="collapse">1. Librerias utilizadas </a>
                                                                </h5>
                                                            </div>
                                                            <div id="collapse" class="collapse show" data-parent="#accordionsimplefill">
                                                                <div class="card-body" style="text-align: justify;">
                                                                   
                                                                           <p> 
                                                                           
                                                                                 </p>


                                                                                 <div class="card card-statistics">
                                                                                    <div class="card-header">
                                                                                       
                                                                                    </div>
                                                                                    <div class="card-body">
                                                                                        <div class="list-group">
                                                                                            <a href="javascript:void(0)" class="list-group-item list-group-item-action flex-column align-items-start active">
                                                                                                <div class="d-flex w-100 justify-content-between">
                                                                                                    <h5 class="mb-1 text-white">ReportBro Designer JS</h5>
                                                                                                    
                                                                                                </div>
                                                                                                <p class="text-white d-sm-none"><small>Versión del 2024</small></p>
                                                                                                <p class="mb-1 text-white">Se utilizó la liberia correpondiente a <b>ReportBro Designer</b>
                                                                                                    en su versión gratuita, por lo tanto solo podrá ser utilizadas las funciones disponibles de esa versión. 
                                                                                                      </p>
                                                                                               
                                        
                                                                                            </a>
                                                                                            <div href="javascript:void(0)" class="list-group-item list-group-item-action flex-column align-items-start">
                                                                                                <div class="d-flex w-100 justify-content-between">
                                                                                                    <h5 class="mb-1">Referencia de código</h5>
                                                                                                    
                                                                                                </div>
                                                                                                
                                                                                                <p class="mb-1"><b>Esta app es una versión mejorada del ejemplo de Albumsreport creada para ReportBro Designer.</b></p>
                                                                                                <b class="text-muted">Versión original disponible en <a href="https://github.com/jobsta/albumapp-django">AQUÍ</a> .</b>
                                                                                               
                                                                                            </div>
                                                                                            
                                                                                            <div href="javascript:void(0)" class="list-group-item list-group-item-action flex-column align-items-start">
                                                                                                <div class="d-flex w-100 justify-content-between">
                                                                                                    <h5 class="mb-1">Reportbro-lib</h5>
                                                                                                
                                                                                                </div>
                                                                                               
                                                                                                <p class="mb-1">Compatible con Python >= 3.7 , 

                                                                                                    Genera reportes pdf y xlsx , 
                                                                                                    Soporta (repeticiones)cabecera y pie de página, 

                                                                                                    Permite formatos predefinidos y propios para las páginas del reporte, 
                                                                                                    
                                                                                                    Utiliza los elementos: Textos, línea, imagen, barcodes, tablas, ruptura de páginas y secciones , 
                                                                                                    Permite el estilizado de textos y elementos y puede evaluar expresiones, definir condicionales y formatos de
                                                                                                     </p>
                                                                                               
                                                                                            
                                                                                               
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>

                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mb-2 acd-group">
                                                            <div class="card-header rounded-0 bg-primary">
                                                                <h5 class="mb-0">
                                                                    <a href="#collapse2" class="btn-block text-white text-left acd-heading collapsed" data-toggle="collapse">2. Bases de Datos Compatibles
                                                                        </a>
                                                                </h5>
                                                            </div>
                                                            <div id="collapse2" class="collapse" data-parent="#accordionsimplefill">
                                                                <div class="card-body">
                                                                    <p> <b> Es compatible con todas las bases de datos ajustables para Django: SQLite, Postgres, MySQL, etc</b> </p>

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

                                                <div class="tab-pane fade  pt-20" id="develop" role="tabpanel">
                                                   
                                                   {% include 'especif.html' %}
                                                  
                                                </div>
                                            
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--faq-contant-end-->
                    </div>
                    <!-- end container-fluid -->
                </div>
            {% endblock %}
           