{% extends "Admin.html" %}

{% block titlearea %}

<div class="align-center d-flex flex-wrap justify-content-between my-4" id="title-container">
    <h2 id="uproot-title" class="flex-grow-1 fw-semibold me-3">
        {% translate %}Session{% endtranslate %}
        <a href="../" class="font-monospace link-subtle">{{ sname }}</a>
        <span class="fw-light text-secondary">&rsaquo; {% translate %}Data{% endtranslate %}</span>
    </h2>
    <div class="d-flex flex-wrap flex-grow-1 justify-content-between">
        <div class="btn-group my-1 me-2" id="buttongroup-normal-table">
            <button type="button" class="btn btn-outline-uproot" onclick="refreshData()">{% translate %}Refresh{% endtranslate %}</button>
            <button type="button" class="btn btn-outline-uproot" onclick="fullScreenTable()">{% translate %}Full-screen table{% endtranslate %}</button>
            <button type="button" class="btn btn-outline-uproot dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>
            <ul class="dropdown-menu">
                <li>
                    <span class="dropdown-item" onclick="fullScreenTable()" role="button">
                        {% translate %}Full-screen table{% endtranslate %}
                    </span>
                </li>
                <li>
                    <span class="dropdown-item" onclick="toggleTableWidth()" role="button">
                        <span class="d-inline-block" id="full-width-text">{% translate %}Full-width table{% endtranslate %}</span>
                        <span class="d-none" id="normal-width-text">{% translate %}Normal-width table{% endtranslate %}</span>
                    </span>
                </li>
            </ul>
        </div>
        <div class="d-flex flex-wrap gap-2" id="buttons-normal-table">
            {% if has_pipelines %}
            <a class="btn btn-outline-uproot my-1" href="../pipelines/">{% translate %}Pipelines{% endtranslate %}</a>
            {% endif %}
            <a class="btn btn-uproot my-1" href="../data/">{% translate %}Download data{% endtranslate %}</a>
        </div>
    </div>
    <div class="btn-group btn-group-sm d-none my-1 me-2" id="buttons-fullscreen-table">
        <button type="button" class="btn btn-outline-uproot" onclick="refreshData()">{% translate %}Refresh{% endtranslate %}</button>
        <button type="button" class="btn btn-outline-uproot" onclick="normalTable()">{% translate %}Normal table{% endtranslate %}</button>
    </div>
</div>

{% endblock titlearea %}


{% block head %}

<style>
    .table-sticky-outer-full-width {
        margin-left: 50%;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        width: 99vw;
        transform: translate(-50%, 0%);
    }

    /* Styling for Tabulator */
    .tabulator-col[aria-sort="ascending"] .tabulator-col-content, .tabulator-col[aria-sort="descending"] .tabulator-col-content {
        background-color: rgba(var(--bs-uproot-rgb), 0.25) !important;
    }
    .tabulator-cell[tabulator-field="id"], .tabulator-col[tabulator-field="id"] {
        color: var(--bs-uproot);
    }
    .tabulator-cell[tabulator-field="id"], .tabulator-cell[tabulator-field="label"], .tabulator-cell[tabulator-field="player"] {
        font-weight: bolder;
    }
    .tabulator-col-content {
        background-color: var(--bs-uproot-bg-light);
        border-bottom: 1px solid var(--bs-uproot-border-subtle);
        border-right: 1px dashed var(--bs-uproot-border-subtle);
    }
    .tabulator-col-content, .tabulator-cell {
        padding: 10px !important;
    }
    #data-table .tabulator-header .tabulator-headers,
    #data-table .tabulator-tableholder .tabulator-table,
    #data-table .tabulator-row {
        white-space: nowrap;
        width: max-content;
        min-width: 100%;
    }
    .h-fullscreen-title {
        height: 1.5vh !important;
    }
    .h-fullscreen-table {
        height: 88.5vh;
    }
    .start-fullscreen {
        left: 0.65vw;
    }
    .w-fullscreen {
        width: 98.7vw;
    }
    .modal .modal-body textarea {
        font-family: var(--bs-font-monospace);
    }
    .btn-sm-alike, .btn-group-sm-alike {
        padding-bottom: 0.25rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 0.25rem;
        font-size: 0.875rem;
        border-radius: 0.25rem;
    }
    .fs-like-btn-sm {
        font-size: 0.875rem;
    }
</style>

{% endblock head %}


{% block main %}

<div class="mt-0 table-sticky-outer" id="tableContainer">
    <div class="container p-0" id="tableMain">
        <div class="border-bottom border-top border-uproot-subtle table-sticky-inner" id="tableOuter">
        </div>
    </div>
</div>

<div id="filter-data-to-display">
    <div class="d-flex justify-content-between mt-3">
        <div>
            <div class="btn-group dropup p-0">
                <span class="border border-uproot px-3 py-2 rounded-start text-uproot">
                    {% translate %}Filter by app{% endtranslate %}<span class="font-monospace" id="current-app-filter"></span>
                </span>
                <button type="button" class="btn btn-outline-uproot dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>
                <ul class="dropdown-menu" id="all-app-names"></ul>
            </div>
        </div>
        <div>
            <div class="border border-uproot input-group rounded" style="width: 15rem;">
                <span class="text-uproot px-3 py-2">{% translate %}Filter by round{% endtranslate %}</span>
                <input
                    class="form-control border-0 border-start border-uproot rounded-end text-center" id="filter-by-round-input"
                    min="0"
                    onchange="filterThenRefreshData('round', this.value)"
                    oninput="filterThenRefreshData('round', this.value)"
                    type="number"
                >
            </div>
        </div>
        <div>
            <button class="btn btn-outline-uproot py-2" onclick="removeFilter()" type="button">
                {% translate %}Show current state{% endtranslate %}
            </button>
        </div>
    </div>
</div>

<div id="filter-data-to-display-sm" hidden>
    <div class="container d-flex justify-content-between mt-3 pb-3">
        <div>
            <div class="btn-group btn-group-sm btn-sm-alike dropup p-0">
                <span class="border border-uproot px-3 py-2 rounded-start text-uproot">
                    {% translate %}Filter by app{% endtranslate %}<span class="font-monospace" id="current-app-filter"></span>
                </span>
                <button type="button" class="btn btn-outline-uproot bnt-sm dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>
                <ul class="dropdown-menu" id="all-app-names"></ul>
            </div>
        </div>
        <div>
            <div class="border border-uproot fs-like-btn-sm input-group input-group-sm rounded" id="filter-by-round" style="width: 14rem;">
                <span class="text-uproot px-3 py-2">{% translate %}Filter by round{% endtranslate %}</span>
                <input
                    class="form-control form-control-sm border-0 border-start border-uproot rounded-end text-center" id="filter-by-round-input"
                    min="0"
                    onchange="filterThenRefreshData('round', this.value)"
                    oninput="filterThenRefreshData('round', this.value)"
                    type="number"
                >
            </div>
        </div>
        <div>
            <button class="btn btn-outline-uproot btn-sm py-2" onclick="removeFilter()" type="button">
                {% translate %}Show current state{% endtranslate %}
            </button>
        </div>
    </div>
</div>

{% endblock main %}


{% block late %}

<script src="{{ internalstatic('viewdata.js') }}"></script>
<script>
    uproot.onStart(() => initializeTable());

    var filterButtonsTemp = "";
    function fullScreenTable() {
        filterButtonsTemp = I("filter-data-to-display").innerHTML;
        I("buttongroup-normal-table").classList.add("d-none");
        I("buttons-normal-table").classList.add("d-none");
        I("buttons-fullscreen-table").classList.remove("d-none");
        I("filter-data-to-display").innerHTML = I("filter-data-to-display-sm").innerHTML;
        I("filter-data-to-display").classList.add("fixed-bottom");
        I("tableContainer").setAttribute("class", "position-absolute h-fullscreen-table start-fullscreen w-fullscreen");
        I("title-container").classList.add("mb-1");
        I("title-container").classList.add("mt-3");
        I("title-container").classList.remove("my-4");
        I("uproot-footer").classList.add("d-none");
        I("uproot-navbar").classList.add("d-none");
        I("uproot-title").classList.add("h4");
        I("uproot-title").classList.add("pt-1");
        writeAllAppNames();
    }

    function normalTable() {
        I("buttons-fullscreen-table").classList.add("d-none");
        I("buttongroup-normal-table").classList.remove("d-none");
        I("buttons-normal-table").classList.remove("d-none");
        I("filter-data-to-display").innerHTML = filterButtonsTemp;
        I("filter-data-to-display").classList.remove("fixed-bottom");
        I("tableContainer").setAttribute("class", "mt-0 table-sticky-outer");
        I("title-container").classList.remove("mb-1");
        I("title-container").classList.remove("mt-3");
        I("title-container").classList.add("my-4");
        I("uproot-footer").classList.remove("d-none");
        I("uproot-navbar").classList.remove("d-none");
        I("uproot-title").classList.remove("h4");
        I("uproot-title").classList.remove("pt-1");
    }

    var fullWidthTable = false;
    function toggleTableWidth() {
        if (fullWidthTable == true) {
            I("full-width-text").className = "d-inline-block";
            I("normal-width-text").className = "d-none";
            I("tableContainer").classList.remove("table-sticky-outer-full-width");
            fullWidthTable = false;
        } else {
            I("full-width-text").className = "d-none";
            I("normal-width-text").className = "d-inline-block";
            I("tableContainer").classList.add("table-sticky-outer-full-width");
            fullWidthTable = true;
        };
    };
</script>

{% endblock late %}