@* List logs directory Modal *@
<div class="modal fade" id="listLogsModal" tabindex="-1" data-bs-config='{"backdrop":"true", "focus":true, "keyboard":true}'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header align-items-start">
                <h5 class="modal-title text-truncate flex-grow-1">Content of JATOS' <i>logs</i> directory</h5>
                <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>You can download the files or click on 'Show' (if available) to see them right away.</p>
                <div id="listLgsList"></div>
            </div>
        </div>
    </div>
</div>

@* Log Modal *@
<div class="modal fade" id="logModal" tabindex="-1" data-bs-config='{"backdrop":"true", "focus":true, "keyboard":true}'>
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header align-items-start">
                <h5 class="modal-title text-truncate flex-grow-1">Log (reverse order)</h5>
                <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <pre><code></code></pre>
                <span class="btn-clipboard btn-clipboard-top-right no-info-icon" data-bs-tooltip="Copy to clipboard"></span>
            </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")";

    const alerts = new Alerts.Named("application-logs");
    $("#listLogsModal, #logModal").on('hide.bs.modal', alerts.hideAll);

    // Hide 'Logs' button in admin toolbar if JATOS does not log into files but STDOUT
    if (window.common.logsAppender.includes("STDOUT")) {
        $("#adminToolbarLogs").hide();
    }

    $("#applicationLog").text("Show " + window.common.logsFilename);

    $("#applicationLog").click(function() {
        $("#logModal").data("filename", window.common.logsFilename);
        $("#logModal").modal('show');
    });

    $("#listLogsModal").on('show.bs.modal', function() {
        $.ajax({
            url: window.routes.Api.listLogs,
            success: function(response) {
                $('#listLgsList').html(generateListLogsHtml(response.data));
            },
            error: (err) => {
                const message = err?.responseJSON?.error?.message ?? "Couldn't list logs";
                alerts.error(message);
            }
        });
    });

    function generateListLogsHtml(logFiles) {
        const listLogsHtml = [];
        listLogsHtml.push("<ul>");
        logFiles.forEach((entry) => {
            const filename = entry.name;
            const url = window.routes.Api.getLog(filename, -1, false);
            let html = `<li><a href="${url}" download>${filename}</a>`;
            if (!filename.includes(".gz")) {
                html += `<button type="button" class="btn btn-nav btn-sm show-log ms-2" data-filename="${filename}">Show</button>`;
            }
            html += '</li>';
            listLogsHtml.push(html);
        });
        listLogsHtml.push("</ul>");
        return listLogsHtml.join("");
    }

    $("#listLogsModal").on('click', 'button.show-log', function(e) {
        const filename = $(this).data("filename");
        $("#logModal").data("filename", filename);
        $("#logModal").modal('show');
    });

    $("#logModal").on('show.bs.modal', function() {
        $('#logModal .modal-body pre code').text("");
        const filename = $(this).data("filename");
        const url = window.routes.Api.getLog(encodeURIComponent(filename), -1, true);
        $.ajax({
            url: url,
            success: function(result) {
                $('#logModal .modal-title').text(`${filename} (reverse order)`);
                $('#logModal .modal-body pre code').text(result);
                $("#logModal").modal('show');
            },
            error: (err) => err.responseText ? alerts.error(err.responseText) : alerts.error("Couldn't get the log")
        });
    });


</script>