<!DOCTYPE html>
<html lang="en">
  <head>
    <title>List</title>
    {% include 'common.html' %}
    <style>
      body {
        width: 100%;
        height: 100%;
        padding: 1rem;
        overflow: auto;
      }

      a {
        text-decoration: none;
      }

      .stratosphere {
        z-index: 9999 !important;
      }

      .upload-parent {
        align-items: center;
      }

      table td {
        padding: 0 8px;
        word-break: keep-all;
        white-space: nowrap;
      }

      table img {
        height: 25px;
      }

      .modal .modal-header {
        border-bottom: none;
      }

      .modal .modal-body {
        padding-top: 0;
        padding-bottom: 0;
      }

      .modal .modal-footer {
        border-top: none;
      }

      .drop-box {
        width: 100%;
        height: 200px;
        border: 3px dashed #e5e5e5;
        text-align: center;
        color: #c6c6c6;
        flex-flow: column;
        justify-content: space-between;
      }

      .drop-over {
        background-color: #e8e8e8;
      }
    </style>
    <script>
      var messages = {
        dragText: "Drag the files here.",
        dragEnterText: "Please release mouse.",
        uploadSuccessfulText: "{0} file(s) uploaded successfully.",
        uploadFailedText: "{0} file(s) failed to upload.",
        uploadSuccessfulFailedText:
          "{0} file(s) failed to upload and {1} succeeded.",
      };

      $(function () {
        var successfulCount = 0;
        var failedCount = 0;
        var dragID = $("#dragID");
        dragID.children("span").text(messages.dragText);

        dragID.children("button").click(function () {
          var inputFile = dragID.find("[type='file']");
          inputFile.val("");
          inputFile[0].click();
        });

        dragID.find("[type='file']").on("change", function () {
          uploadFiles(this.files);
        });

        dragID.on("dragenter", function () {
          $(this).children().addClass("pe-none");
          $(this).children("span").text(messages.dragEnterText);
          $(this).addClass("drop-over");
        });

        dragID.on("dragover", function () {
          return false;
        });

        dragID.on("dragleave", function () {
          $(this).children().removeClass("pe-none");
          $(this).children("span").text(messages.dragText);
          $(this).removeClass("drop-over");
        });

        dragID.on("drop", function (event) {
          var files = event.originalEvent.dataTransfer.files;
          uploadFiles(files);
          $(this).children().removeClass("pe-none");
          $(this).children("span").text(messages.dragText);
          $(this).removeClass("drop-over");
          return false;
        });

        $("#uploadModalID").on("show.bs.modal", function () {
          var fileListID = $("#fileListID");
          fileListID.addClass("d-none");
          fileListID.children(".card-body").empty();
        });

        $("#uploadModalID").on("hide.bs.modal", function () {
          window.location.reload();
        });

        function uploadFiles(files) {
          successfulCount = 0;
          failedCount = 0;
          if (files.length === 0) {
            return false;
          } else {
            var fileListID = $("#fileListID");
            var fileListBody = fileListID.children(".card-body");
            fileListBody.empty();
            var fileTemplate = `<div class="row">
                  <div class="col-6">{0}</div>
                  <div class="col-6 d-flex flex-column justify-content-center">
                    <div class="progress">
                      <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>`;
            for (var file of files) {
              var fileRow = $(format(fileTemplate, file.name, files.length));
              fileListBody.append(fileRow);
              var formData = new FormData();
              formData.append(file.name, file);
              executeUpload(formData, fileRow, files.length);
            }
            fileListID.removeClass("d-none");
          }
        }

        function executeUpload(formData, element, length) {
          var request = $.ajax({
            url: window.location.pathname,
            type: "POST",
            cache: false,
            data: formData,
            processData: false,
            contentType: false,

            xhr: function () {
              var xhr = $.ajaxSettings.xhr();
              if (onProgress && xhr.upload) {
                xhr.upload.addEventListener(
                  "progress",
                  function (event) {
                    onProgress(event, element.find(".progress-bar"));
                  },
                  false
                );
                return xhr;
              }
            },
            success: function () {
              successfulCount++;
            },
            error: function () {
              failedCount++;
              element.first().addClass("text-danger");
              progressBar = element.find(".progress-bar");
              progressBar.html("0%");
              progressBar.css("width", "0");
            },
            complete: function () {
              if (successfulCount === length) {
                var text = format(
                  messages.uploadSuccessfulText,
                  successfulCount
                );
                showToast("uploadSuccessToastID", text);
              } else if (failedCount === length) {
                var text = format(messages.uploadFailedText, failedCount);
                showToast("uploadFailedToastID", text);
              } else if (failedCount + successfulCount === length) {
                var text = format(
                  messages.uploadSuccessfulFailedText,
                  failedCount,
                  successfulCount
                );
                showToast("uploadSuccessfulFailedToastID", text);
              }
            },
          });

          function onProgress(event, progressBar) {
            var loaded = event.loaded;
            var total = event.total;
            var per = Math.floor((100 * loaded) / total);
            progressBar.html(per + "%");
            progressBar.css("width", per + "%");
          }
        }

        function showToast(id, text) {
          var uploadSuccessToastID = $("#" + id);
          uploadSuccessToastID.find(".toast-body").text(text);
          uploadSuccessToastID.toast("show");
        }
      });
    </script>
  </head>

  <body>
    <div class="row">
      <div class="col-8">
        <h1>Sprite Server</h1>
      </div>
      <div class="col-4 d-flex upload-parent">
        <button
          type="button"
          class="btn btn-primary ms-auto me-0"
          data-bs-toggle="modal"
          data-bs-target="#uploadModalID"
        >
          Upload
        </button>
      </div>
    </div>
    <hr />
    <table>
      <tr>
        <td>
          <a href="../">
            <img
              alt="upper"
              src="data:image/png;base64, "
            />
          </a>
        </td>
        <td>({{ parent.permission }})</td>
        <td>{{ parent.modification }}</td>
        <td></td>
        <td>
          <a href="../">../</a>
        </td>
      </tr>
      {% for item in directories %}
      <tr>
        <td>
          <a href="{{ item.name }}">
            <img
              alt="folder"
              src="data:image/png;base64, "
            />
          </a>
        </td>
        <td>({{ item.permission }})</td>
        <td>{{ item.modification }}</td>
        <td></td>
        <td>
          <a href="{{ item.name }}"> {{ item.name }} </a>
        </td>
      </tr>
      {% endfor %}
      {% for item in files %}
      <tr>
        <td>
          <a href="{{ item.name }}">
            <img
              alt="file"
              src="data:image/png;base64, "
            />
          </a>
        </td>
        <td>({{ item.permission }})</td>
        <td>{{ item.modification }}</td>
        <td>{{ item.size }}</td>
        <td>
          <a href="{{ item.name }}"> {{ item.name }} </a>
        </td>
      </tr>
      {% endfor %}
    </table>
    <div
      class="modal fade"
      id="uploadModalID"
      tabindex="-1"
      aria-labelledby="uploadModalLabelID"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="uploadModalLabelID">Upload Files</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body d-flex flex-column">
            <div id="dragID" class="drop-box d-flex p-3">
              <span class="mx-auto"></span>

              <button class="btn btn-primary mx-auto px-5 position-relative">
                Choose Files
                <input type="file" multiple="" class="d-none" />
              </button>
            </div>
            <div id="fileListID" class="card mt-3 overflow-auto d-none">
              <div class="card-body"></div>
            </div>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="position-fixed top-0 end-0 p-3 stratosphere">
      <div
        id="uploadSuccessToastID"
        class="toast border-success"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="toast-header border-success">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            fill="currentColor"
            class="bi bi-check-circle-fill text-success me-2"
            viewBox="0 0 16 16"
          >
            <path
              d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"
            />
          </svg>
          <strong class="me-auto">Success</strong>
          <small>just now</small>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="toast-body"></div>
      </div>
      <div
        id="uploadFailedToastID"
        class="toast border-danger"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="toast-header border-danger">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            fill="currentColor"
            class="bi bi-x-circle-fill text-danger me-2"
            viewBox="0 0 16 16"
          >
            <path
              d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"
            />
          </svg>
          <strong class="me-auto">Failed</strong>
          <small>just now</small>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="toast-body"></div>
      </div>
      <div
        id="uploadSuccessfulFailedToastID"
        class="toast border-warning"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="toast-header border-warning">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            fill="currentColor"
            class="bi bi-exclamation-circle-fill text-warning me-2"
            viewBox="0 0 16 16"
          >
            <path
              d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
            />
          </svg>
          <strong class="me-auto">Warning</strong>
          <small>just now</small>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="toast-body"></div>
      </div>
    </div>
  </body>
</html>
