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

<body>
  <div id="image-highlighter"></div>
  <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-12">
            <div class="bg-card">
              <div class="tool-header">
                <span class="material-symbols-rounded tool-header-icon advance">construction</span>
                <span class="tool-header-text" th:text="#{multiTool.header}"></span>
              </div>
              <div class="mt-action-bar d-flex flex-wrap">
                <div class="mt-filename">
                  <label for="filename-input" th:text="#{multiTool.uploadPrompts}">Filename</label>
                  <input type="text" class="form-control" id="filename-input"
                    th:placeholder="#{multiTool.uploadPrompts}">
                </div>
                <div class="mt-action-btn">
                  <button class="btn btn-primary" th:title="#{multiTool.addFile}" onclick="addFiles()">
                    <span class="material-symbols-rounded">
                      add
                    </span>
                  </button>
                  <button class="btn btn-secondary enable-on-file" th:title="#{multiTool.rotateLeft}"
                    onclick="rotateAll(-90)" disabled>
                    <span class="material-symbols-rounded">
                      rotate_left
                    </span>
                  </button>
                  <button class="btn btn-secondary enable-on-file" th:title="#{multiTool.rotateRight}"
                    onclick="rotateAll(90)" disabled>
                    <span class="material-symbols-rounded">
                      rotate_right
                    </span>
                  </button>
                  <button class="btn btn-secondary enable-on-file" th:title="#{multiTool.split}" onclick="splitAll()"
                    disabled>
                    <span class="material-symbols-rounded">
                      cut
                    </span>
                  </button>
                  <button class="btn btn-secondary enable-on-file" th:title="#{multiTool.insertPageBreak}"
                    onclick="addFilesBlankAll()" disabled>
                    <span class="material-symbols-rounded">
                      insert_page_break
                    </span>
                  </button>
                  <button id="undo-btn" th:title="#{multiTool.undo}" class="btn btn-secondary" onclick="undo()"
                    disabled>
                    <span class="material-symbols-rounded">
                      undo
                    </span>
                  </button>

                  <button id="redo-btn" class="btn btn-secondary" th:title="#{multiTool.redo}" onclick="redo()"
                    disabled>
                    <span class="material-symbols-rounded">
                      redo
                    </span>
                  </button>
                  </button>

                  <button id="select-pages-container" th:title="#{multiTool.selectPages}"
                    class="btn btn-secondary enable-on-file" onclick="toggleSelectPageVisibility()" disabled>
                    <span id="select-pages-button" class="material-symbols-rounded">
                      event_list
                    </span>
                  </button>
                  <button id="deselect-All-Container" th:title="#{multiTool.deselectAll}"
                    class="btn btn-secondary enable-on-file hidden" onclick="toggleSelectAll()" disabled>
                    <span class="material-symbols-rounded" id="deselect-icon">deselect</span>
                  </button>
                  <button id="select-All-Container" th:title="#{multiTool.selectAll}"
                    class="btn btn-secondary enable-on-file hidden" onclick="toggleSelectAll()" disabled>
                    <span class="material-symbols-rounded" id="select-icon">select_all</span>
                  </button>
                  <div class="button-container">
                    <button id="delete-button" th:title="#{multiTool.deleteSelected}"
                      class="btn btn-danger delete hidden" onclick="deleteSelected()">
                      <span class="material-symbols-rounded">delete</span>
                    </button>
                  </div>
                  <div style="margin-left:auto">
                    <button id="export-selected-button" th:title="#{multiTool.downloadSelected}"
                      style="border-color: green; color:#b2e3a8; background: rgba(24, 122, 5, 1)"
                      class="btn btn-primary enable-on-file hidden" onclick="exportPdf(true)" disabled>
                      <span class="material-symbols-rounded">
                        file_save
                      </span>
                    </button>
                    <button style="border-color: green; color:#b2e3a8; background: rgba(24, 122, 5, 1)"
                      th:title="#{multiTool.downloadAll}" id="export-button" class="btn btn-primary enable-on-file"
                      onclick="exportPdf(false)" disabled>
                      <span class="material-symbols-rounded">
                        download
                      </span>
                    </button>
                  </div>
                </div>
                <div id="selected-pages-display" class="selected-pages-container hidden">
                  <div style="display:flex; height:3rem; margin-right:1rem">
                    <h5 th:text="#{multiTool.selectedPages}" style="white-space: nowrap; margin-right: 1rem;">Selected
                      Pages</h5>
                    <input type="text" id="csv-input" class="form-control" style="height:2.5rem" placeholder="1,3,5-10"
                      value="">
                  </div>
                  <ul id="selected-pages-list" class="pages-list"></ul>
                </div>
              </div>

              <div class="multi-tool-container">
                <div class="d-flex flex-wrap" id="pages-container-wrapper">
                  <div id="pages-container">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="drag-container"></div>
    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
  </div>
  <script type="module" th:src="@{'/pdfjs-legacy/pdf.mjs'}"></script>
  <script>
    window.selectedPages = [];
    window.selectPage = false;
    window.selectAll = false;

    window.translations = {
      rotateLeft: '[[#{multiTool.rotateLeft}]]',
      rotateRight: '[[#{multiTool.rotateRight}]]',
      moveLeft: '[[#{multiTool.moveLeft}]]',
      moveRight: '[[#{multiTool.moveRight}]]',
      delete: '[[#{multiTool.delete}]]',
      split: '[[#{multiTool.split}]]',
      addFile: '[[#{multiTool.addFile}]]',
      insertPageBreak: '[[#{multiTool.insertPageBreak}]]',
      dragDropMessage: '[[#{multiTool.dragDropMessage}]]',
      undo: '[[#{multiTool.undo}]]',
      redo: '[[#{multiTool.redo}]]',
    };

    window.decrypt = {
      passwordPrompt: '[[#{decrypt.passwordPrompt}]]',
      cancelled: '[[#{decrypt.cancelled}]]',
      noPassword: '[[#{decrypt.noPassword}]]',
      invalidPassword: '[[#{decrypt.invalidPassword}]]',
      invalidPasswordHeader: '[[#{decrypt.invalidPasswordHeader}]]',
      unexpectedError: '[[#{decrypt.unexpectedError}]]',
      serverError: '[[#{decrypt.serverError}]]',
      success: '[[#{decrypt.success}]]',
    }

    const csvInput = document.getElementById("csv-input");
    csvInput.addEventListener("keydown", function (event) {
      if (event.key === "Enter") {
        updatePagesFromCSV();
      }
    });
    csvInput.addEventListener("blur", function () {
      updatePagesFromCSV();
    });
  </script>
  <script type="module">
    import { UndoManager } from './js/multitool/UndoManager.js';
    import PdfContainer from './js/multitool/PdfContainer.js';
    import DragDropManager from "./js/multitool/DragDropManager.js";
    import ImageHighlighter from "./js/multitool/ImageHighlighter.js";
    import PdfActionsManager from './js/multitool/PdfActionsManager.js';
    import FileDragManager from './js/multitool/fileInput.js';
    // enables drag and drop

    var undoManager = new UndoManager();
    const dragDropManager = new DragDropManager('drag-container', 'pages-container');
    // enables image highlight on click
    const imageHighlighter = new ImageHighlighter('image-highlighter');
    // enables the default action buttons on each file
    const pdfActionsManager = new PdfActionsManager('pages-container', undoManager);
    const fileDragManager = new FileDragManager();
    // Scroll the wrapper horizontally

    // Automatically exposes rotateAll, addFiles and exportPdf to the window for the global buttons.
    const pdfContainer = new PdfContainer(
      'pages-container',
      'pages-container-wrapper',
      [
        dragDropManager,
        imageHighlighter,
        pdfActionsManager,
        fileDragManager
      ],
      undoManager
    )

    fileDragManager.setCallback(async (files) => pdfContainer.handleDroppedFiles(files));
    document.addEventListener('keydown', function (event) {
      let targetElementId = event.target.id;

      // To avoid undoing/redoing the page when the user is simply undoing/redoing text
      const isFilenameInputField = (targetElementId === 'filename-input') && (event.target === document.activeElement);

      const isUndo = (event.ctrlKey && event.key === 'z');
      const isRedo = (event.ctrlKey && event.key == 'y');
      if (isUndo && !isFilenameInputField)
        undoManager.undo();
      else if (isRedo && !isFilenameInputField) undoManager.redo();
    });
  </script>
</body>

</html>