{% extends "layout.html" %}
{% block head %}
    {{ super() }}
    <style>

    div.dataTables_wrapper {
        width: auto;
        margin: auto;
    }

    </style>
{% endblock %}
{% block content %}
    <h1> SoSciKit</h1>
    <h3> Social Science Kit - Open Source Software for Social Science</h3>
    <h2>select action</h2>

        <div class="row">

            <div class="col-sm-6">

            <form action = "{{url_for('action')}}" method = "POST">


                <p> Select type action  </p>
                <input type="radio" onclick="alert('this action could take a few minutes')" onmouseover="display_description('profiling')" name="select_action" value="profiling"> profiling <br>
                <input type="radio" name="select_action" value="calc" onmouseover="display_description('calc')"> calc<br>
                <input type="radio" name="select_action" value="recode" onmouseover="display_description('recode')"> recode <br>
                <input type="radio" name="select_action" value="monovariate" onmouseover="display_description('monovariate')" checked> monovariate <br>
                <input type="radio" name="select_action" value="multi cross tab" onmouseover="display_description('crosstab')"> crosstab and typological classification <br>
                <input type="radio" name="select_action" value="bivariate_and_regression" onmouseover="display_description('bivariate')">bivariate_and_regression<br>
                <input type="radio" name="select_action" value="k-mean" onmouseover="display_description('kmeans')"> k-mean classification <br>

                <p>file status = {{ selected_file }} </p>


                <input type="submit">
                </form>
            </div>
                <div class="col-sm-6">
                    <div id="action_description">
                        Ciao
                    </div>


                </div>
        </div>

    <div class="row">

            <div class="col-sm-4">
            <h3> first 500 rows </h3>
    {{ html_data | safe}}
            </div>
            <div class="col-sm-8">
            </div>




    <script>
    $(document).ready( function () {
    $('#head_data').DataTable(
        {"scrollY": true,
        "scrollX": true}
    );
    } );
    </script>
    <script>
    function display_description(content) {
        if (content == 'profiling') {
            document.getElementById("action_description").innerHTML = pandas_profiling;
        }
        else if (content == "monovariate") {
            document.getElementById("action_description").innerHTML = monovariate;
        }
        else if (content == "bivariate") {
            document.getElementById("action_description").innerHTML = bivariate;
        }
        else if (content == "crosstab") {
            document.getElementById("action_description").innerHTML = crosstab;
        }
        else if (content == "kmeans") {
            document.getElementById("action_description").innerHTML = kmeans;
        }
        else if (content == "calc") {
            document.getElementById("action_description").innerHTML = calc;
        }
        else if (content == "recode") {
            document.getElementById("action_description").innerHTML = recode;
        }
    }


    var pandas_profiling = ` <h2> profiling </h2>
    <p> For each column the following statistics - if relevant for the column type - are presented in an interactive HTML report:</p>

    <ul>
    <li>Essentials: type, unique values, missing values </li>
    <li>Quantile statistics like minimum value, Q1, median, Q3, maximum, range, interquartile range </li>
    <li>Descriptive statistics like mean, mode, standard deviation, sum, median absolute deviation, coefficient of variation, kurtosis, skewness </li>
    <li>Most frequent values </li>
    <li>Histogram </li>
    <li>Correlations highlighting of highly correlated variables, Spearman, Pearson and Kendall matrices </li>
    <li>Missing values matrix, count, heatmap and dendrogram of missing values </li>
    </ul>
    <p> imported from pandas-profiling library </p>`;


    var monovariate = `<h2> monovariate </h2>`;

    var bivariate = `<h2> bivariate and regression </h2>`;

    var crosstab = `<h2> crosstab </h2>`;

    var kmeans = `<h2> k-means </h2>`;

    var calc = `<h2> calc </h2>`;
    var recode = `<h2> recode </h2>`;

    </script>


{% endblock %}






