<div id="package-info-modal" tabindex="-1" role="dialog" class="modal fade">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div id="package-info-modal-header" class="modal-header">
                <h4 id="package-info" class="modal-title"></h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
            </div>
            <div class="modal-body">
                <pre class="language-logs"><samp id="package-info-logs-input" class="pre-scrollable language-logs"></samp><button id="logs-copy-btn" type="button" class="btn language-logs" onclick="copyLogs()"><i class="bi bi-clipboard"></i> copy</button></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="showLogs()"><i class="bi bi-arrow-clockwise"></i> reload</button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal"><i class="bi bi-x"></i> close</button>
            </div>
        </div>
    </div>
</div>

<script>
    const packageInfoModal = $("#package-info-modal");
    const packageInfoModalHeader = $("#package-info-modal-header");
    const packageInfo = $("#package-info");

    const packageInfoLogsInput = $("#package-info-logs-input");
    const packageInfoLogsCopyButton = $("#logs-copy-btn");

    async function copyLogs() {
        const logs = packageInfoLogsInput.text();
        await copyToClipboard(logs, packageInfoLogsCopyButton);
    }

    function showLogs(packageBase) {
        const isPackageBaseSet = packageBase !== undefined;
        if (isPackageBaseSet)
            packageInfoModal.data("package", packageBase); // set package base as currently used
        else
            packageBase = packageInfoModal.data("package"); // read package base from the current window attribute

        const headerClass = status => {
            if (status === "pending") return ["bg-warning"];
            if (status === "building") return ["bg-warning"];
            if (status === "failed") return ["bg-danger", "text-white"];
            if (status === "success") return ["bg-success", "text-white"];
            return ["bg-secondary", "text-white"];
        };

        $.ajax({
            url: `/api/v1/packages/${packageBase}/logs`,
            type: "GET",
            dataType: "json",
            success: response => {
                packageInfo.text(`${response.package_base} ${response.status.status} at ${new Date(1000 * response.status.timestamp).toISOString()}`);
                packageInfoLogsInput.text(response.logs);

                packageInfoModalHeader.removeClass();
                packageInfoModalHeader.addClass("modal-header");
                headerClass(response.status.status).forEach((clz) => packageInfoModalHeader.addClass(clz));

                if (isPackageBaseSet) packageInfoModal.modal("show"); // we don't need to show window again
            },
            error: (jqXHR, _, errorThrown) => {
                // show failed modal in case if first time loading
                if (isPackageBaseSet) {
                    const message = error => `Could not load package ${packageBase} logs: ${error}`;
                    showFailure("Load failure", message, jqXHR, errorThrown);
                }
            },
        });
    }
</script>
