<head th:fragment="head">

<!-- Metadata -->
<meta charset="UTF-8">

<title th:text="${@appName} + (${title} != null and ${title} != '' ? ' - ' + ${title} : '')"></title>
<link rel="shortcut icon" href="favicon.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- jQuery -->
<script src="js/thirdParty/jquery.min.js"></script>

<!-- jQuery -->
<script src="js/thirdParty/jszip.min.js"></script>

<!-- Bootstrap -->
<script src="js/thirdParty/popper.min.js"></script>
<script src="js/thirdParty/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-icons.css">

<!-- PDF.js -->
<script src="pdfjs/pdf.js"></script>

<!-- PDF-Lib -->
<script src="js/thirdParty/pdf-lib.min.js"></script>

<!-- Custom -->
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" th:href="@{css/light-mode.css}" id="light-mode-styles">
<link rel="stylesheet" th:href="@{css/dark-mode.css}" id="dark-mode-styles">
<link rel="stylesheet" th:href="@{css/rainbow-mode.css}" id="rainbow-mode-styles" disabled="true">
<link rel="stylesheet" href="css/tab-container.css">
<script src="js/tab-container.js"></script>


<script src="js/darkmode.js"></script>

</head>

<th:block th:fragment="game">
    <dialog id="game-container-wrapper" class="game-container-wrapper" data-modal>
        <script>
            console.log("loaded game")
            $(document).ready(function() {
                function loadGameScript(callback) {
                    console.log('loadGameScript called');
                    const script = document.createElement('script');
                    script.src = 'js/game.js';
                    script.onload = callback;
                    document.body.appendChild(script);
                }
                let gameScriptLoaded = false;
                const gameDialog = document.getElementById('game-container-wrapper')
                $('#show-game-btn').on('click', function() {
                    console.log('Show game button clicked');
                    if (!gameScriptLoaded) {
                        console.log('Show game button load');
                        loadGameScript(function() {
                            console.log('Game script loaded');
                            window.initializeGame();
                            gameScriptLoaded = true;
                        });
                    } else {
                        window.resetGame();
                    }
                    gameDialog.showModal();
                });
                gameDialog.addEventListener("click", e => {
                    const dialogDimensions = gameDialog.getBoundingClientRect()
                    if (
                        e.clientX < dialogDimensions.left ||
                        e.clientX > dialogDimensions.right ||
                        e.clientY < dialogDimensions.top ||
                        e.clientY > dialogDimensions.bottom
                    ) {
                        gameDialog.close()
                    }
                })
            })
        </script>
        <div id="game-container">
            <div id="lives">Lives: 3</div>
            <div id="score">Score: 0</div>
            <div id="high-score">High Score: 0</div>
            <div id="level">Level: 1</div>
            <img src="favicon.svg" class="player" id="player">
        </div>
        <link rel="stylesheet" href="css/game.css">
    </dialog>
</th:block>

<th:block th:fragment="fileSelector(name, multiple)"  th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}, remoteCall=${remoteCall} ?: true, notRequired=${notRequired} ?: false">
    <script th:inline="javascript">
		const pdfPasswordPrompt =/*[[#{error.pdfPassword}]]*/ '';
		const multiple = [[${multiple}]] || false;
		const remoteCall = [[${remoteCall}]] || true;
	</script>
    <script src="js/downloader.js"></script>

    <div class="custom-file-chooser">
        <div class="custom-file">
            <input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple th:classappend="${notRequired ? '' : 'required'}">
            <label class="custom-file-label" th:for="${name}+'-input'" th:text="${inputText}"></label>
        </div>
        <div class="selected-files"></div>
    </div>
    <div id="progressBarContainer" style="display: none; position: relative;">
        <div class="progress" style="height: 1rem;">
            <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">Bored waiting?</button>

    
	<script th:inline="javascript">
		const elementID =  /*[[${name+"-input"}]]*/ '';
		const filesSelected =  /*[[#{filesSelected}]]*/ '';
		const pdfPrompt =  /*[[#{pdfPrompt}]]*/ '';
	</script>
	
    <script src="js/fileInput.js"></script>
    <link rel="stylesheet" href="css/fileSelect.css">
</th:block>