@* JATOS status card *@
<div class="card card-body bg-body-tertiary text-center mb-4" id="jatosStatus">
    <div class="row">
        <div class="col-sm-3">
            <span data-bs-tooltip="Number of studies (aka experiments) on this JATOS server. First is the number of currently stored studies and in brackets is the total number studies (including the deleted ones).">
                Studies
            </span>
            <div class="fs-4 fw-bold placeholder-glow" id="jatosStatusStudies"><span class="placeholder col-1"></span></div>
        </div>
        <div class="col-sm-3">
            <span data-bs-tooltip="Number of all study results on this JATOS server - How many studies were run so far? First is the number of currently stored study results and in brackets is the total number of study results (including the deleted ones).">
                Study results
            </span>
            <div class="fs-4 fw-bold placeholder-glow" id="jatosStatusStudyResults"><span class="placeholder col-1"></span></div>
        </div>
        <div class="col-sm-3">
            <span data-bs-tooltip="Number of all participants (aka workers) of all studies on this JATOS server. First is the number of currently stored workers and in brackets is the total number of workers (including the deleted ones).">
                Workers
            </span>
            <div class="fs-4 fw-bold placeholder-glow" id="jatosStatusWorkers"><span class="placeholder col-1"></span></div>
        </div>
        <div class="col-sm-3">
            <span data-bs-tooltip="Number of all users (aka experimenters) on this JATOS server">
                Users
            </span>
            <div class="fs-4 fw-bold placeholder-glow" id="jatosStatusUsers"><span class="placeholder col-1"></span></div>
        </div>
    </div>
</div>

@* Latest users table and latest study runs table *@
<div class="row row-cols-1 row-cols-md-2 g-4">
    <div class="col">
        <div class="card h-100" id="latestUsers">
            <h5 class="card-header text-center"data-bs-tooltip="The 10 latest users and the last time they were active (except the signed-in user).">Latest Users</h5>
            <div class="card-body bg-body-tertiary">
                <table class="table">
                    <thead>
                    <tr>
                        <th data-bs-tooltip="Last time this user was active">Time</th>
                        <th>User</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="placeholder-glow"><span class="placeholder col-6"></span></td>
                        <td class="placeholder-glow"><span class="placeholder col-6"></span></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100" id="latestStudyRuns">
            <h5 class="card-header text-center" data-bs-tooltip="The 10 studies that were active last">Latest study runs</h5>
            <div class="card-body bg-body-tertiary">
                <table class="table">
                    <thead>
                    <tr>
                        <th data-bs-tooltip="Time when this study run was last seen">Time</th>
                        <th>Study title</th>
                        <th data-bs-tooltip="All users who are members of this study">Members</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="placeholder-glow"><span class="placeholder col-4"></span></td>
                        <td class="placeholder-glow"><span class="placeholder col-4"></span></td>
                        <td class="placeholder-glow"><span class="placeholder col-4"></span></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script @{helper.CSPNonce.attr} type="module">
    import * as Alerts from "@routes.Assets.versioned("lib/jatos-gui/javascripts/alerts.js")";
    import * as Helpers from "@routes.Assets.versioned("lib/jatos-gui/javascripts/helpers.js")";


    (() => {
        $.getJSON({
            url: window.routes.Admin.status,
            success: function(status) {
                $("#jatosStatusStudies").text(`${status.studyCount} (${status.studyCountTotal})`);
                $("#jatosStatusStudyResults").text(`${status.studyResultCount} (${status.studyResultCountTotal})`);
                $("#jatosStatusWorkers").text(`${status.workerCount} (${status.workerCountTotal})`);
                $("#jatosStatusUsers").text(status.userCount);

                $("#latestUsers .table > tbody").html(fillLatestUsers(status.latestUsers));
                $("#latestStudyRuns .table > tbody").html(fillLatestStudyRuns(status.latestStudyRuns));
                Helpers.activatePopovers("#latestStudyRuns");
                $("#latestUsers .timeago, #latestStudyRuns .timeago").each((i, e) => timeago.render(e)); // Render timeago
            },
            error: () => Alerts.warning("Couldn't get JATOS status.")
        });
    })();

    function fillLatestUsers(latestUsers) {
        if (latestUsers.length == 0) {
            return '<tr><td class="text-center" colspan="2">no data yet</td></tr>';
        }

        const htmlArray = [];
        latestUsers.forEach((e) => {
            htmlArray.push(`
                <tr>
                    <td class="timeago no-info-icon" datetime="${new Date(e.time).toISOString()}" data-bs-tooltip="${Helpers.getLocalTimeSimple(e.time)}"></td>
                    <td>${Helpers.generateFullUserString(e.name, e.username, e.authMethod)}</td>
                </tr>
            `);
        });
        return htmlArray.join("");
    }

    function fillLatestStudyRuns(latestStudyRuns) {
        if (latestStudyRuns.length == 0) {
            return '<tr><td class="text-center" colspan="3">no data yet</td></tr>';
        }

        const htmlArray = [];
        latestStudyRuns.forEach((studyRun) => {
            htmlArray.push(`
                <tr>
                    <td><span class="timeago no-info-icon" datetime="${new Date(studyRun.time).toISOString()}" data-bs-tooltip="${Helpers.getLocalTimeSimple(studyRun.time)}"></span></td>
                    <td>${Helpers.trimTextWithThreeDots(studyRun.studyTitle, 50)}</td>
                    <td>${Helpers.generateMembersHtml(studyRun.members)}</td>
                </tr>
            `);
        });
        return htmlArray.join("");
    }
</script>