<!DOCTYPE html>
<html th:lang="${#locale.toString()}"
	th:lang-direction="#{language.direction}"
	xmlns:th="http://www.thymeleaf.org">
<th:block
	th:insert="~{fragments/common :: head(title=#{showJS.title})}"></th:block>
<body>
	<link href="css/prism.css" rel="stylesheet" />
	<script src="js/thirdParty/prism.js"></script>
	<div id="page-container">
		<div id="content-wrap">
			<div th:insert="~{fragments/navbar.html :: navbar}"></div>
			<br> <br>
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-md-12">
						<h2 th:text="#{showJS.header}"></h2>
						<form id="pdfInfoForm" method="post" enctype="multipart/form-data"
							th:action="@{show-javascript}">
							<div
								th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, remoteCall='false')}"></div>
							<br>
							<button type="submit" id="submitBtn" class="btn btn-primary"
								th:text="#{showJS.submit}"></button>

						</form>
						<div class="container mt-5">
							<!-- Iterate over each main section in the JSON -->
							<div id="script-content">
								<!-- JavaScript will populate this section -->
							</div>

							<!-- Button to download the JSON -->
							<a href="#" id="downloadJS" class="btn btn-primary mt-3"
								style="display: none;" th:text="#{showJS.downloadJS}">Download
								JSON</a>
						</div>
<style>
    /* Add a max-height and make it scrollable */
    #script-content {
        max-height: 1000px; /* Adjust this to your preferred maximum height */
        overflow-y: auto;
    }
</style>
						<script>
    document.querySelector('#pdfInfoForm').addEventListener('submit', function(event){
        event.preventDefault();

        // Fetch the formData
        const formData = new FormData(event.target);

        fetch('api/v1/misc/show-javascript', {
            method: 'POST',
            body: formData
        }).then(response => response.text())
        .then(data => {
        	 // Escape < and > characters
            let escapedData = data.replace(/</g, '&lt;').replace(/>/g, '&gt;');

            // Create the elements manually
            let preElement = document.createElement('pre');
            let codeElement = document.createElement('code');
            codeElement.classList.add('language-javascript');
            codeElement.textContent = escapedData;  // Use textContent instead of innerHTML
            preElement.appendChild(codeElement);

            let scriptContent = document.querySelector('#script-content');
            // Clear existing content, if any
            while (scriptContent.firstChild) {
                scriptContent.removeChild(scriptContent.firstChild);
            }
            scriptContent.appendChild(preElement);

            // Highlight the code using Prism.js
            Prism.highlightAll();

            // Create a blob object from the data and create a URL for it
            let blob = new Blob([data], {type: 'application/javascript'});
            let url = URL.createObjectURL(blob);

            // Set the URL as the href of the download button and provide a download name
            let downloadButton = document.querySelector('#downloadJS');
            downloadButton.href = url;
            downloadButton.download = 'extracted.js';
            downloadButton.style.display = 'block';
        })
        .catch(error => {
            console.error('Error:', error);
        });
    });
</script>
					</div>
				</div>
			</div>

		</div>
		<div th:insert="~{fragments/footer.html :: footer}"></div>
	</div>
</body>
</html>