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

  <body>
    <th:block th:insert="~{fragments/common :: game}"></th:block>
    <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 bg-card">
              <div class="tool-header">
                <span class="material-symbols-rounded tool-header-icon convert">picture_as_pdf</span>
                <span class="tool-header-text" th:text="#{pdfToPDFA.header}"></span>
              </div>
              <p th:text="#{pdfToPDFA.tip}"></p>
              <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/pdf/pdfa'}">
                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
                <div class="mb-3">
                  <label for="outputFormat" th:text="#{pdfToPDFA.outputFormat}"></label>
                  <select class="form-control" name="outputFormat" id="outputFormat">
                    <option value="pdfa-1">PDF/A-1b</option>
                    <option value="pdfa">PDF/A-2b</option>
                  </select>
                </div>
                <div id="result" class="alert-warning"></div>
                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pdfToPDFA.submit}"></button>
              </form>
              <script type="module" th:src="@{'/pdfjs-legacy/pdf.mjs'}"></script>
              <script th:inline="javascript">
                document.getElementById('fileInput-input').addEventListener('change', async () => {
                  pdfjsLib.GlobalWorkerOptions.workerSrc = './pdfjs-legacy/pdf.worker.mjs';
                  const fileInput = document.getElementById('fileInput-input');
                  const resultDiv = document.getElementById('result');

                  const file = fileInput.files[0];
                  const arrayBuffer = await file.arrayBuffer();

                  try {
                    const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

                    let hasSignature = false;

                    for (let i = 1; i <= pdf.numPages; i++) {
                      const page = await pdf.getPage(i);
                      const annotations = await page.getAnnotations({ intent: 'display' });

                      annotations.forEach(annotation => {
                        console.log(annotation)
                        if (annotation.subtype === 'Widget' && annotation.fieldType === 'Sig') {
                          hasSignature = true;
                        }
                      });
                    }

                    if (hasSignature) {
                      /*<![CDATA[*/
                      resultDiv.textContent = /*[[#{pdfToPDFA.pdfWithDigitalSignature}]]*/ "The PDF contains a digital signature. This will be removed in the next step.";
                      /*]]>*/
                    }
                  } catch (error) {
                    resultDiv.textContent = 'Error reading the PDF: ' + error.message;
                  }
              });
              </script>
              <p class="mt-3" th:text="#{pdfToPDFA.credit}"></p>
            </div>
          </div>
        </div>
      </div>
      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
    </div>
  </body>
</html>
