{% extends "layout.html" %}

{% block title %} Overview {% endblock %}
{% block inpage_title %}
    <h1 class="display-3"> Experiment Overview </h1>
    {#                <h3> A Subtitle </h3>#}
{% endblock %}

{% block side_nav %}
    <ul class="list-unstyled components">
        <li class="active"><a href="#bookmark-view">Bookmarked Experiments</a></li>
        <li><a href="#all-view">Other Experiments</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>
                <button type="button" class="btn btn-warning" id="clear-empty"><i class="fas fa-trash-alt"></i>
                    Clear All Empty
                </button>

                <button type="button" class="btn btn-warning" id="clear-short"><i class="fas fa-trash-alt"></i>
                    Clear All Short
                </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">Agent ID</th>
                <th scope="col">Environment</th>
                <th scope="col">Config</th>
                <th scope="col">Policy</th>
                <th scope="col">Gatherer</th>
                <th scope="col">Model</th>
                <th scope="col">Reward Function</th>
                <th scope="col">Date</th>
                <th scope="col">Host</th>
                <th scope="col">Iterations</th>
                <th scope="col">Reward</th>
                <th scope="col">Weights</th>
                <th scope="col">Actions</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 class="name-col">{{ info.env }}</td>
                    <td>{{ info.config_name }}</td>
                    <td>{{ info.policy }}</td>
                    <td>{{ info.gatherer }}</td>
                    <td>{{ info.model }}</td>
                    <td>{{ info.reward.identifier }}</td>
                    <td>{{ info.date }}</td>
                    <td>{{ info.host }}</td>
                    <td>{{ info.iterations }}</td>
                    <td>{{ info.max_reward }}</td>
                    <td>{{ info.model_available }}</td>
                    <td class="actions">
                        <span class="delete-item"><i class="fas fa-trash-alt"></i></span>
                        <span class="pin-item"><i class="far fa-bookmark"></i></span>
                    </td>
                </tr>
            {% endfor %}

            </tbody>
        </table>
    </div>
{% endblock %}

{% block js_footer %}
    <script>
        $("#clear-empty").on("click", function () {
            $.get({
                url: "{{ url_for("clear_all_empty") }}",
                success: function (data) {
                    alert("Cleared " + data["deleted"] + " experiments.");
                    location.reload();
                },
                error: function () {
                    alert("Failed to delete.")
                }
            });
        });

        $("#clear-short").on("click", function () {
            $.get({
                url: "{{ url_for("clear_all_short") }}",
                success: function (data) {
                    alert("Cleared " + data["deleted"] + " experiments.");
                    location.reload();
                },
                error: function () {
                    alert("Failed to delete.")
                }
            });
        });

        // ACTIONS
        $(".delete-item").on("click", function () {
            let eid = $(this).parent().parent().find("td.id-col").text();
            console.log(eid);
            $.ajax({
                type: 'POST',
                url: "{{ url_for("delete_experiment") }}",
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify({'id': eid}),
                success: function (ret) {
                    location.reload();
                }
            });
        });

        $(".pin-item").on("click", function () {
            let eid = $(this).parent().parent().find("td.id-col").text();
            console.log(eid);
            $.ajax({
                type: 'POST',
                url: "{{ url_for("bookmark") }}",
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify({'id': eid}),
                success: function (ret) {
                    location.reload();
                }
            });
        });

        // DATA TABLE
        let experiment_table = $("#experiment-table");
        let exp_dt = experiment_table.DataTable({
            dom: 'BPfrtip',
            columnDefs: [
                {
                    searchPanes: {
                        show: false
                    },
                    targets: [0, 1, 6, 7, 8, 9, 5, 10]
                },
                {
                    searchPanes: {
                        show: true
                    },
                    targets: [2]
                }
            ],
            pageLength: 300,

            buttons: [
                'columnsToggle',
                {
                    extend: 'selected',
                    text: 'Analyse Selected',
                    action: function (e, dt, node, config) {
                        let rows = dt.rows({selected: true});
                        let ids = rows[0].map(i => $(exp_dt.row(i).node()).find(".id-col")[0].innerText);
                        console.log(ids);
                        if (ids.length > 1) {
                            let get_ids = ids.map(id => "ids=" + id + "&")
                            window.location = 'compare?' + get_ids.join("");
                        } else {
                            window.location = 'experiment/' + ids[0];
                        }

                    }
                },
                {
                    extend: 'selected',
                    text: 'Delete Selected',

                    action: function (e, dt, node, config) {
                        let rows = dt.rows({selected: true});
                        let ids = rows[0].map(i => $(exp_dt.row(i).node()).find(".id-col")[0].innerText)

                        if (confirm("Are you sure you want to delete " + ids.length + " experiments from your disk?")) {
                            $.ajax({
                                type: 'POST',
                                url: "{{ url_for("delete_experiments") }}",
                                contentType: 'application/json;charset=UTF-8',
                                data: JSON.stringify({'ids': ids.join(",")}),
                                success: function (ret) {
                                    dt.ajax.reload();
                                }
                            });
                        }

                    }
                },
                {
                    extend: 'selected',
                    text: 'Regroup Selected',

                    action: function (e, dt, node, config) {
                        let rows = dt.rows({selected: true});
                        let ids = rows[0].map(i => $(exp_dt.row(i).node()).find(".id-col")[0].innerText)

                        let new_group = prompt("Regroup " + ids.length + " experiments as:")

                        if (new_group != null) {
                            $.ajax({
                                type: 'POST',
                                url: "{{ url_for("regroup_experiments") }}",
                                contentType: 'application/json;charset=UTF-8',
                                data: JSON.stringify({'ids': ids.join(","), 'group': new_group}),
                                success: function (ret) {
                                    dt.ajax.reload();
                                }
                            });
                        }
                    }
                }
            ],
            select: true
        });

    </script>
{% endblock %}