<!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=#{merge.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" id="dropContainer">
                <div class="row justify-content-center">
                    <div class="col-md-6">
                        <h2 th:text="#{merge.header}"></h2>
                        <form action="merge-pdfs" method="post" enctype="multipart/form-data">
                            <div class="form-group">
                                <label th:text="#{multiPdfDropPrompt}"></label>
                                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=true, accept='application/pdf')}"></div>

                            </div>
                            <div class="form-group">
                                <ul id="selectedFiles" class="list-group"></ul>
                            </div>
                            <div class="form-group text-center">
                                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{merge.submit}"></button>
                            </div>
                        </form>
                        <style>
                         
              .list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filename {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}

.arrows {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}

.move-up span,
.move-down span {
  font-weight: bold;
  font-size: 1.2em;
}




                        </style>
                        <script>
                        document.getElementById("fileInput-input").addEventListener("change", function() {
                        	  var files = this.files;
                        	  var list = document.getElementById("selectedFiles");
                        	  list.innerHTML = "";
                        	  for (var i = 0; i < files.length; i++) {
                        	    var item = document.createElement("li");
                        	    item.className = "list-group-item";
                        	    item.innerHTML = `
                        	      <div class="d-flex justify-content-between align-items-center w-100">
                        	        <div class="filename">${files[i].name}</div>
                        	        <div class="arrows d-flex">
                        	          <button class="btn btn-secondary move-up"><span>&uarr;</span></button>
                        	          <button class="btn btn-secondary move-down"><span>&darr;</span></button>
                        	        </div>
                        	      </div>
                        	    `;
                        	    list.appendChild(item);
                        	  }

                        	  var moveUpButtons = document.querySelectorAll(".move-up");
                        	  for (var i = 0; i < moveUpButtons.length; i++) {
                        	    moveUpButtons[i].addEventListener("click", function(event) {
                        	      event.preventDefault();
                        	      var parent = this.closest(".list-group-item");
                        	      var grandParent = parent.parentNode;
                        	      if (parent.previousElementSibling) {
                        	        grandParent.insertBefore(parent, parent.previousElementSibling);
                        	        updateFiles();
                        	      }
                        	    });
                        	  }

                        	  var moveDownButtons = document.querySelectorAll(".move-down");
                        	  for (var i = 0; i < moveDownButtons.length; i++) {
                        	    moveDownButtons[i].addEventListener("click", function(event) {
                        	      event.preventDefault();
                        	      var parent = this.closest(".list-group-item");
                        	      var grandParent = parent.parentNode;
                        	      if (parent.nextElementSibling) {
                        	        grandParent.insertBefore(parent.nextElementSibling, parent);
                        	        updateFiles();
                        	      }
                        	    });
                        	  }

                        	  function updateFiles() {
                        	    var dataTransfer = new DataTransfer();
                        	    var liElements = document.querySelectorAll("#selectedFiles li");

                        	    for (var i = 0; i < liElements.length; i++) {
                        	      var fileNameFromList = liElements[i].querySelector(".filename").innerText;
                        	      var fileFromFiles;
                        	      for (var j = 0; j < files.length; j++) {
                        	        var file = files[j];
                        	        if (file.name === fileNameFromList) {
                        	          dataTransfer.items.add(file);
                        	          break;
                        	        }
                        	      }
                        	    }
                        	    document.getElementById("fileInput-input").files = dataTransfer.files;
                        	  }
                        	});

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