<!DOCTYPE html>
<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="http://www.thymeleaf.org">
  <head>
  <th:block th:insert="~{fragments/common :: head(title=#{flatten.title}, header=#{flatten.header})}"></th:block>
  </head>

  <body>
    <div id="page-container">
      <div id="content-wrap">
        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
        <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, { ignoreEncryption: true });

                      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>
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>
</html>