<!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=#{flatten.title})}"></th:block>


<body>
    <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-6">
                        <h2 th:text="#{flatten.header}"></h2>
                         <form id="pdfForm" class="mb-3">
                            <div class="custom-file">
                                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
                            </div>
                            <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{flatten.submit}"></button>
                            <script src="js/local-pdf-input-download.js"></script>
                           <script>
        document.getElementById('pdfForm').addEventListener('submit', async (e) => {
            e.preventDefault();

            const { PDFDocument } = PDFLib;

            const processFile = async (file) => {
                const origFileUrl = URL.createObjectURL(file);
                const formPdfBytes = await fetch(origFileUrl).then(res => res.arrayBuffer());
                const pdfDoc = await PDFDocument.load(formPdfBytes);

                const form = pdfDoc.getForm();
                form.flatten();

                const pdfBytes = await pdfDoc.save();
                const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
                const fileName = (file.name ? file.name.replace('.pdf', '') : 'pdf') + '_flattened.pdf';

                return { processedData: pdfBlob, fileName };
            };

            await downloadFilesWithCallback(processFile);
        });
    </script>
                            
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div th:insert="~{fragments/footer.html :: footer}"></div>
    </div>
</body>

</html>