<!DOCTYPE html>
<html lang="es">
    <head>
        <!--
        # Created on Tue Jul 10
        # @author: jairo ruiz saenz
        -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{{ title }}</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

        <!-- Load plotly.js into the DOM -->
        <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

        <style>
            .aligned-row { display: flex; }
            .borde { border-style: solid; border-width: 1px; border-color: #c2c2c2; }
            .descripcion   { min-height:40px; }
            .min_size_row_meta { min-height:600px !important; }
            /* .max_size_row_meta { max-height:900px !important; } */
            .max_size_row  { max-height:450px !important; }
            .max_size_row2 { height:450px !important;}
            .max_size_row3 { height:450px !important;}
            p { margin-bottom:5px; }
            td { min-width:100px; }
            table > tbody > tr > :nth-child(1) { font-weight:bold; }
            table:not(.highlight_column) > tbody > tr:hover { background-color: #ffff99 !important; }
            table:not(.highlight_column) > tbody > tr:nth-child(even) { background: #ededed;}
            .tabla_sin_bold > table > tbody > tr > :nth-child(1){ font-weight:normal !important; }
            .tableFixHead { overflow-y: auto; height: 100px; }
            .tableFixHead thead th { position: sticky; top: 0; background:#ffffff; }
            tr td, tr th { white-space: nowrap;}
            .white_spaces > tbody > tr > td { white-space: pre-line;}
            .container {width:100%; text-align: center; overflow:display;}
            table#StatusTable tr.matching { background: #ffffdb; }

            table.highlight_column { overflow: hidden !important; }            
            table.highlight_column > tbody > tr > td { position: relative !important; } 
            table.highlight_column > tbody > tr > td:hover::after {
                content: ""; position: absolute;
                background-color: #ffff99 !important;
                left: 0; top: -5000px; height: 10000px;
                width: 100%; z-index: -1;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid">

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">

                    <!-- Header -->
                    <div class="row max_size_row">
                        <div class="col-md-12">
                            <h1>{{ title }}</h1>
                            <em>Reporte generado automáticamente {{ current_time }}</em>
                        </div>
                    </div>

                    <hr>

                    <!-- Metadatos -->
                    {% if html_metadatos_full != None %}
                        <div class="row">
                            <div class="col-md-12 borde min_size_row_meta">
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        {% if link_datos_abiertos != 'NA' %}
                                            <h3><em>Metadatos - <a href='{{ link_datos_abiertos }}' target="_blank">ver en Datos Abiertos</a></em></h3>
                                        {% else %}
                                            <h3><em>Metadatos</em></h3>
                                        {% endif %}
                                    </div>
                                </div>                               

                                <ul class="nav nav-tabs">
                                    <li class="active"><a data-toggle="tab" href="#tab_metadatos">Información general</a></li>
                                    <li><a data-toggle="tab" href="#tab_columnas">Columnas en este conjunto de datos</a></li>
                                </ul>

                                <div class="tab-content">
                                    <!-- Metadatos -->
                                    <div id="tab_metadatos" class="tab-pane fade in active">
                                        <br>
                                        <div class="row hidden-md hidden-lg">
                                            <div class="col-md-12">
                                                <div class="table-responsive">
                                                    {{ html_metadatos_full }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row hidden-xs hidden-sm">
                                            <div class="col-md-6">
                                                <div class="table-responsive">
                                                    {{ html_metadatos_head }}
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="table-responsive">
                                                    {{ html_metadatos_tail }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Columnas -->
                                    <div id="tab_columnas" class="tab-pane fade">
                                        <br>
                                        <div class="row">
                                        <!-- <div class="row hidden-xs hidden-sm"> -->
                                            <div class="col-md-12">
                                                <div class="table-responsive">
                                                    {{ html_descr_col_meta }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <br>
                    {% endif %}

                    <!-- Estadísticas generales -->
                    {% if generales %}
                        <div class="row max_size_row">
                            <div class="col-md-12 borde">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h3><em>Estadísticas generales</em></h3>
                                    </div>
                                </div>
                                <div class="row hidden-md hidden-lg">
                                    <div class="col-md-12">
                                        <div class="table-responsive">
                                            {{ html_data_summary_full }}
                                        </div>
                                    </div>
                                </div>
                                <div class="row hidden-xs hidden-sm">
                                    <div class="col-md-6">
                                        <div class="table-responsive">
                                            {{ html_data_summary_head }}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="table-responsive">
                                            {{ html_data_summary_tail }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>
                    {% endif %}

                    <!-- Muestra de datos -->
                    {% if muestra_datos %}
                        <div class="row">
                            <div class="col-md-12 borde">

                                <h3><em>Muestra de datos</em></h3>
                                <ul class="nav nav-tabs">
                                    <li class="active"><a data-toggle="tab" href="#tab_head">Primeras 10 filas</a></li>
                                    <li><a data-toggle="tab" href="#tab_tail">Últimas 10 filas</a></li>
                                </ul>

                                <div class="tab-content">
                                    <!-- Primeras filas -->
                                    <div id="tab_head" class="tab-pane fade in active">
                                        <br>
                                        <div class="table-responsive tabla_sin_bold">
                                            {{ html_dataframe_head }}
                                        </div>
                                    </div>

                                    <!-- Últimas filas -->
                                    <div id="tab_tail" class="tab-pane fade">
                                        <br>
                                        <div class="table-responsive tabla_sin_bold">
                                            {{ html_dataframe_tail }}
                                        </div>
                                    </div>
                                </div>
                                <hr><em>{{ dataframe_shape }}</em><br><br>
                            </div>
                        </div>
                        <br>
                    {% endif %}

                    <!-- Estadísticas específicas -->
                    {% if seccion_especificas %}
                        <div class="row">
                            <div class="col-md-12 borde">

                                <h3><em>Estadísticas específicas</em></h3>
                                <ul class="nav nav-tabs">
                                    {% if especificas_tipo %} {% if especificas_active == 'tipo' %}<li class="active">{% else %}<li>{% endif %}
                                        <a data-toggle="tab" href="#tab05">Tipo de las columnas</a></li>
                                    {% endif %}

                                    {% if especificas_frecuencias %} {% if especificas_active == 'frecuencias' %}<li class="active">{% else %}<li>{% endif %}
                                        <a data-toggle="tab" href="#tab03">Frecuencia de categorías</a></li>
                                    {% endif %}

                                    {% if especificas_duplicados_filas or especificas_duplicados_columnas %} {% if especificas_active == 'duplicados' %}<li class="active">{% else %}<li>{% endif %}
                                        <a data-toggle="tab" href="#tab04">Datos duplicados</a></li>
                                    {% endif %}

                                    {% if especificas_descriptivas %} {% if especificas_active == 'descriptivas' %}<li class="active">{% else %}<li>{% endif %}
                                        <a data-toggle="tab" href="#tab06">Estadísticas descriptivas</a></li>
                                    {% endif %}
                                </ul>

                                <div class="tab-content" style="text-align: justify; text-justify: inter-word;">
                                    <!-- Tipo de las columnas -->
                                    {% if especificas_tipo %}
                                        {% if especificas_active == 'tipo' %}
                                            <div id="tab05" class="tab-pane fade in active">
                                        {% else %}
                                            <div id="tab05" class="tab-pane fade">
                                        {% endif %}
                                            <br>
                                            <p class="descripcion">
                                                Aquí se muestran los tipos de las columnas del conjunto de datos con tres metodologías diferentes. La columna 'Tipo general' muestra si las variables son numéricas, de texto, booleanas; la columna 'Tipo general (Python)' muestra el tipo de la variable según la función "dtypes" de Python; las columnas 'Tipo especifico' muestran los tipos de las observaciones de cada columna, incluidos datos faltantes ("nan"), como porcentaje del total.
                                            </p>
                                            <div class="row max_size_row2 aligned-row">

                                                <div class="col-md-3 table-responsive">
                                                    <h4><strong><em>Variables</em></strong></h4>
                                                    <p><input type="checkbox" onClick="toggle5(this)" id="select-all_5"> Seleccionar todos</p>
                                                        {% for item in variables_list_2 %}
                                                        <p><input type="checkbox" name="tab5" class="checkbox_tab5" value="{{ item }}"> {{ loop.index }} - {{ item }}</p>
                                                    {% endfor %}
                                                </div>
                                                <div class="col-md-9 table-responsive">
                                                    <table class="table table-condensed tableFixHead" id="OtrosTable">
                                                        <thead>
                                                            <tr>
                                                                <th>Variable</th>
                                                                {% for item in header_list_2 %}
                                                                    <th>{{ item }}</th>
                                                                {% endfor %}
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            {% for row in items_2%}
                                                                <tr>
                                                                    {% for column in row %}
                                                                        {% if loop.index0 == 0 %}
                                                                            <td class="referencia">{{ column }}</td>
                                                                        {% else %}
                                                                            <td>{{ column }}</td>
                                                                        {% endif %}
                                                                    {% endfor %}
                                                                </tr>
                                                            {% endfor %}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}

                                    <!-- Frecuencia de categorías -->
                                    {% if especificas_frecuencias%}
                                        {% if especificas_active == 'frecuencias' %}
                                            <div id="tab03" class="tab-pane fade in active">
                                        {% else %}
                                            <div id="tab03" class="tab-pane fade">
                                        {% endif %}
                                            <br>
                                            <p class="descripcion">
                                                Contiene las 10 categorías más frecuentes de las columnas tipo texto y presenta el porcentaje dentro del total de observaciones. Incluye valores faltantes.
                                            </p>
                                            <div class="row max_size_row2 aligned-row">

                                                <div class="col-md-3 table-responsive">
                                                    <h4><strong><em>Variables</em></strong></h4>
                                                    <p><input type="checkbox" onClick="toggle3(this)" id="select-all_3"> Seleccionar todos</p>
                                                    {% for item in variables_list_3 %}
                                                        <p><input type="checkbox" name="tab3" class="checkbox_tab3" value="{{ item }}"> {{ loop.index }} - {{ item }}</p>
                                                    {% endfor %}
                                                </div>
                                                <div class="col-md-9 table-responsive">
                                                    <table class="table table-condensed tableFixHead" id="StatusTable">
                                                        <thead>
                                                            <tr>
                                                                {% for item in columnas_list_3 %}
                                                                    <th>{{ item }}</th>
                                                                {% endfor %}
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            {% for row in items_3%}
                                                                <tr>
                                                                    {% for column in row %}
                                                                        {% if loop.index0 == 0 %}
                                                                            <td class="referencia">{{ column }}</td>
                                                                        {% else %}
                                                                            <td>{{ column }}</td>
                                                                        {% endif %}
                                                                    {% endfor %}
                                                                </tr>
                                                            {% endfor %}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}

                                    <!-- Datos duplicados -->
                                    {% if especificas_duplicados_filas or especificas_duplicados_columnas %}
                                        {% if especificas_active == 'duplicados' %}
                                            <div id="tab04" class="tab-pane fade in active">
                                        {% else %}
                                            <div id="tab04" class="tab-pane fade">
                                        {% endif %}
                                            <br>
                                            <p class="descripcion">
                                                Cada columna muestra los nombres de las filas y columnas que están duplicadas en el conjunto de datos.{{ mensaje_duplicados }}
                                            </p>
                                            <div class="row max_size_row2 aligned-row">
                                                <div class="col-md-12 table-responsive">
                                                    <ul class="nav nav-tabs">
                                                        {% if especificas_duplicados_filas and not especificas_duplicados_columnas %}
                                                            <li class="active"><a data-toggle="tab" href="#duplic_by_row">Filas</a></li>
                                                        {% elif not especificas_duplicados_filas and especificas_duplicados_columnas %}
                                                            <li class="active"><a data-toggle="tab" href="#duplic_by_column">Columnas</a></li>
                                                        {% else %}
                                                            <li class="active"><a data-toggle="tab" href="#duplic_by_row">Filas</a></li>
                                                            <li><a data-toggle="tab" href="#duplic_by_column">Columnas</a></li>
                                                        {% endif %}
                                                    </ul>
                                                    <div class="tab-content" style="text-align: justify; text-justify: inter-word;">

                                                        <!-- Duplicados por filas -->
                                                        {% if especificas_duplicados_filas %}
                                                            <div id="duplic_by_row" class="tab-pane fade in active">
                                                                <br>
                                                                {% if html_dataframe_duplic_filas != None %}
                                                                    <div class="tabla_sin_bold">
                                                                        {{ html_dataframe_duplic_filas }}
                                                                    </div>
                                                                {% else %}
                                                                    <strong>* El conjunto de datos no contiene filas duplicadas</strong>
                                                                {% endif %}
                                                            </div>
                                                        {% endif %}

                                                        <!-- Duplicados por columnas -->
                                                        {% if especificas_duplicados_columnas %}
                                                            {% if especificas_duplicados_filas %}
                                                                <div id="duplic_by_column" class="tab-pane fade">
                                                            {% else %}
                                                                <div id="duplic_by_column" class="tab-pane fade in active">
                                                            {% endif %}
                                                                <br>
                                                                {% if html_dataframe_duplic_colum != None %}
                                                                    <div class="tabla_sin_bold">
                                                                        {{ html_dataframe_duplic_colum }}
                                                                    </div>
                                                                {% else %}
                                                                    <strong>* El conjunto de datos no contiene columnas duplicadas</strong>
                                                                {% endif %}
                                                            </div>
                                                        {% endif %}

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}

                                    <!-- Estadísticas Descriptivas -->
                                    {% if especificas_descriptivas %}
                                        {% if especificas_active == 'descriptivas' %}
                                            <div id="tab06" class="tab-pane fade in active">
                                        {% else %}
                                            <div id="tab06" class="tab-pane fade">
                                        {% endif %}
                                            <br>
                                            <p class="descripcion">
                                                Contiene información para cada columna de tipo numérico, incluye media, mediana, percentiles, desviación estándar, valores extremos y porcentaje de valores faltantes.
                                            </p>
                                            {% if variables_list != None %}
                                                <div class="row max_size_row2 aligned-row">
                                                    <div class="col-md-3 table-responsive">
                                                        <h4><strong><em>Variables</em></strong></h4>
                                                        <p><input type="checkbox" onClick="toggle6(this)" id="select-all_6"> Seleccionar todos</p>
                                                            {% for item in variables_list %}
                                                            <p><input type="checkbox" name="tab6" class="checkbox_tab6" value="{{ item }}"> {{ loop.index }} - {{ item }}</p>
                                                        {% endfor %}
                                                    </div>
                                                    <div class="col-md-9 table-responsive">
                                                        <table class="table table-condensed tableFixHead" id="EstDescriptivas">
                                                            <thead>
                                                                <tr>
                                                                    <th>Variable</th>
                                                                    {% for item in header_list %}
                                                                        <th>{{ item }}</th>
                                                                    {% endfor %}
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                {% for row in items%}
                                                                    <tr>
                                                                        {% for column in row %}
                                                                            {% if loop.index0 == 0 %}
                                                                                <td class="referencia">{{ column }}</td>
                                                                            {% else %}
                                                                                <td>{{ column }}</td>
                                                                            {% endif %}
                                                                        {% endfor %}
                                                                    </tr>
                                                                {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            {% else %}
                                                <strong>* El conjunto de datos no tiene columnas numéricas</strong>
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                </div>
                                <br>
                            </div>
                        </div>
                        <br>
                    {% endif %}                    

                    <!-- Correlaciones -->
                    {% if seccion_correlaciones %}
                        <div class="row">
                            <div class="col-md-12 borde">

                                <h3><em>Correlaciones</em></h3>
                                <ul class="nav nav-tabs">
                                    {% if corre_pearson_values != None %} {% if correlaciones_active == 'pearson' %}<li class="active">{% else %}<li>{% endif %}
                                        <a data-toggle="tab" href="#tab01b">Pearson</a></li>
                                    {% endif %}
                                    {% if corre_kendall_values != None %} {% if correlaciones_active == 'kendall' %}<li class="active">{% else %}<li>{% endif %}
                                        <a data-toggle="tab" href="#tab02b">Kendall</a></li>
                                    {% endif %}
                                    {% if corre_spearman_values != None %} {% if correlaciones_active == 'spearman' %}<li class="active">{% else %}<li>{% endif %}
                                        <a data-toggle="tab" href="#tab03b">Spearman</a></li>
                                    {% endif %}
                                    {% if corre_cramer_values != None %} {% if correlaciones_active == 'cramer' %}<li class="active">{% else %}<li>{% endif %}
                                        <a data-toggle="tab" href="#tab04b">Cramer</a></li>
                                    {% endif %}
                                    {% if corre_phik_values != None %} {% if correlaciones_active == 'phik' %}<li class="active">{% else %}<li>{% endif %}
                                        <a data-toggle="tab" href="#tab05b">Phik</a></li>
                                    {% endif %}                                    
                                </ul>

                                <div class="tab-content" style="text-align: justify; text-justify: inter-word;">

                                    <!-- correlación numérica - Pearson -->                                    
                                    {% if corre_pearson_values != None %}
                                        {% if correlaciones_active == 'pearson' %}
                                            <div id="tab01b" class="tab-pane fade in active">
                                        {% else %}
                                            <div id="tab01b" class="tab-pane fade">
                                        {% endif %}
                                            <br>
                                            <p class="descripcion">
                                                La correlación de Pearson es una medida de correlación lineal entre dos variables. Varía entre -1 y 1, donde -1 significa que la correlación entre las variables es negativa y total, 0 que no existe la correlación y 1 que hay correlación positiva total. Se calcula como la división de la covarianza de las dos variables con el producto de las desviaciones estándar de cada variable.
                                            </p>
                                            {% if corre_pearson_headers|length > 1 %}
                                                <div class="row max_size_row3 aligned-row">
                                                    <div class="col-md-12">
                                                        <div class="container">
                                                            <div id='corre_pearson' class="max_size_row3"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <p>* En caso de ver mal los labels del eje x, ajustar el zoom del navegador.</p><br>
                                            {% else %}
                                                <p><strong>* El conjunto de datos no tiene columnas numéricas para el cálculo de correlaciones</strong></p>
                                            {% endif %}
                                        </div>
                                    {% endif %}

                                    <!-- correlación numérica - Kendall -->
                                    {% if corre_kendall_values != None %}
                                        {% if correlaciones_active == 'kendall' %}
                                            <div id="tab02b" class="tab-pane fade in active">
                                        {% else %}
                                            <div id="tab02b" class="tab-pane fade">
                                        {% endif %}
                                            <br>
                                            <p class="descripcion">
                                               La correlación de Kendall mide la relación entre dos variables ordinales. Varía entre -1 y 1, donde -1 significa que la correlación entre las variables es negativa total, 0 que no existe la correlación y 1 que hay correlación positiva total. Se calcula como la división de los números concordantes menos los discordantes de pares entre las variables con el número total de pares.
                                            </p>
                                            {% if corre_kendall_headers|length > 1 %}
                                                <div class="row max_size_row3 aligned-row">
                                                    <div class="col-md-12">
                                                        <div class="container">
                                                            <div id='corre_kendall' class="max_size_row3"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <p>* En caso de ver mal los labels del eje x, ajustar el zoom del navegador.</p><br>
                                            {% else %}
                                                <p><strong>* El conjunto de datos no tiene columnas numéricas para el cálculo de correlaciones</strong></p>
                                            {% endif %}
                                        </div>
                                    {% endif %}

                                    <!-- correlación numérica - Spearman -->
                                    {% if corre_spearman_values != None %}
                                        {% if correlaciones_active == 'spearman' %}
                                            <div id="tab03b" class="tab-pane fade in active">
                                        {% else %}
                                            <div id="tab03b" class="tab-pane fade">
                                        {% endif %}
                                            <br>
                                            <p class="descripcion">
                                                La correlación de Spearman es una medida de correlación monotónica que  se usa principalmente para medir la relación entre dos variables ordinales. Varía entre -1 y 1, donde -1 significa una correlación monotónica negativa total, 0 que no hay correlación monotónica y 1 que hay una correlación monotónica positiva total. Se calcula como la división de la covarianza de los rangos de cada variable con el producto de las desviaciones estándar de cada variable.
                                            </p>
                                            {% if corre_spearman_headers|length > 1 %}
                                                <div class="row max_size_row3 aligned-row">
                                                    <div class="col-md-12">
                                                        <div class="container">
                                                            <div id='corre_spearman' class="max_size_row3"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <p>* En caso de ver mal los labels del eje x, ajustar el zoom del navegador.</p><br>
                                            {% else %}
                                                <p><strong>* El conjunto de datos no tiene columnas numéricas para el cálculo de correlaciones</strong></p>
                                            {% endif %}
                                        </div>
                                    {% endif %}

                                    <!-- correlación categórica - Cramer -->
                                    {% if corre_cramer_values != None %}
                                        {% if correlaciones_active == 'cramer' %}
                                            <div id="tab04b" class="tab-pane fade in active">
                                        {% else %}
                                            <div id="tab04b" class="tab-pane fade">
                                        {% endif %}
                                            <br>
                                            <p class="descripcion">
                                                La correlación Cramer V se usas para medir la relación entre dos variables nominales. Varía entre 0 y 1, donde 0 significa que no hay correlación y 1 que la correlación es positiva y total. Se calcula como la raíz cuadrada de la división de estadístico Chi Cuadrado con el mínimo entre el número de filas o columnas y el número total de observaciones.
                                            </p>
                                            {% if corre_cramer_headers|length > 1 %}
                                                <div class="row max_size_row3 aligned-row">
                                                    <div class="col-md-12">
                                                        <div class="container">
                                                            <div id='corre_cramer' class="max_size_row3"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <p>* En caso de ver mal los labels del eje x, ajustar el zoom del navegador.</p><br>
                                            {% else %}
                                                <p><strong>* El conjunto de datos no tiene columnas categóricas para el cálculo de correlaciones</strong></p>
                                            {% endif %}
                                        </div>
                                    {% endif %}

                                    <!-- correlación categórica - Phik -->
                                    {% if corre_phik_values != None %}
                                        {% if correlaciones_active == 'phik' %}
                                            <div id="tab05b" class="tab-pane fade in active">
                                        {% else %}
                                            <div id="tab05b" class="tab-pane fade">
                                        {% endif %}                                    
                                            <br>
                                            <p class="descripcion">
                                                Esta correlación se calcula con el módulo Phik de Python. <a href="https://pypi.org/project/phik/" target="_blank">ver más detalles</a>
                                            </p>
                                            {% if corre_phik_headers|length > 1 %}
                                                <div class="row max_size_row3 aligned-row">
                                                    <div class="col-md-12">
                                                        <div class="container">
                                                            <div id='corre_phik' class="max_size_row3"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <p>* En caso de ver mal los labels del eje x, ajustar el zoom del navegador.</p><br>
                                            {% else %}
                                                <p><strong>* El conjunto de datos no tiene columnas categóricas para el cálculo de correlaciones</strong></p>
                                            {% endif %}
                                        </div>
                                    {% endif %}

                                </div>
                            </div>
                        </div>
                    {% endif %}

                    <!-- Footer -->
                    <div class="row">
                        <div class="col-md-12">
                            <footer class="text-center">
                                <hr>
                                <p>
                                    Reporte generado con <em><a href="https://github.com/ucd-dnp/leila" target="_blank">LEILA - Librería de calidad de datos</a></em> - Versión 0.2
                                </p>
                                <br>
                            </footer>
                        </div>
                    </div>

                    <!-- scripts generales -->
                    <script>
                        // hace el toggle de cada columna en la tabla
                        // de acuerdo con el valor de su respectivo checkbox
                        $("input:checkbox").attr("checked",true).click(function()
                        {
                            var shcolumn="."+$(this).attr("name");
                            $(shcolumn).toggle(display=this.checked);
                        });
                    </script>

                    <!-- scripts para tab3 -->
                    <script>
                        // Filtro de tabla
                        $("input[name='tab3']").change(function () {
                            var classes = [];

                            $("input[name='tab3']").each(function () {
                                if ($(this).is(":checked")) { classes.push($(this).val()); }
                            });

                            if (classes == "") { // if no filters selected, show all items
                                $("#StatusTable tbody tr").hide();
                            } else { // otherwise, hide everything...
                                $("#StatusTable tbody tr").hide();

                                $("#StatusTable tr").each(function () {
                                    var show = false;
                                    var row = $(this);
                                    classes.forEach(function (className) {
                                        if (row.find('td' + '.referencia').html() == className) { show = true; }
                                    });
                                    if (show) { row.show(); }
                                });
                            }
                        });
                    </script>

                    <script>
                        // cambia el valor de los checkboxs de clase 'checkbox_tab3'
                        // de acuerdo con el valor del checkbox de 'seleccionar todos'
                        // y hace el toggle de sus respectivas columnas en la tabla
                        function toggle3(source) {
                            checkboxes = document.getElementsByClassName('checkbox_tab3');
                            for(var i=0, n=checkboxes.length;i<n;i++) {
                                checkboxes[i].checked = source.checked;
                            }

                            if (source.checked == true) {
                                $("#StatusTable tbody tr").show();
                            } else {
                                $("#StatusTable tbody tr").hide();
                            }
                        }
                    </script>

                    <script>
                        // verifica el estado de los checkboxs con clase 'checkbox_tab3',
                        // si uno es false, cambia el valor del checkbox de 'seleccionar todos' a false
                        // si todos son true, cambia el valor del checkbox de 'seleccionar todos' a true
                        $("input[name='tab3']").change(function () {
                            checkboxes = document.getElementsByClassName('checkbox_tab3');
                            var value = true;
                            for(var i=0, n=checkboxes.length;i<n;i++) {
                                if (checkboxes[i].checked == false) {
                                    value = false;
                                }
                            }
                            $('#select-all_3').prop('checked', value);
                        });
                    </script>

                    <!-- scripts para tab5 -->
                    <script>
                        // Filtro de tabla
                        $("input[name='tab5']").change(function () {
                            var classes = [];

                            $("input[name='tab5']").each(function () {
                                if ($(this).is(":checked")) { classes.push($(this).val()); }
                            });

                            if (classes == "") { // if no filters selected, show all items
                                $("#OtrosTable tbody tr").hide();
                            } else { // otherwise, hide everything...
                                $("#OtrosTable tbody tr").hide();

                                $("#OtrosTable tr").each(function () {
                                    var show = false;
                                    var row = $(this);
                                    classes.forEach(function (className) {
                                        if (row.find('td' + '.referencia').html() == className) { show = true; }
                                    });
                                    if (show) { row.show(); }
                                });
                            }
                        });
                    </script>

                    <script>
                        // cambia el valor de los checkboxs de clase 'checkbox_tab5'
                        // de acuerdo con el valor del checkbox de 'seleccionar todos'
                        // y hace el toggle de sus respectivas columnas en la tabla
                        function toggle5(source) {
                            checkboxes = document.getElementsByClassName('checkbox_tab5');
                            for(var i=0, n=checkboxes.length;i<n;i++) {
                                checkboxes[i].checked = source.checked;
                            }

                            if (source.checked == true) {
                                $("#OtrosTable tbody tr").show();
                            } else {
                                $("#OtrosTable tbody tr").hide();
                            }
                        }
                    </script>

                    <script>
                        // verifica el estado de los checkboxs con clase 'checkbox_tab5',
                        // si uno es false, cambia el valor del checkbox de 'seleccionar todos' a false
                        // si todos son true, cambia el valor del checkbox de 'seleccionar todos' a true
                        $("input[name='tab5']").change(function () {
                            checkboxes = document.getElementsByClassName('checkbox_tab5');
                            var value = true;
                            for(var i=0, n=checkboxes.length;i<n;i++) {
                                if (checkboxes[i].checked == false) {
                                    value = false;
                                }
                            }
                            $('#select-all_5').prop('checked', value);
                        });
                    </script>

                    <!-- scripts para tab6 -->
                    <script>
                        // Filtro de tabla
                        $("input[name='tab6']").change(function () {
                            var classes = [];

                            $("input[name='tab6']").each(function () {
                                if ($(this).is(":checked")) { classes.push($(this).val()); }
                            });

                            if (classes == "") { // if no filters selected, show all items
                                $("#EstDescriptivas tbody tr").hide();
                            } else { // otherwise, hide everything...
                                $("#EstDescriptivas tbody tr").hide();

                                $("#EstDescriptivas tr").each(function () {
                                    var show = false;
                                    var row = $(this);
                                    classes.forEach(function (className) {
                                        if (row.find('td' + '.referencia').html() == className) { show = true; }
                                    });
                                    if (show) { row.show(); }
                                });
                            }
                        });
                    </script>

                    <script>
                        // cambia el valor de los checkboxs de clase 'checkbox_tab6'
                        // de acuerdo con el valor del checkbox de 'seleccionar todos'
                        // y hace el toggle de sus respectivas columnas en la tabla
                        function toggle6(source) {
                            checkboxes = document.getElementsByClassName('checkbox_tab6');
                            for(var i=0, n=checkboxes.length;i<n;i++) {
                                checkboxes[i].checked = source.checked;
                            }

                            if (source.checked == true) {
                                $("#EstDescriptivas tbody tr").show();
                            } else {
                                $("#EstDescriptivas tbody tr").hide();
                            }
                        }
                    </script>

                    <script>
                        // verifica el estado de los checkboxs con clase 'checkbox_tab6',
                        // si uno es false, cambia el valor del checkbox de 'seleccionar todos' a false
                        // si todos son true, cambia el valor del checkbox de 'seleccionar todos' a true
                        $("input[name='tab6']").change(function () {
                            checkboxes = document.getElementsByClassName('checkbox_tab6');
                            var value = true;
                            for(var i=0, n=checkboxes.length;i<n;i++) {
                                if (checkboxes[i].checked == false) {
                                    value = false;
                                }
                            }
                            $('#select-all_6').prop('checked', value);
                        });
                    </script>

                    <!-- Heatmaps -->
                    {% if seccion_correlaciones %}
                        <script>
                            // Función para la generación de heat maps de correlación usando plotly
                            function heatMap(graph_id, headers, values) {
                                var data = [
                                  {
                                    x: headers, y: headers, z: values,

                                    xgap : 1, ygap : 1,
                                    type: 'heatmap', zmin: -1, zmax: 1,

                                    colorscale: {{ heatmap_colorscale }},

                                    hoverongaps: false,
                                    hoverinfo: 'all',
                                    hovertemplate: "variable eje x: %{x}<br>variable eje y: %{y}<br>correlación: %{z}<extra></extra>"
                                  }
                                ];
                                var layout = {
                                    title: '',
                                    xaxis: {fixedrange: true, automargin: true, side: 'top'},
                                    yaxis: {fixedrange: true, automargin: true, autorange:"reversed"},

                                    showlegend: true, font: {size: 12},
                                    autosize: true, width:1055,
                                    margin: { l: 50, r: 50, b: 30, t: 50 }
                                };

                                try { Plotly.newPlot(graph_id, data, layout, {displayModeBar: false, responsive: true}); } catch (error) { }
                            }
                            
                            try { heatMap('corre_pearson', {{ corre_pearson_headers }}, {{ corre_pearson_values }}); } catch (error) { }
                            try { heatMap('corre_kendall', {{ corre_kendall_headers }}, {{ corre_kendall_values }}); } catch (error) { }
                            try { heatMap('corre_spearman', {{ corre_spearman_headers }}, {{ corre_spearman_values }}); } catch (error) { }
                            try { heatMap('corre_cramer', {{ corre_cramer_headers }}, {{ corre_cramer_values }}); } catch (error) { }
                            try { heatMap('corre_phik', {{ corre_phik_headers }}, {{ corre_phik_values }}); } catch (error) { }
                        </script>

                        <script>
                            try { var heatmap_1 = document.getElementById('corre_pearson'); } catch (error) { }
                            try { var heatmap_2 = document.getElementById('corre_kendall'); } catch (error) { }
                            try { var heatmap_3 = document.getElementById('corre_spearman'); } catch (error) { }
                            try { var heatmap_4 = document.getElementById('corre_cramer'); } catch (error) { }
                            try { var heatmap_5 = document.getElementById('corre_phik'); } catch (error) { }

                            function resizeHeatmaps() {
                                try { Plotly.Plots.resize(heatmap_1); } catch (error) { }
                                try { Plotly.Plots.resize(heatmap_2); } catch (error) { }
                                try { Plotly.Plots.resize(heatmap_3); } catch (error) { }
                                try { Plotly.Plots.resize(heatmap_4); } catch (error) { }
                                try { Plotly.Plots.resize(heatmap_5); } catch (error) { }
                            }

                            window.onload   = function() { resizeHeatmaps(); };
                            window.onresize = function() { resizeHeatmaps(); };
                            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { resizeHeatmaps(); });

                            var scale = 'scale(1)';
                            document.body.style.webkitTransform = scale;   // Chrome, Opera, Safari
                            document.body.style.msTransform = scale;       // IE 9
                            document.body.style.transform = scale;         // General
                        </script>
                    {% endif %}

                    <script>
                        // Mouse event handler - para el mouse over de la tabla Frecuencia de categorías
                        $('#StatusTable').on('mouseover', 'tr', function() {
                            var textToMatch = $(this).children(":first").text();

                            $('tr').each(function() {
                                var text = $(this).children(":first").text();

                                if (textToMatch === text)
                                    $(this).addClass('matching');
                            });
                        });

                        $('#StatusTable').on('mouseout', 'tr', function() {
                            $('.matching').removeClass('matching');
                        });
                    </script>

                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </body>
</html>