@(studyCode: String, frames: Long, hSplit: Long, vSplit: Long)

@main("JATOS") {

<style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    .grid {
        display: grid;
        height: 100vh;
    }
    .grid iframe {
        border: none;
        width: 100%;
        height: 100%;
    }
</style>
<script>
    const studyCode = "@studyCode";
    const frames = @frames;
    const hSplit = @hSplit;
    const vSplit = @vSplit;
    const searchParams = new URLSearchParams(window.location.search);
    const baseUrl = "@{general.common.Common.getJatosUrlBasePath()}";

    const defaultDelay = 50;
    const delay = parseInt(searchParams.get("delay")) || defaultDelay;
    const queryString = searchParams.size > 0 ? searchParams.toString() : "";

    let closedIframeCounter = 0; // Track completed iframes

    // Main function to create iframes on page load
    createIframes();

    async function createIframes() {
        const grid = document.createElement("div");
        grid.className = "grid";
        grid.style.gridTemplateColumns = `repeat(${hSplit}, 1fr)`;
        grid.style.gridTemplateRows = `repeat(${vSplit}, 1fr)`;
        document.body.appendChild(grid);

        for (let frameId = 1; frameId <= frames; frameId++) {
            const iframe = document.createElement("iframe");
            iframe.src = `${baseUrl}publix/${studyCode}?frameId=${frameId}&${queryString}`;
            iframe.id = `frame${frameId}`;
            grid.appendChild(iframe);

            await sleep(delay);
        }
    }

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    function onIframeComplete(frameId, studyId) {
        closedIframeCounter++;

        const iframe = document.getElementById(`frame${frameId}`);
        iframe.style.opacity = 0.3;

        console.info(`Study run in frame ${frameId} ended.`);
        if (closedIframeCounter >= frames) {
            // Redirect to JATOS GUI / study page
            window.location.href = `${baseUrl}jatos/${studyId}`;
        }
    }
</script>
}