{% extends "layout.html" %}

{% block title %} Group View {% endblock %}
{% block inpage_title %}
    <h1 class="display-3"> Group View </h1>
{% endblock %}

{% block side_nav %}
    <ul class="list-unstyled components">
        <li class="active"><a href="#groups">Experiment Groups</a></li>
    </ul>
{% endblock %}

{% block page_content %}

    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">

            <div class="reload-button">
                <button type="button" id="refresh" class="btn btn-circle btn-md">
                    <i class="fas fa-sync"></i>
                </button>
            </div>

        </div>
    </nav>

    <div class="topic-group" id="all-view" style="font-size: 0.7vw;">

        <table class="table table-hover" id="experiment-table">
            <thead class="thead-dark">
            <tr>
                <th scope="col">#</th>
                <th scope="col">Group</th>
                <th scope="col">Size</th>
            </tr>
            </thead>

            <tbody>

            {% for exp, info in exps.items()|sort(reverse=true) %}
                <tr class="exp-row">
                    <th scope="row">{{ loop.index }}</th>
                    <td class="id-col">{{ exp }}</td>
                    <td>{{ info|length }}</td>
                </tr>
            {% endfor %}

            </tbody>
        </table>
    </div>

    <div class="topic-group" id="selected-groups-preview" style="font-size: 0.7vw;">

        <div class="main-title">
            <h3 class="justify-content-center">Select Groups to See Preview</h3>
        </div>

    </div>
{% endblock %}

{% block js_footer %}
    <script>
        // DATA TABLE
        let experiment_table = $("#experiment-table");
        let exp_dt = experiment_table.DataTable({
            dom: 'Bfrtip',
            pageLength: 300,
            buttons: [
                'columnsToggle',
                {
                    extend: 'selected',
                    text: 'Analyse Selected',
                    action: function (e, dt, node, config) {
                        let rows = dt.rows({selected: true});
                        let group_names = rows[0].map(i => $(exp_dt.row(i).node()).find(".id-col")[0].innerText)

                        if (group_names.length > 1) {
                            let get_ids = ids.map(id => "ids=" + id + "&")
                            window.location = 'compare?' + get_ids.join("");
                        } else {
                            let exps = {{ exps | tojson }};
                            let ids = Object.keys(exps[group_names[0]]);
                            let get_ids = ids.map(id => "ids=" + id + "&")
                            window.location = 'group?' + get_ids.join("") + "group=" + group_names[0] + "&";
                        }

                    }
                }
            ],
            select: true
        });

        exp_dt.on("select", function (e, dt, type, indexes) {
                if (type === 'row') {
                    let rows = dt.rows({selected: true});
                    let group_names = rows[0].map(i => $(exp_dt.row(i).node()).find(".id-col")[0].innerText)

                    $.ajax({
                        type: 'POST',
                        url: "{{ url_for("make_group_preview") }}",
                        contentType: 'application/json;charset=UTF-8',
                        data: JSON.stringify({'names': group_names.join(",")}),
                        success: function (ret) {
                            $("#selected-groups-preview").html(ret)
                        }
                    });
                }
            }
        )

    </script>
{% endblock %}