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

<nav class="navbar navbar-expand">
    <div class="container-fluid">
        <ul class="navbar-nav me-auto">
      <li class="nav-item dropdown">
        <button onclick="" class="btn btn-nav-icon" id="menuButton" data-bs-toggle="dropdown" role="button" aria-expanded="false" data-toggle="tooltip" data-placement="bottom" title="Navigation Menu"><i class="icon-btn icon-menu" id="menuImage"></i></button>
        <ul class="dropdown-menu dropdown-menu-nav">
          <li><hr class="dropdown-item-divider" /></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="showAddLevelsModal()" id="addMenuButton"><i class="icon-btn-nav-menu icon-plain icon-add" id="addMenuImg"></i>Add</button>
          </li>
          <li><div class="dropdown-item-divider"></div></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="selectAll()" id="selectAllMenuButton"><i class="icon-btn-nav-menu icon-plain icon-select-rows-disabled" id="selectAllMenuImg"></i>Select all</button>
          </li>
          <li><div class="dropdown-item-divider"></div></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="deselectAll()" id="deselectAllMenuButton"><i class="icon-btn-nav-menu icon-plain icon-deselect-rows-disabled" id="deselectAllMenuImg"></i>Deselect all</button>
          </li>
          <li><div class="dropdown-item-divider"></div></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="removeLevels()" id="deleteMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-delete-disabled" id="deleteMenuImg"></i>Delete</button>
          </li>
          <li><div class="dropdown-section-divider"></div></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="resetIDs()" id="resetIdsMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-reset-id-disabled" id="resetIdsMenuImg"></i>Reset all IDs</button>
          </li>
          <li><hr class="dropdown-item-divider" /></li>
        </ul>
      </li>
      <li>
        <span><i class="icon-separator"></i></span>
      </li>
      <li>
        <button onclick="showAddLevelsModal()" class="btn btn-nav-icon" id="addButton" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="addImage"></i></button>
      </li>
      <li>
        <button onclick="selectAll()" class="btn btn-nav-icon" id="selectAllButton" data-toggle="tooltip" data-placement="bottom" title="Select all" disabled><i class="icon-btn icon-select-rows-disabled" id="selectAllImg"></i></button>
      </li>
      <li>
        <button onclick="deselectAll()" class="btn btn-nav-icon" id="deselectAllButton" data-toggle="tooltip" data-placement="bottom" title="Deselect all" disabled><i class="icon-btn icon-deselect-rows-disabled" id="deselectAllImg"></i></button>
      </li>
      <li>
        <button onclick="removeLevels()" class="btn btn-nav-icon" id="deleteButton" data-toggle="tooltip" data-placement="bottom" title="Delete" disabled><i class="icon-btn icon-delete-disabled" id="deleteImg"></i></button>
      </li>
      <li>
        <span><i class="icon-separator"></i></span>
      </li>
      <li>
        <button onclick="resetIDs()" class="btn btn-nav-icon" id="resetIdsButton" data-toggle="tooltip" data-placement="bottom" title="Reset all IDs" disabled><i class="icon-btn icon-reset-id-disabled" id="resetIdsImg"></i></button>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control rounded-0" type="search" placeholder="Filter" aria-label="Filter" id="levelFilterInput" oninput="onLevelFilterTextBoxChanged()">
      <span><i class="icon-filter"></i></span>
    </form>
  </div>
</nav>

<table class="container-data" id="tallyEnableDiv">
  <tr class="row-data">
    <td class="col-data-label tally-level-size">Tally Level:</td>
    <td class="col-data-input">
      <div class="select-wrapper">
        <select class="custom-select" name="tallyLevelId" id="tallyLevelId" onchange="onChangeTallyLevel(this.value)">
          {{ range .Levels }}
            <option value="{{ .Id }}">{{ .Name }}</option>
          {{ end }}
        </select>
      </div>
    </td>
  </tr>
</table>

<div class="grid-wrapper">
    <div id="levelsGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
</div>

<div id="gridSummaryBar" class="grid-summary-bar" role="status" aria-live="polite">
  <span class="grid-summary-item">
    <span class="col-data-label">Levels:</span>
    <span id="gridSummaryTotalValue" class="form-control" aria-label="Levels value">0</span>
  </span>
    <span class="grid-summary-sep"><i class="icon-separator" aria-hidden="true"></i></span>
  <span class="grid-summary-item">
    <span class="col-data-label">Selected:</span>
    <span id="gridSummarySelectedValue" class="form-control" aria-label="Selected value">0</span>
  </span>
</div>

<script src="/static/js/colorpickerEditor.js"></script>
<script src="/static/js/keystrokeHandling.js"></script>

<script type="text/javascript" charset="utf-8">
    let uiidBase = 0;
    const sdiDefaultColors = ["#00FF00", "#0000FF", "#FF0000", "#FFFF00", "#008080", "#FF00FF", "#008000", "#00FFFF", "#800080",
                              "#F68900", "#A3F4C7", "#F36DEC", "#3179F6", "#808000", "#7FEAFF", "#1D940F", "#FF8DAA"];

    const columnDefs = [
        {field: "id", hide: true, width: 40, maxWidth: 60, getQuickFilterText: () => ''},
        {field: "uiId", headerName: "ID", suppressMovable: true, minWidth: 40, maxWidth: 60, getQuickFilterText: () => '', valueGetter: (params) => { return params.data.uiId + uiidBase; }},
        {field: "name", suppressMovable: true, editable: true, minWidth: 150, maxWidth: 300, comparator: naturalSort},
        {field: "color", suppressMovable: true, editable: true, minWidth: 60, maxWidth: 90, cellStyle: colorCellStyle, cellEditor: ColorPickEditor, getQuickFilterText: () => ''},
        {field: "shortName", flex: 0, hide: true},
        {field: "description", suppressMovable: true, editable: true, minWidth: 300, maxWidth: 1590, getQuickFilterText: () => ''},
    ];

    const gridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
            // cellStyle: (params) => ({display: 'flex', alignItems: 'center'}), --> not needed for enterprise version
        },
        columnDefs: columnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onSelectionChanged,
        onCellValueChanged: onCellValueChanged,
        stopEditingWhenCellsLoseFocus: true,

        onFirstDataRendered: () => updateSummaryBar(),
        onModelUpdated: () => updateSummaryBar(),
        onRowDataUpdated: () => updateSummaryBar(),
        onFilterChanged: () => updateSummaryBar(),
    };

    //init table datasource once DOM content is loaded
    document.addEventListener('DOMContentLoaded', function () {
        var gridDiv = document.querySelector('#levelsGrid');
        var levelsGrid = new agGrid.Grid(gridDiv, gridOptions);
        fetch('/level/agdata')
          .then((response) => response.json())
          .then((data) => {
            gridOptions.api.setRowData(data);
            if (gridOptions.api.getDisplayedRowAtIndex(0)){
              gridOptions.api.getDisplayedRowAtIndex(0).setSelected(true);
            }
            updateSummaryBar();
        });
      document.getElementById("levelsGrid").ag_grid = levelsGrid;
      window.addEventListener(DBMODE_TABLE, handleLevelModeChange);
      addWSDBListener();
      getUIIDBaseSetting(updateUiIdBase);
    });

    function updateUiIdBase(baseNumber) {
        uiidBase = baseNumber;
        gridOptions.api.refreshCells();
    }

    function removeLevels() {
        const selectedRows = gridOptions.api.getSelectedRows();
        if (selectedRows.length > 0) {
            displayDialog("removeLevelModal");
        } else {
            displayWarningDialog("Please select a level to delete.");
        }
    }

    function removeSelectedLevels() {
        let selectedRows = gridOptions.api.getSelectedRows();
        let ids = selectedRows.map(node => node.id);
        console.log("removeRows - ids: ", ids)
        $.ajax({
            url: "/level/remove?ids=" + ids,
        });
    }

    function selectAll() {
        gridOptions.api.forEachNode(function (node) {
            node.setSelected(true);
        });
    }

    function deselectAll() {
        const selectedRows = gridOptions.api.getSelectedRows();
        if (selectedRows.length > 0) {
            gridOptions.api.forEachNode(function (node) {
                node.setSelected(false);
            });
        } else {
            displayWarningDialog("There are no rows to deselect.");
        }
    }

    function resetIDs() {
        $.ajax({
            url: "/level/resetUIIDs",
        });
    }

    function onLevelFilterTextBoxChanged() {
        gridOptions.api.setQuickFilter(document.getElementById('levelFilterInput').value);
        updateSummaryBar();
    }

    function onCellValueChanged(event) {
        if (event.column.colId == "name") {
          if (!event.newValue) {
            return;
          }
          event.newValue = event.newValue.trim();
          if (!validateString(event.newValue)) {
            displayErrorDialog(NameErrorMessage);
            refreshLevelGridOptions();
            return;
          }
        }
        $.post("/level/update", event.data).fail(function(response) {
          displayErrorDialog(response.responseText);
          refreshLevelGridOptions();
        });
    }

    function refreshLevelGridOptions() {
      fetch('/level/agdata').then((response) => response.json()).then((data) => {
        const firstSelectedNodeIndex = gridOptions.api.getSelectedNodes()[0].rowIndex;
        gridOptions.api.setRowData(data);
        setNodeSelected(gridOptions, firstSelectedNodeIndex);
        updateSummaryBar();
      });
    }

    function onSelectionChanged() {
        const selectedRows = gridOptions.api.getSelectedRows();
        if (selectedRows.length > 0) {
          enableUiButton("deselectAll");
          enableUiButton("deselectAllMenu");
          enableUiButton("delete");
          enableUiButton("deleteMenu");
        } else {
          disableUiButton("deselectAll");
          disableUiButton("deselectAllMenu");
          disableUiButton("delete");
          disableUiButton("deleteMenu");
        }
        if (gridOptions.api.getDisplayedRowCount() == 0) {
          disableUiButton("selectAll");
          disableUiButton("selectAllMenu");
          disableUiButton("resetIds");
          disableUiButton("resetIdsMenu");
        } else {
          enableUiButton("selectAll");
          enableUiButton("selectAllMenu");
          enableUiButton("resetIds");
          enableUiButton("resetIdsMenu");
        }
        if (dbMode == DBMode_Protect) {
          disableButtonIds(["add", "addMenu", "delete", "deleteMenu", "resetIds", "resetIdsMenu"]);
        }
        updateSummaryBar();
    }

    function addWSDBListener() {
        getTallyEnable();
        getTallyLevel();
        var socket = new WebSocket("ws://" + window.location.hostname + ":8080/dsws");
        socket.onopen = function () {
            console.log("Status: Connected\n");
        };
        socket.onmessage = function (event) {
            const msg = JSON.parse(event.data);
            switch (msg.table) {
                case DATABASE_TABLE:
                    handleDatabaseTableChange(msg, () => {
                        location.reload();
                    });
                    break;
                case LEVEL_TABLE:
                    fetch('/level/agdata')
                      .then((response) => response.json())
                      .then((data) => {
                        const selectedNodes = gridOptions.api.getSelectedNodes();
                        let firstSelectedNodeIndex = 0;
                        if (selectedNodes.length > 0) {
                          firstSelectedNodeIndex = gridOptions.api.getSelectedNodes()[0].rowIndex;
                        }
                        gridOptions.api.setRowData(data)
                        if (msg.operation === INSERT_OP){
                          let rowCount = gridOptions.api.getDisplayedRowCount();
                          gridOptions.api.forEachNode((node) => {
                            if (node.rowIndex == rowCount - 1) {
                              node.setSelected(true, true);
                            }
                          });
                          gridOptions.api.ensureIndexVisible(rowCount - 1, 'bottom');
                          updateSummaryBar();
                        } else {
                          let rowCount = gridOptions.api.getDisplayedRowCount();
                          if (firstSelectedNodeIndex < rowCount) {
                            gridOptions.api.forEachNode((node) => {
                              if (node.rowIndex == firstSelectedNodeIndex) {
                                node.setSelected(true, true);
                              }
                            });
                            hideDialog('removeLevelModal');
                            gridOptions.api.ensureIndexVisible(firstSelectedNodeIndex, null);
                            updateSummaryBar();
                          } else {
                            gridOptions.api.forEachNode((node) => {
                              if (node.rowIndex == rowCount - 1) {
                                node.setSelected(true, true);
                              }
                            });
                            gridOptions.api.ensureIndexVisible(rowCount - 1, 'bottom')
                            hideDialog('removeLevelModal');
                            onSelectionChanged();
                            updateSummaryBar();
                          }
                        }
                    });
                    break;
                case CONFIGURATION_TABLE:
                    getTallyEnable();
                    getTallyLevel();
                    break;
                case UIID_BASE_NUMBER:
                    getUIIDBaseSetting(updateUiIdBase);
                    break;
            }
        };
        socket.onerror = function(event) {
            console.log("Connection Error: " + JSON.stringify(event));
        };
        socket.onclose = function (event) {
          console.log("Socket is closed. Reconnect will be attempted in 1 second. Error Code: " +  event.code + ", Reason: " + event.reason);
          setTimeout(function() {
            addWSDBListener();
          }, 1000);
        };
    }

    function colorCellStyle(params) {
        return {color: params.value, backgroundColor: params.value};
    }

    function onSelectAddType(addType) {
        let fieldIds = ["levelCount", "levelName", "startCount", "colorPick", "description"];
        for (let i = 0; i < fieldIds.length; i++) {
            if (addType != "addDefaultLevel") {
                document.getElementById(fieldIds[i]).disabled = true;
            } else {
                if (fieldIds[i] != "startCount") {
                    document.getElementById(fieldIds[i]).disabled = false;
                } else {
                    onChangeLevelCount();
                }
            }
        }
        showLevelsPreview();
    }

    function onChangeLevelCount() {
        let levelCount = Number(document.getElementById("levelCount").value);
        if (isNaN(levelCount)) {
            document.getElementById("levelCount").value = 1;
        } else {
            document.getElementById("levelCount").value = Math.min(Math.max(levelCount, 1), 64);
        }
        if (document.getElementById("levelCount").value > 1) {
            document.getElementById("startCount").disabled = false;
        } else {
            document.getElementById("startCount").value = 1;
            document.getElementById("startCount").disabled = true;
        }
    }

    function onChangeStartCount() {
        let startCount = Number(document.getElementById("startCount").value);
        if (isNaN(startCount)) {
            document.getElementById("startCount").value = 1;
        } else {
            document.getElementById("startCount").value = Math.max(startCount, 1);
        }
    }

    function showAddLevelsModal() {
        document.getElementById("addDefaultLevel").checked = true;
        document.getElementById("addSDILevel").checked = false;
        document.getElementById("addVideoStereoLevel").checked = false;
        onSelectAddType("addDefaultLevel");
        document.getElementById("levelCount").value = 1;
        document.getElementById("levelName").value = "";
        document.getElementById("startCount").value = 1;
        showLevelsPreview();
        document.getElementById("colorPick").value = "#00FF00";
        document.getElementById("description").value = "";
        displayDialog("addLevelModal");
    }

    function addLevel() {
        let levelNames;
        let newLevelsData = [];
        if (document.getElementById("addDefaultLevel").checked) {
          let prefix = document.getElementById("levelName").value;
          if (!validateString(prefix)) {
            displayErrorDialog(NameErrorMessage);
            return;
          }
          let formatPrefix = encodeURIComponent(prefix);
          let count = document.getElementById("levelCount").value;
          let start = document.getElementById("startCount").value;
          levelNames = getUniqueNewLevelNames(formatPrefix, start, count);
          // color is in Format like "#00ff00" where character "#" not accepted in GET operations, so replace with URL Encoding Reference
          let colorPick = document.getElementById("colorPick").value.replace('#', '%23');
          let description = encodeURIComponent(document.getElementById("description").value);
          for (let i = 0; i < levelNames.length; i++) {
            newLevelsData.push({
              name: levelNames[i],
              color: colorPick,
              description: description
            });
          }
        } else {
          if (document.getElementById("addSDILevel").checked) {
            levelNames = getSDILevelNames();
          } else if (document.getElementById("addVideoStereoLevel").checked) {
            levelNames = getVideoStereoLevelNames();
          }
          for (let i = 0; i < levelNames.length; i++) {
            newLevelsData.push({
              name: levelNames[i],
              // color is in Format like "#00ff00" where character "#" not accepted in GET operations, so replace with URL Encoding Reference
              color: sdiDefaultColors[i].replace('#', '%23'),
              description: ""
            });
          }
        }
        hideDialog("addLevelModal");
        displayDialog("LoadingModal");
        $.ajax({
          url: "/level/add?&levels=" + JSON.stringify(newLevelsData),
          success: () => {
            hideDialog("LoadingModal");
          },
          error: (err) => {
            displayErrorDialog(err.responseText || JSON.stringify(err));
          }
        });
    }

    function showLevelsPreview() {
        let prefix = document.getElementById("levelName").value;
        let count = document.getElementById("levelCount").value;
        let start = document.getElementById("startCount").value;
        let addType = Number(document.querySelector('input[name="addLevelOperation"]:checked').value);
        let levelsToAdd;
        let levelNames;
        switch (addType) {
            case 1:
                levelNames = getUniqueNewLevelNames(prefix, start, count);
                break;
            case 2:
                levelNames = getSDILevelNames();
                break;
            case 3:
                levelNames = getVideoStereoLevelNames();
                break;
        }
        levelsToAdd = levelNames.join(", ");
        document.getElementById("levelsToAdd").value = levelsToAdd;
    }

    function getSDILevelNames() {
      return getUniqueNewLevelNames("VID", 1, 1).concat(getUniqueNewLevelNames("AUD ", 1, 16));
    }

    function getVideoStereoLevelNames() {
      return getUniqueNewLevelNames("VID", 1, 1).concat(getUniqueNewLevelNames("AUD ", 1, 2));
    }

    function getUniqueNewLevelNames(prefix, startingIndex, count) {
      let currentLevelNames = [];
      gridOptions.api.forEachNode((node) => {
        currentLevelNames.push(node.data.name);
      });

      let levelNames = [];
      if (count == 1) {
        levelNames.push(prefix);
      } else {
        for (let i = 0; i < count; i++) {
          levelNames.push(prefix + (parseInt(startingIndex) + i));
        }
      }

      let iterations = 0;
      loop1:
      for (let i = 0; i < levelNames.length; i++){
        // The 'iterations' is a safety stop in case there is some sort of issue with the loop since we have the
        // potential to create an infinite loop and this ensures that there is a fixed bound.  As long
        // as we don't have to do 1000 renames until we get unique names, there are no problems.
        iterations++;
        if (iterations > 1000){
          console.error("getUniqueNewLevelNames - FAILED too many iterations");
          return [];
        }

        let name = levelNames[i];
        for (let j = 0; j < currentLevelNames.length; j++) {
          if (name == currentLevelNames[j]) {
            let regex = /\((.*?)\)/;
            let matched = regex.exec(name);
            let suffix = "";
            let newProposedName = name + suffix;
            // If there is already a XX (#), we will try to increment the number in the parenthesis and recheck the list
            if (matched) {
              let oldSuffix = matched[0];
              suffix = "(" + (parseInt(matched[1])+1) + ")";
              newProposedName = newProposedName.replace(oldSuffix, suffix);
            } else {
              suffix = " (1)";
              newProposedName = name + suffix;
            }

            levelNames[i] = newProposedName;
            i--;  // Restart the check of this particular name now that we have changed it
            continue loop1;
          }
        }
      }
      return levelNames;
    }

    function getTallyLevel() {
      $.ajax({
        url: "/configuration?key=tallyLevelId", success: (result) => {
          document.getElementById(result.key).value = Number(result.value);
        }
      });
    }

    function getTallyEnable() {
        $.ajax({
            url: "/configuration?key=tallyEnable",
            success: (result) => {
                const tallyDiv = document.getElementById("tallyEnableDiv");
                if (result.value === "true") {
                    tallyDiv.hidden = false;
                } else {
                    tallyDiv.hidden = true;
                }
            }
        });
    }

    function onChangeTallyLevel(value) {
      $.ajax({
        url: "/configuration/update?key=tallyLevelId" + "&value=" + value,
      });
    }

    function handleLevelModeChange(eventData) {
      dbMode = eventData.detail.dbMode;
      if (eventData.detail.dbMode == DBMode_Protect) {
        disableButtonIds(["add", "addMenu", "delete", "deleteMenu", "resetIds", "resetIdsMenu"]);
      } else {
        onSelectionChanged();
      }
    }

    function updateSummaryBar() {
        const api = gridOptions?.api;
        if (!api) return;

        const total = api.getDisplayedRowCount();

        const selected = api.getSelectedRows().length;

        const totalEl = document.getElementById('gridSummaryTotalValue');
        const selEl   = document.getElementById('gridSummarySelectedValue');

        if (totalEl) totalEl.textContent = String(total);
        if (selEl)   selEl.textContent   = String(selected);
    }

</script>

<!--Add levels modal-->
<div class="modal" id="addLevelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addLevelModalLabel"aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-add-level-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="addLevelModalLabel"><i class="icon-add icon-white"></i>Add Levels</span>
        <span class="btn btn-transparent" onclick="hideDialog('addLevelModal');"><i class="icon-close-header"></i></span>
      </div>
        <div class="modal-body">
          <table class="container-data">
            <tr class="row-data">
              <td class="col-data-label">Levels:</td>
              <td class="col-data-input">
                  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                      <input type="radio" class="btn-check" name="addLevelOperation" id="addDefaultLevel" autocomplete="off" value="1" tabindex="0" onclick="onSelectAddType('addDefaultLevel')" checked>
                      <label class="btn" for="addDefaultLevel">Default</label>
                      <input type="radio" class="btn-check" name="addLevelOperation" id="addSDILevel" autocomplete="off" value="2" tabindex="1" onclick="onSelectAddType('addSDILevel')">
                      <label class="btn" for="addSDILevel">SDI</label>
                      <input type="radio" class="btn-check" name="addLevelOperation" id="addVideoStereoLevel" autocomplete="off" value="3"  tabindex="2" onclick="onSelectAddType('addVideoStereoLevel')">
                      <label class="btn" for="addVideoStereoLevel">Video & Stereo</label>
                  </div>
              </td>
            </tr>
            <tr class="row-data">
              <td class="col-data-label">Level Count:</td>
              <td class="col-data-input"><span class="number-wrapper"><input type="number" class="form-control rounded-0  count-size" name="levelCount" id="levelCount" tabindex="3" oninput="onChangeLevelCount();showLevelsPreview()" value="1"/></span></td>
            </tr>
            <tr class="row-data">
              <td class="col-data-label">Name (Prefix):</td>
              <td class="col-data-input"><input class="form-control rounded-0 name-size" name="levelName" id="levelName" tabindex="4" oninput="showLevelsPreview();"/></td>
            </tr>
            <tr class="row-data">
              <td class="col-data-label">Start Count:</td>
              <td class="col-data-input"><span class="number-wrapper"><input type="number" class="form-control rounded-0 start-count-size" name="startCount" id="startCount" value="1" tabindex="5" oninput="onChangeStartCount();showLevelsPreview();" disabled/></span></td>
            </tr>
            <tr class="row-data">
              <td class="col-data-label">Color:</td>
              <td class="col-data-input"><input class="form-control rounded-0 color-pick-size" type="color" value="#00FF00" tabindex="6" name="color" id="colorPick"/></td>
            </tr>
            <tr class="row-data">
              <td class="col-data-label">Description:</td>
              <td class="col-data-input"><input class="form-control rounded-0 description-size" name="description" tabindex="7" id="description"/></td>
            </tr>
            <tr class="row-data">
              <td class="col-data-label">Preview:</td>
              <td class="col-data-input"><input class="form-control rounded-0 read-only" name="levelsToAdd" tabindex="8" value="1" placeholder="None" id="levelsToAdd" readonly/></td>
            </tr>
          </table>
          <div class="modal-footer justify-content-between">
            <button class="btn btn-text btn-outline-secondary" tabindex="10" onclick="hideDialog('addLevelModal')">Cancel</button>
            <button class="btn btn-text" tabindex="9" onclick="addLevel()">Apply</button>
          </div>
        </div>
    </div>
  </div>
</div>

<!--Remove levels confirmation modal-->
<div class="modal" id="removeLevelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeLevelModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-remove-level-size">
    <div class="modal-content">
      <div class="modal-header info-header justify-content-between">
        <span class="modal-title" id="removeLevelModalLabel"><i class="icon-delete icon-white"></i>Confirm Delete Levels</span>
        <span class="btn btn-transparent" onclick="hideDialog('removeLevelModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <label class="container-data">
          Deleting the highlighted level(s) might affect the I/O mapping templates (accessible from the "Fill I/O" button on the sources and destinations pages).  Are you sure you want to continue?
        </label>
      </div>
      <div class="modal-footer justify-content-between">
        <button class="btn btn-text btn-outline-secondary"  tabindex="1" onclick="hideDialog('removeLevelModal');">Cancel</button>
        <button  class="btn btn-text" tabindex="0" onclick="removeSelectedLevels()">Apply</button>
      </div>
    </div>
  </div>
</div>

{{ end }}