{{ define "notifications" }}
<link href="/static/css/pages/notifications.css" rel="stylesheet">

<!-- Info  modal -->
<div class="modal" id="InfoModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header info-header justify-content-between">
        <span class="modal-title">
          <i class="icon-alarm-info-header"></i>
          <span id="info-header-title">Notification</span>
        </span>
        <span class="btn btn-transparent" onclick="document.getElementById('InfoModal').style.display = 'none';"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body-info">
        <p class="container-data" id="infoMessage"></p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-text btn-outline-secondary" onclick="document.getElementById('InfoModal').style.display = 'none';">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Warning modal -->
<div class="modal" id="WarningModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header warning-header justify-content-between">
        <span class="modal-title"><i class="icon-alarm-warning-header"></i>Warning</span>
        <span class="btn btn-transparent" onclick="hideDialog('WarningModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body-warning">
        <p class="container-data" id="warningMessage"></p>
      </div>
      <div class="modal-footer">
        <button id="closeWarningModalButton" class="btn btn-text btn-outline-secondary" onclick="hideDialog('WarningModal');">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Warning modal with text -->
<div class="modal" id="WarningWithTextModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header warning-header justify-content-between">
        <span class="modal-title"><i class="icon-alarm-warning-header"></i>Warning</span>
        <span class="btn btn-transparent" onclick="hideDialog('WarningWithTextModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body-warning">
        <p class="container-data" id="warningHeader"></p>
        <textarea class="form-control text-area rounded-0" rows="10" cols="50" tabindex="0" id="warningText" readonly></textarea>
      </div>
      <div class="modal-footer">
        <button id="closeTextWarningModalButton" class="btn btn-text btn-outline-secondary" onclick="hideDialog('WarningWithTextModal');">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Error  modal -->
<div class="modal" id="ErrorModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header error-header justify-content-between">
        <span class="modal-title"><i class="icon-alarm-error-header"></i>Error</span>
        <span class="btn btn-transparent" onclick="hideDialog('ErrorModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body-error">
        <p class="container-data" id="errorMessage"></p>
      </div>
      <div class="modal-footer">
        <button id="closeErrorModalButton" class="btn btn-text btn-outline-secondary" onclick="hideDialog('ErrorModal');">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Confirmation modal -->
<div class="modal" id="ConfirmationModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header info-header justify-content-between">
        <span class="modal-title" id="confirmationModalTitle"><i class="icon-alarm-info-header"></i>Confirm</span>
        <span class="btn btn-transparent" onclick="hideDialog('ConfirmationModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body-info">
        <p class="container-data" id="confirmationMessage"></p>
      </div>
      <div class="modal-footer justify-content-between">
        <button class="btn btn-text btn-outline-secondary" tabindex="1" id="confirmationModalCancelButton" onclick="hideDialog('ConfirmationModal');">Close</button>
        <button class="btn btn-text" tabindex="2" id="confirmationModalButton" onclick="alert('This onclick behaviour gets rewritten')">Confirm</button>
      </div>
    </div>
  </div>
</div>

<!-- Loading  modal-->
<div class="modal" id="LoadingModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content modal-loading-100">
        <div class="loading loading-100"></div>
    </div>
  </div>
</div>

<script type="text/javascript" charset="utf-8">
  function displayDialog(dialogName) {
    if (document.getElementById(dialogName)) {
      document.getElementById(dialogName).style.display = "block";
      document.getElementById(dialogName).style.background = "var(--modal-overlay)";
      let elements = Array.from(document.getElementById(dialogName).querySelectorAll("button:not(.tab-separator), input[type='file'] ,.form-control, select, input.form-check-input:not(.form-check-input-table), input[class='btn-check']"));
      if (elements.length > 0) {
        let myElement = elements.find(item => item.tabIndex === 0);
        if (myElement) {
          myElement.focus();
          if (myElement.classList.contains('btn')) {
            myElement.classList.add('hover')
          }
          for (let i = 1; i < elements.length; i++) {
            let tmpElement = elements.find(item => item.tabIndex === i);
            if (tmpElement && tmpElement.classList.contains('hover')) {
              tmpElement.classList.remove('hover')
            }
          }
        }
      }
    }
  }

  function hideDialog(dialogName) {
    if (document.getElementById(dialogName)) {
      document.getElementById(dialogName).style.display = "none";
    }
  }

  function displayInfoDialog(infoMessage, title = "Notification") {
    document.getElementById("infoMessage").innerHTML = infoMessage;
    document.getElementById("info-header-title").innerHTML = title;
    displayDialog("InfoModal");
  }

  function displayInfoDialogAfterLoading(infoMessage) {
    hideDialog("LoadingModal");
    document.getElementById("infoMessage").innerHTML = infoMessage;
    displayDialog("InfoModal");
  }

  function displayWarningDialog(warningMessage) {
    hideDialog("LoadingModal")
    if (document.getElementById("warningMessage")) {
      document.getElementById("warningMessage").innerHTML = warningMessage;
      displayDialog("WarningModal");
    }
  }

  function displayWarningWithTextDialog(warningHeader, warningText) {
    hideDialog("LoadingModal");
    if (document.getElementById("warningHeader")) {
      document.getElementById("warningHeader").innerHTML = warningHeader;
      document.getElementById("warningText").innerHTML = warningText;
      displayDialog("WarningWithTextModal");
    }
  }

  function displayErrorDialog(errorMessage) {
    hideDialog("LoadingModal");
    const errorMessageElementId = "errorMessage";
    let errorMessageElement = document.getElementById(errorMessageElementId);
    if (errorMessageElement) {
      if (errorMessage) {
        errorMessageElement.innerHTML = errorMessage.replace(/(?:\r\n|\r|\n)/g, '<br>');
        displayDialog("ErrorModal");
      } else {
        console.trace(arguments.callee + " - the error message provided was invalid: '" + errorMessage + "'");
      }
    } else {
      console.error(arguments.callee + " - unable to find element with ID: " + errorMessageElementId);
    }
  }

  /**
   * Using the displayErrorDialog function, this function builds up a multi-line and unordered list
   * as a single string to be displayed in the errorMessage dialog window
   *
   * @param errorMessage The introductory message which will describe the array of errors provided
   * @param errors An array of strings describing errors
   */
  function displayErrorMessagesDialog(errorMessage, errors) {
    displayErrorDialog(errorMessage + ": \n\n <ul><li>" + errors.join("</li><li>") + "</li></ul>");
  }

  /**
   * This function shows a confirmation dialog box which gives the user two options, a 'cancel' or a 'confirm'
   *
   * @param dialogMessage The question to which will be asked to the user
   * @param confirmButtonLabel Usually this would be something like "Confirm" or "Apply"
   * @param confirmButtonCallback a string representation of the callback which allows you to pass arguments into the callback.
   * @param dialogTitle The confirmation dialog title that will specify the function that is being executed
   * @param dialogIcon The confirmation dialog icon class that will specify the function that is being executed
   * @param cancelButtonLabel Optional label for the cancel button. Defaults to "Close".
   *    It rewrites the onclick attribute for the confirm button
   */
  function displayConfirmationDialog(dialogMessage, confirmButtonLabel, confirmButtonCallback, dialogTitle, dialogIcon, cancelButtonLabel) {
    const spanElement = document.getElementById("confirmationModalTitle");
    const imageElement = spanElement.querySelector('i');
    if(dialogIcon){
      imageElement.className = dialogIcon;
    } else {
      imageElement.className = "icon-alarm-info-header";
    }

    if(document.getElementById("confirmationModalTitle")){
      spanElement.childNodes.forEach(node => {
        if (node.nodeType === Node.TEXT_NODE) {
          node.textContent = dialogTitle;
        }
      })
    } else {
      spanElement.childNodes.forEach(node => {
        if (node.nodeType === Node.TEXT_NODE) {
          node.textContent = "Confirm";
        }
      })
    }

    if (document.getElementById("confirmationMessage")) {
      document.getElementById("confirmationMessage").innerHTML = dialogMessage;
    }

    const cancelButtonElement = document.getElementById("confirmationModalCancelButton");
    if (cancelButtonElement) {
      cancelButtonElement.innerHTML = cancelButtonLabel || "Close";
    }

    const confirmButtonId = "confirmationModalButton";
    if (document.getElementById(confirmButtonId)) {
      $("#" + confirmButtonId).attr("onclick", confirmButtonCallback + "; hideDialog('ConfirmationModal');");
      document.getElementById(confirmButtonId).innerHTML = confirmButtonLabel;
      displayDialog("ConfirmationModal");
    } else {
      console.error(arguments.callee + " - Unable to find HTML element with id='" + confirmButtonId + "', unable to properly display confirmation window");
    }
  }

  function showError(errorMessage) {
    console.trace("The 'showError' function is deprecated, please use displayErrorDialog");
    displayErrorDialog(errorMessage);
  }
</script>

{{ end }}