{{ define "content" }}

<script src="/static/js/checkboxRenderer.js"></script>
<script src="/static/js/numberSpinnerRenderer.js"></script>
<script src="/static/js/inputFields.js"></script>
<script src="/static/js/implied-src.js"></script>

<link href="/static/css/pages/database.css" rel="stylesheet">

<!-- Add DB table -->
<div class="row" style="height: 100%">
  <div class="col splitBorder db-left-pane-style">
    <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="activateDatabaseCheck()" id="activateMenuButton"><i class="icon-btn-nav-menu icon-plain icon-activate" id="activateMenuImg"></i>Activate</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="showAddDatabaseModal()"><i class="icon-add  icon-plain icon-btn-nav-menu"></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="duplicateDatabaseCheck()"><i class="icon-duplicate  icon-plain icon-btn-nav-menu"></i>Duplicate</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="removeDatabaseCheck()" id="deleteMenuButton"><i class="icon-btn-nav-menu  icon-plain icon-delete" 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="showImportDatabaseModal()"><i class="icon-import  icon-plain icon-btn-nav-menu"></i>Import</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="exportDatabaseCheck()"><i class="icon-export  icon-plain icon-btn-nav-menu"></i>Export</button>
              </li>
              <li><div class="dropdown-section-divider"></div></li>
              <li class="dropdown-item dropdown-item-nav"  id="legacyDbSpanMenu">
              <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="showImportLegacyDBModal()"><i class="icon-database icon-btn-nav-menu"></i>Legacy DB</button>
              </li>
              <li><hr class="dropdown-item-divider" /></li>
            </ul>
          </li>
          <li>
            <span><i class="icon-separator"></i></span>
          </li>
          <li>
            <button class="btn btn-nav-icon" onclick="activateDatabaseCheck()" id="activateButton" data-testid="database-activate-button" data-toggle="tooltip" data-placement="bottom" title="Activate">
                <i class="icon-btn icon-activate" id="activateImg"></i>
            </button>
          </li>
          <li>
            <span class="btn btn-nav-icon" onclick="showAddDatabaseModal()" id="tbAddButton" data-testid="toolbar-add-button" data-toggle="tooltip" data-placement="bottom" title="Add">
                <i class="icon-btn icon-add"></i>
            </span>
          </li>
          <li>
            <span class="btn btn-nav-icon" onclick="duplicateDatabaseCheck()" id="tbDuplicateButton" data-testid="database-duplicate-button" data-toggle="tooltip" data-placement="bottom" title="Duplicate">
                <i class="icon-btn icon-duplicate"></i>
            </span>
          </li>
          <li>
            <button class="btn btn-nav-icon" onclick="removeDatabaseCheck()" id="deleteButton" data-testid="database-delete-button" data-toggle="tooltip" data-placement="bottom" title="Delete">
                <i class="icon-btn icon-delete" id="deleteImg"></i>
            </button>
          </li>
          <li style="display:none;"> <!-- The hiding of this button is just temporary until other backend issues get resolved -->
            <span class="btn btn-nav-icon" onclick="editDatabase()">
                <i class="icon-btn icon-edit"></i>Edit
            </span>
          </li>
          <li>
            <span><i class="icon-separator"></i></span>
          </li>
          <li>
            <span class="btn btn-nav-icon" onclick="showImportDatabaseModal()" id="tbImportButton" data-testid="database-import-button" data-toggle="tooltip" data-placement="bottom" title="Import">
                <i class="icon-btn icon-import"></i>
            </span>
          </li>
          <li>
            <span class="btn btn-nav-icon" onclick="exportDatabaseCheck()" id="tbExportButton" data-testid="database-export-button" data-toggle="tooltip" data-placement="bottom" title="Export">
                <i class="icon-btn icon-export"></i>
            </span>
          </li>
          <li>
            <span><i class="icon-separator"></i></span>
          </li>
          <li>
            <span id="legacyDbSpan" class="btn btn-nav-icon" onclick="showImportLegacyDBModal()" data-toggle="tooltip" data-placement="bottom" title="Legacy DB">
                <i class="icon-btn icon-database"></i>
            </span>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control rounded-0" type="search" placeholder="Filter ..." aria-label="Filter" id="dbInputFilter" data-testid="database-filter-input" oninput="onDBFilterTextBoxChanged()">
          <span><i class="icon-filter"></i></span>
        </form>
      </div>
    </nav>
    <div class="grid-wrapper-database" id="databasesTable" data-testid="database-table-container">
      <div id="databasesGrid" data-testid="database-grid" style="height: 100%" class="ag-theme-balham-dark"></div>
    </div>
  </div>

  <div class="col tab db-editor-style">
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item" role="presentation">
          <button class="tablinks tab-button active" id="DBConfigButton" data-bs-toggle="tab" data-bs-target="#DBConfig" type="button" role="tab" aria-controls="DBConfig" aria-selected="true">Database Configuration</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="tab-separator" id="DBConfigButtonSeparator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="tablinks tab-button" id="DBBuilderButton" {{ if not .DBBuilderAvailable }}style="display: none;"{{ end }} data-bs-toggle="tab" data-bs-target="#DBBuilder" type="button" role="tab" aria-controls="DBBuilder" aria-selected="false">Database Builder</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="tab-separator" id="DBBuilderButtonSeparator" {{ if not .DBBuilderAvailable }}style="display: none;"{{ end }} type="button" role="tab"><i class="icon-tab-separator"></i></button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="tablinks tab-button" id="db_implied_src_button" {{ if not .ImpliedSourceAvailable }}style="display: none;"{{ end }} data-bs-toggle="tab" data-bs-target="#db_implied_src_content" type="button" role="tab" aria-controls="db_implied_src_content" aria-selected="false">Auto-Configured Audio</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="tab-separator" id="db_implied_src_separator" {{ if not .ImpliedSourceAvailable }}style="display: none;"{{ end }} type="button" role="tab"><i class="icon-tab-separator"></i></button>
      </li>
    </ul>
    <div class="tab-content" style="height:100%;" id="myTabContent">
      <div class="tab-pane show active" id="DBConfig" role="tabpanel" aria-labelledby="DBConfig">
        {{ if not .OfflineDevice }}
          <nav class="header">
              <div>Operation Mode</div>
          </nav>
        <table class="container-data-after-title">
          <tr class="row-data">
            <td class="col-data-input">
                <input class="form-check-input" type="radio" onchange="onDBMode()" value="0" id="dbmodeautosave" name="dbmode" checked>
            </td>
            <td class="col-data-label-after" for="dbmodeautosave">&nbsp;&nbsp;Auto Save</td>
          </tr>
          <tr class="row-data">
            <td class="col-data-input">
                <input class="form-check-input" type="radio" onchange="onDBMode()" value="1" id="dbmodeprotect" name="dbmode">
            </td>
            <td class="col-data-label-after" for="dbmodeprotect">&nbsp;&nbsp;Protect</td>
          </tr>
          <tr class="row-data">
            <td class="col-data-input">
                <input class="form-check-input" type="radio" onchange="onDBMode()" value="2" id="dbmodecancelapply" name="dbmode">
            </td>
            <td class="col-data-label-after" for="dbmodecancelapply">&nbsp;&nbsp;Manual Save</td>
          </tr>
        </table>
        {{ end }}

        <nav class="header">
          <div>Display IDs</div>
        </nav>
        <p class="container-data-after-title">This only affects how IDs are displayed. Internally, the data always starts at 0.</p>
        <table class="container-data-after-title">
            <tr class="row-data">
                <td class="col-data-input">
                    <input class="form-check-input" type="radio" onchange="setUIIDBaseSetting(this.value);" value="0" id="uiid_zero_base" name="uiidbase" checked>
                </td>
                <td class="col-data-label-after"><label for="uiid_zero_base">&nbsp;&nbsp;Start at 0</label></td>
            </tr>
            <tr class="row-data">
                <td class="col-data-input">
                    <input class="form-check-input" type="radio" onchange="setUIIDBaseSetting(this.value);" value="1" id="uiid_one_base" name="uiidbase">
                </td>
                <td class="col-data-label-after"><label for="uiid_one_base">&nbsp;&nbsp;Start at 1</label></td>
            </tr>
        </table>

        {{ if .TallyAvailable }}
        <nav class="header">
          <div>Tally</div>
        </nav>
        <table class="container-data-after-title">
          <tr class="row-data">
            <td class="col-data-input">
                <input class="form-check-input" type="checkbox" onchange="onChangeConfiguration('tallyEnable')" value="" id="tallyEnable">
            </td>
            <td class="col-data-label-after" for="tallyEnable">&nbsp;&nbsp;Enable Tally</td>
          </tr>
        </table>
        {{ end }}

        <nav class="header">
              <div>Snapshots</div>
        </nav>
        <div class="container-data-after-title">
            <table style="width:215px;">
                <tr class="row-data">
                    <td style="width:165px;" class="col-data-label">Snapshot Frequency (min):</td>
                    <td class="col-data-input">
                      <div class="select-wrapper">
                        <select class="custom-select" name="snapshotIntervalOptions" id="intervalSelect" onchange="changeSnapshotIntervalCheck()">
                            <option value="15m">15</option>
                            <option value="10m">10</option>
                            <option value="5m">5</option>
                            <option value="3m">3</option>
                        </select>
                      </div>
                    </td>
                </tr>
            </table>
        </div>
        <nav class="navbar-snapshots navbar-expand-sm">
          <span class=" btn btn-nav-icon-text navbar-toggler" role="button" data-bs-toggle="collapse" data-bs-target="#snapshotsGridControls" aria-controls="snapshotsGridCControls" aria-expanded="false" aria-label="Toggle navigation">
              <i class="icon-menu"></i>Menu
          </span>
          <div class="collapse navbar-collapse" id="snapshotsGridControls">
            <ul class="navbar-nav me-auto mb-lg-0">
              <li>
                <span class="btn btn-nav-icon-text" onclick="restoreSnapshotCheck()"><i class="icon-restore"></i>Restore</span>
              </li>
              <li>
                <span class="btn btn-nav-icon-text" onclick="createSnapshot()"><i class="icon-add"></i>Create</span>
              </li>
            </ul>
          </div>
        </nav>
        <div class="grid-wrapper-snapshot" id="snapshotsTable">
          <div id="snapshotsGrid" style="height: 200px; width:205px;"  class="ag-theme-balham-dark"></div>
        </div>
      </div>
      {{ template "databasebuilder" . }}
      <div class="tab-pane col container-data container-data-device-matrix" id="db_implied_src_content" {{ if not .ImpliedSourceAvailable }}style="display: none;"{{ end }} role="tabpanel" aria-labelledby="db_implied_src_content">
        <div class="grid-wrapper-database" style="height: 100%;">
          <div id="implied_src_grid" style="height: 540px; width: 300px;" class="ag-theme-balham-dark"></div>
        </div>
      </div>
    </div>
  </div>
</div>

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

<script type="text/javascript" charset="utf-8">
    var currentEditingDB = "";


    async function countArray(url) {
        const r = await fetch(url, { credentials: 'same-origin' });
        if (!r.ok) throw new Error(url + ' ' + r.status);
        const data = await r.json();
        return Array.isArray(data) ? data.length : 0;
    }

    const setText = (id, v) => {
        const el = document.getElementById(id);
        if (el) el.textContent = String(v);
    };

    // ============================================================================
    // Database Summary Bar - Injected into main page footer (matches favorites pattern)
    // ============================================================================
    function ensureDbSummaryBarExists() {
        const footerDiv = document.getElementById('footerdiv');
        if (!footerDiv || document.getElementById('dbSummaryBar')) {
            return; // Footer not found or summary bar already exists
        }

        // Create summary bar HTML and inject into footer
        const summaryBar = document.createElement('div');
        summaryBar.id = 'dbSummaryBar';
        summaryBar.className = 'grid-summary-bar';
        summaryBar.setAttribute('role', 'status');
        summaryBar.setAttribute('aria-live', 'polite');
        summaryBar.innerHTML = `
            <div class="grid-summary-item">
                <span id="dbSummaryDbLabel" class="col-data-label">Database:</span>
                <span id="dbSummaryDbValue" class="form-control rounded-0 auto-size"></span>
            </div>
            <span class="grid-summary-sep"><i class="icon-separator" aria-hidden="true"></i></span>
            <div class="grid-summary-item">
                <span id="dbSummaryLevelsLabel" class="col-data-label">Levels:</span>
                <span id="dbSummaryLevelsValue" class="form-control rounded-0 auto-size"></span>
            </div>
            <span class="grid-summary-sep"><i class="icon-separator" aria-hidden="true"></i></span>
            <div class="grid-summary-item">
                <span id="dbSummarySourcesLabel" class="col-data-label">Sources:</span>
                <span id="dbSummarySourcesValue" class="form-control rounded-0 auto-size"></span>
            </div>
            <span class="grid-summary-sep"><i class="icon-separator" aria-hidden="true"></i></span>
            <div class="grid-summary-item">
                <span id="dbSummaryDestinationsLabel" class="col-data-label">Destinations:</span>
                <span id="dbSummaryDestinationsValue" class="form-control rounded-0 auto-size"></span>
            </div>
        `;

        // Insert at the beginning of the footer (before existing elements)
        footerDiv.insertBefore(summaryBar, footerDiv.firstChild);
    }

    async function updateDbSummaryBar() {
        // Ensure summary bar exists in the footer
        ensureDbSummaryBarExists();
        const [dbRows, levels, sources, dests] = await Promise.all([
            fetch('/database/agdata', { credentials: 'same-origin' }).then(r => r.json()),
            countArray('/level/agdata'),
            countArray('/source/agdata'),
            countArray('/destination/agdata'),
        ]);

        let activeName = '—';
        if (Array.isArray(dbRows) && dbRows.length) {
            const activeRow = dbRows.find(r => String(r.Status).toLowerCase() === 'active') || null;
            if (activeRow && activeRow.Name) {
                activeName = activeRow.Name;
            }
        }

        setText('dbSummaryDbValue', activeName);
        setText('dbSummaryLevelsValue', levels);
        setText('dbSummarySourcesValue', sources);
        setText('dbSummaryDestinationsValue', dests);
    }

    function setDatabaseInformation (eventData) {
      currentEditingDB = eventData.detail.editingDB;
      gridOptions.api.redrawRows(); // Need to use redrawRows() because of the use of the DatabaseStatusRenderer
      dbMode = eventData.detail.dbMode;
      //select radio button for db mode change
      switch (eventData.detail.dbMode) {
        case DBMode_AutoSave:
          document.getElementById("dbmodeautosave").checked = true;
          break;
        case DBMode_Protect: //blue border
          document.getElementById("dbmodeprotect").checked = true;
          break;
        case DBMode_CancelApply:
          document.getElementById("dbmodecancelapply").checked = true;
          break;
      }
      updateBuildButtonState();
    }

    class DatabaseStatusRenderer {
      init(params) {
        this.eGui = document.createElement('span');
        let htmlMark = '';
        if (params.data.Name == currentEditingDB) {
          $.ajax({url: "/database/getmode", success: (mode) => {
              if (mode == DBMode_Protect) {
                this.eGui.innerHTML = '<p>' + params.value.capitalize() + '<i class="icon-protect" style="margin-left:10px;"></i></p>';
              } else {
                this.eGui.innerHTML = "<p>" + params.value.capitalize() + "</p>";
              }
            }});
        } else {
          this.eGui.innerHTML = "<p>" + params.value.capitalize() + "</p>";
        }

      }

      getGui() {
        return this.eGui;
      }

      refresh(params) {
        return false;
      }
    }

    const columnDefs = [
      { field: "Name", suppressMovable: true, checkboxSelection: false, editable: false,  minWidth: 150, comparator: naturalSort},
      { field: "Status", suppressMovable: true, minWidth: 80, maxWidth: 90, getQuickFilterText: () => '',
        cellRendererSelector: (params) => {
          const StatusField = {
            component: DatabaseStatusRenderer,
            params: {values: ['active', 'inactive']}
          };
          if (params.data) {
            return StatusField;
          }
          return undefined;
        }},
    ];

    const gridOptions = {
      defaultColDef: {
        resizable: true,
        sortable: true,
        flex: 1,
        editable: false,
      },

      columnDefs: columnDefs,
      suppressMenuHide: true,
      suppressDragLeaveHidesColumns: true,
      headerHeight: 36,
      rowHeight: 31,
      rowSelection: 'single',
      onCellValueChanged: onCellValueChanged,
      onSelectionChanged: onSelectionChanged,
    };

    gridOptions.components = {
      checkboxRendererAG: CheckboxRendererAG
    }

    const dbImpliedSrcSuffixGridConf = createImpliedSrcSuffixGridConf(true);

    const snapshotsColumnDefs = [
      { field: "Description", headerName: "Date/Time", suppressMovable: true, checkboxSelection: false, editable: false,  minWidth: 150},
    ];

    const importLegacyDBColumnDefs = [
      {field: "Name", headerName: "Database", suppressMovable: true},
    ];

    const snapshotsGridOptions = {
      defaultColDef: {
        resizable: false,
        sortable: true,
        flex: 1,
        editable: false,
      },

      columnDefs: snapshotsColumnDefs,
      suppressMenuHide: true,
      suppressDragLeaveHidesColumns: true,
      headerHeight: 36,
      rowHeight: 31,
      rowSelection: 'single',
    };

    var importLegacyDBGridOptions = {
      defaultColDef: {
        resizable: true,
        sortable: true,
        flex: 1,
      },
      columnDefs: importLegacyDBColumnDefs,
      suppressMenuHide: true,
      suppressDragLeaveHidesColumns: true,
      headerHeight: 36,
      rowHeight: 31,
      rowSelection: 'single',
    };

    const importLegacyDeviceColumnDefs = [
      {field: "name", headerName: "Device", suppressMovable: true, maxWidth: 250},
      {field: "connection", cellClass:'drop-down-cell', headerName: "Connection | Type | IP/COM Port", editable: true, cellEditor: 'agSelectCellEditor', cellEditorParams:{values: []}, suppressMovable: true, minWidth: 70},
    ];

    var importLegacyDeviceGridOptions = {
      defaultColDef: {
        resizable: true,
        sortable: true,
        flex: 1,
      },
      columnDefs: importLegacyDeviceColumnDefs,
      onCellValueChanged: updateLegacyDeviceWarning,
      suppressMenuHide: true,
      suppressDragLeaveHidesColumns: true,
      headerHeight: 36,
      rowHeight: 31,
    };

    document.addEventListener('DOMContentLoaded', function () {
      var gridDiv = document.querySelector('#databasesGrid');
      var databasesGrid = new agGrid.Grid(gridDiv, gridOptions);
      fetch('/database/agdata')
        .then((response) => response.json())
        .then((data) => {
          gridOptions.api.setRowData(data);
          gridOptions.api.forEachNode((node) => {
            if (node.data.Status === "active") {
              node.setSelected(true, true);
            }
          });
          updateDbSummaryBar();
        });
      document.getElementById("databasesGrid").ag_grid = databasesGrid;

      initDatabaseBuilder();

      var snapshotsGridDiv = document.querySelector('#snapshotsGrid');
      var snapshotsGrid = new agGrid.Grid(snapshotsGridDiv, snapshotsGridOptions);
      fetch('/snapshot/agdata')
        .then((response) => response.json())
        .then((data) => {
          snapshotsGridOptions.api.setRowData(data);
      });
      document.getElementById("snapshotsGrid").ag_grid = snapshotsGrid;

      var importLegacyDBGridDiv = document.querySelector('#importLegacyDBGrid');
      var importLegacyDBGrid = new agGrid.Grid(importLegacyDBGridDiv, importLegacyDBGridOptions);
      updateLegacyDb();
      document.getElementById("importLegacyDBGrid").ag_grid = importLegacyDBGrid;

      var importLegacyDeviceGridDiv = document.querySelector('#importLegacyDeviceGrid');
      var importLegacyDeviceGrid = new agGrid.Grid(importLegacyDeviceGridDiv, importLegacyDeviceGridOptions);
      document.getElementById("importLegacyDeviceGrid").ag_grid = importLegacyDeviceGrid;

      getConfiguration('tallyEnable');

      // Implied Source suffix status table. Row data will be loaded via refreshLevels().
      let impliedSrcGridDiv = document.getElementById("implied_src_grid");
      impliedSrcGridDiv.ag_grid = new agGrid.Grid(impliedSrcGridDiv, dbImpliedSrcSuffixGridConf);

      getConfiguration(IMPLIED_SRC_CONF_KEY);

      getConfiguration('snapshotInterval');
      setSnapshotOptions();
      //register for DB change updates on databases
      addWSDBListener();
      refreshLevels();
      updateDbSummaryBar();
      {{ if not .OfflineDevice }}
        window.addEventListener(DATABASE_TABLE, setDatabaseInformation);
      {{ end }}

      getUIIDBaseSetting(updateUIIDBaseSettingUI);
    });

    function onDBFilterTextBoxChanged() {
      gridOptions.api.setQuickFilter(document.getElementById('dbInputFilter').value);
    }

    function onLegacyDBFilterTextBoxChanged() {
      importLegacyDBGridOptions.api.setQuickFilter(document.getElementById('legacyDbInputFilter').value);
    }

    function removeSelectedDatabase() {
      const selectedData = gridOptions.api.getSelectedRows();
      displayDialog("LoadingModal");
      hideDialog('removeDatabaseModal');
      selectedData.forEach(dbRow => {
        $.ajax({ url: "/database/remove?dbname=" + dbRow.Name,
          success: (result) => {
            hideDialog("LoadingModal");
          },
          error: (err) => {
            displayErrorDialog(err.responseText || JSON.stringify(err));
          }
        });
      });
    }

    function activateDatabase() {
      const selectedData = gridOptions.api.getSelectedRows();
      if (selectedData.length > 0) {
        let dbName = selectedData[0].Name;
        displayDialog("LoadingModal");
        hideDialog("activateDatabaseModal");
        $.ajax({ url: "/database/activate?dbname=" + dbName,
          success: () => {
            hideDialog("LoadingModal");
            setSnapshotOptions();
            updateDbSummaryBar();
          },
          error: (err) => {
            displayErrorDialog(err.responseText || JSON.stringify(err));
          }
        });
      } else {
        displayWarningDialog("Please select a database to activate.");
      }
    }

    function refreshLevels() {
      fetch('/level/agdata')
        .then((response) => response.json())
        .then((data) => {
          updateLevelSelections(data);
          reloadImpliedSrcTable(data);

          let visible = "hidden";
          if (data[0].name != "VID") {
            document.getElementById('vidSupport').value = false;
            document.getElementById('vidSupport').disabled = true;
            visible = "visible";
          } else {
            document.getElementById('vidSupport').value = true;
            document.getElementById('vidSupport').disabled = false;
          }
          document.getElementById('vidSupportWarning').style.visibility = visible;
        });
    }

    function updateLevelSelections(levelData) {
      let levelSelectIds = ["#startMADIDestLevel", "#startDestLevel", "#startSrcLevel", "#startDirectSrcLevel"]
      levelSelectIds.forEach((selectId) => {
          removeAllOptions(selectId);
      });
      levelSelectIds.forEach((selectId) => {
          addSelectOptions(document.querySelector(selectId), levelData);
      });
    }

    function reloadImpliedSrcTable(rowData) {
      loadImpliedSrcSuffixData(rows => {
        let prepRows = prepImpliedSrcSuffixRows(rows);
        dbImpliedSrcSuffixGridConf.api.setRowData(prepRows);
      }, rowData);
    }

    function addSelectOptions(selectBox, levelData) {
      if (selectBox) {
        levelData.forEach((level) => {
          let option = new Option(level.name, level.id)
          selectBox.add(option, undefined)
          if (level.id == 2) {
            option.selected = true;
          }
        });
      }
    }

    function showAddDatabaseModal() {
      document.getElementById("dbname").value = "";
      displayDialog('addDatabaseModal');
    }

    function showImportDatabaseModal() {
      document.getElementById("myFile").value = "";
      document.getElementById("importDbName").value = "";
      displayDialog('importDatabaseModal');
    }

    function activateDatabaseCheck() {
      const selectedData = gridOptions.api.getSelectedRows();
      if (selectedData.length > 0) {
        $.ajax({
          url: "/database/dbdirty", success: (isDirty) => {
            if (isDirty) {
              document.getElementById("activateDatabaseText").innerHTML = "All pending changes for this database will be discarded.  Are you sure you want to continue?";
            } else {
              document.getElementById("activateDatabaseText").innerHTML = "Are you sure you want to activate the selected database?";
            }
            displayDialog("activateDatabaseModal");
          }
        });
      } else {
        displayWarningDialog("Please select a database to activate.");
      }
    }

    function removeDatabaseCheck() {
      const selectedData = gridOptions.api.getSelectedRows();
      if (selectedData.length > 0) {
        displayDialog("removeDatabaseModal");
      } else {
        displayWarningDialog("Please select a database to delete.");
      }
    }

    function editDatabase() {
      const selectedData = gridOptions.api.getSelectedRows();
      if (selectedData.length > 0) {
        let dbName = selectedData[0].Name;
        displayDialog("LoadingModal");
        $.ajax({ url: "/database/edit?dbname=" + dbName,
          success: () => {
            hideDialog("LoadingModal");
          },
          error: (err) => {
            displayErrorDialog(err.responseText || JSON.stringify(err));
          }
        });
      } else {
        displayWarningDialog("Please select a database to edit.");
      }
    }

    function duplicateDatabaseCheck() {
      const selectedData = gridOptions.api.getSelectedRows();
      if (selectedData.length > 0) {
        document.getElementById("copyDbName").value = selectedData[0].Name;
        $("#copy_disable_implied_src").prop("checked", false);
        displayDialog("duplicateDatabaseModal");
      } else {
        displayWarningDialog("Please select a database to duplicate.");
      }
    }

    function refreshImpliedSourcesRelatedFields(implied) {
      // Disable "breakaway sources" support when implied sources are enabled.
      document.getElementById("breakawaySupport").value = (!implied).toString();
      ["breakawaySupport", "sdiAudioAdd", "madiAudioAdd"].forEach(id => {
        document.getElementById(id).disabled = implied;
      });

      // Show/Hide "Implied Sources" tab.
      let displayValue = implied ? "" : "none";
      document.getElementById("db_implied_src_button").style.display = displayValue;
      document.getElementById("db_implied_src_content").style.display = displayValue;
      document.getElementById("db_implied_src_separator").style.display = displayValue;
      if (!implied) {
        document.getElementById("DBConfigButton").click(); // Show default tab.
      }
    }

    function onCellValueChanged(event) {//TODO DB name updates
      if (event.colDef.field == "Autosave") {
        $.ajax({ url: "/database/autosave?value="+event.newValue,
            success: () => {}
        });
      }
    }

    function onDBMode() {
      $.ajax({
        url: "/database/dbdirty", success: (isDirty) => {
          if (isDirty) {
            displayDialog("changeModeModal");
            return;
          }
          onChangeMode();
        }
      });
    }

    function cancelChangeMode() {
      document.getElementById('dbmodecancelapply').checked = true;
      hideDialog("changeModeModal");
    }

    function onChangeMode() {
      let modes = document.getElementsByName('dbmode');
      let modeVal;
      for(let i = 0; i < modes.length; i++){
        if(modes[i].checked){
          modeVal = modes[i].value;
        }
      }
      console.log("onDBMode - selected:", modeVal);
      displayDialog("LoadingModal");
      $.ajax({
        url: "/database/setmode?dbmode=" + modeVal,
          success: () => {
            hideDialog("LoadingModal");
          }
      });
    }

    function onChangeConfiguration(key) {//TODO DB name updates
        const urlParameters = [
            "key=" + key,
            "value=" + document.getElementById(key).checked
        ];
        $.ajax({
          url: "/configuration/update?" + urlParameters.join("&"),
            success: () => {}
        });
    }

    function onSelectionChanged(event) {
      const selectedData = gridOptions.api.getSelectedRows();
      selectedData.forEach(dbRow => {
        const dbActive = dbRow.Status === "active";
        const visValue = dbActive ? "visible" : "hidden";
        $("#DBBuilder").css("visibility", {{ if .DBBuilderAvailable }} visValue {{ else }} "hidden" {{ end }});
        $("#DBBuilderButton").css("visibility", {{ if .DBBuilderAvailable }} visValue {{ else }} "hidden" {{ end }});
        $("#DBBuilderButtonSeparator").css("visibility", {{ if .DBBuilderAvailable }} visValue {{ else }} "hidden" {{ end }});
        $("#DBConfig").css("visibility", visValue);
        $("#DBConfigButton").css("visibility", visValue);
        $("#DBConfigButtonSeparator").css("visibility", visValue);
        $("#db_implied_src_content").css("visibility", visValue);
        $("#db_implied_src_button").css("visibility", visValue);
        $("#db_implied_src_separator").css("visibility", visValue);

        if (dbActive) {
          disableUiButton("activate");
          disableUiButton("delete");
          disableUiButton("activateMenu");
          disableUiButton("deleteMenu");

          fetch('/device/agdata')
            .then((response) => response.json())
            .then((data) => {
              let filteredDevs = filterDeviceList(data);
              deviceGridOptions.api.setRowData(filteredDevs);
              deviceGridOptions.api.forEachNode((node) => {
                if (node.rowIndex == 0) {
                  node.setSelected(true, true);
                }
              });
            });
          fetch('/snapshot/agdata')
            .then((response) => response.json())
            .then((data) => {
              snapshotsGridOptions.api.setRowData(data);
              snapshotsGridOptions.api.forEachNode((node) => {
                if (node.rowIndex == 0) {
                  node.setSelected(true, true);
                }});    
            });
          $.ajax({url: "/database/getmode", success: (mode) => {
              broadcastDbMode(mode);
          }});
        } else {
          enableUiButton("activate");
          enableUiButton("delete");
          enableUiButton("activateMenu");
          enableUiButton("deleteMenu");
          document.getElementById("cancelbtn").style.visibility = 'hidden';
          document.getElementById("savebtn").style.visibility = 'hidden';
          document.getElementById("protectText").style.visibility = 'hidden';
          document.getElementById("DBConfigButton").click();
          $("body").removeClass("db-cancel-apply-border");
          $("body").removeClass("db-protected-border");
        }
      });
    }

    function addWSDBListener() {
      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 SNAPSHOT_TABLE:
            console.log("SNAPSHOT_TABLE update")
            fetch('/snapshot/agdata')
              .then((response) => response.json())
              .then((data) => {
                snapshotsGridOptions.api.setRowData(data);
                snapshotsGridOptions.api.forEachNode((node) => {
                  if (node.rowIndex == 0) {
                    node.setSelected(true, true);
                  }});
              });
            break;
          case DATABASE_TABLE:
            let firstSelectedAvailableNodeIndex = getFirstSelectedNodeIndex(gridOptions);
            fetch('/database/agdata')
              .then((response) => response.json())
              .then((data) => {
                gridOptions.api.setRowData(data);
                if (msg.operation === INSERT_OP) {
                  gridOptions.api.forEachNode((node) => {
                    if (node.data.Name === msg.dbName) {
                      node.setSelected(true, true);
                    }
                  });
                } else {
                  if (data) {
                    setNodeSelected(gridOptions, firstSelectedAvailableNodeIndex);
                  } else {
                    NoneDeviceSelected();
                  }
                }
                getConfiguration('tallyEnable');
                getConfiguration('snapshotInterval');
                getConfiguration(IMPLIED_SRC_CONF_KEY);

                refreshLevels();
                updateDbSummaryBar();
              });
            break;
          case LEVEL_TABLE:
            refreshLevels();
            break;
          case DEVICE_TABLE:
            fetch('/device/agdata')
              .then((response) => response.json())
              .then((data) => {
                deviceGridOptions.api.setRowData(filterDeviceList(data));
                updateBuildButtonState();
              });
            break;
          case CONFIGURATION_TABLE:
            getConfiguration("tallyEnable");
            getConfiguration(IMPLIED_SRC_CONF_KEY);
            getConfiguration('snapshotInterval');
            break;
          case UIID_BASE_NUMBER:
            getUIIDBaseSetting(updateUIIDBaseSettingUI);
            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 getConfiguration(key) {
      $.ajax({
        url: "/configuration?key=" + key,
          success: (result) => {
          if (result) {
            var uiElement = document.getElementById(result.key) // FIXME: Linking server object ids with GUI field ids is error prone and bad practice.
            if (uiElement) {
              if (uiElement.type === "checkbox") {
                uiElement.checked = (result.value === "true");
              } else if (uiElement.type === "text") {
                uiElement.value = result.value;
              }
            }

            // Need explicit refresh because the code above does not trigger a change event.
            if (key === IMPLIED_SRC_CONF_KEY) {
              refreshImpliedSourcesRelatedFields(result.value === "true");
            } else if (key === 'snapshotInterval') {
              setSnapshotOptions();
            }
          }
        }
      });
    }

    function setSnapshotOptions() {
      $.ajax({
        url: "/configuration?key=" + 'snapshotInterval',
          success: (result) => {
          if (result) {
              document.getElementById("intervalSelect").value = result.value    
          }
        }
      });
    }

    function importDatabase(dbname) {
      const file = document.getElementById("myFile").files[0]
      const formData = new FormData();
      formData.append("myFile", file);
      formData.append("dbname", dbname);
      const httpRequest = new XMLHttpRequest();
      httpRequest.open('POST', '/database/import');
      httpRequest.send(formData);
      httpRequest.onreadystatechange = () => {
        if (httpRequest.readyState === 4 && httpRequest.status === 500) {
          displayErrorDialog(httpRequest.responseText);
        } else if (httpRequest.readyState === 4 && httpRequest.status === 200) {
          if (httpRequest.responseText) {
            let result = JSON.parse(httpRequest.responseText);
            if (result.hasOwnProperty('devices')) {
              console.log(JSON.parse(httpRequest.responseText));
              document.getElementById("importLegacyDeviceApplyButton").onclick = importDatabaseWithDevices;
              showImportDeviceModal(result)
            }
          } else {
            displayInfoDialogAfterLoading("Database " + dbname + " imported.");
          }
        }
      }
      displayDialog("LoadingModal");
      hideDialog("importDatabaseModal");
    }

    function importDatabaseWithDevices(){
      displayProgressBar("Import legacy database", "preparing...", function(guid) {
        const file = document.getElementById("myFile").files[0];
        const dbname = document.getElementById("importDbName").value;
        const formData = new FormData();
        formData.append("myFile", file);
        formData.append("dbname", dbname);
        formData.append("devices", JSON.stringify(getDeviceConnections()));
        formData.append("guid", guid);
        const httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = () => {
          if (httpRequest.readyState === 4) {
            if (httpRequest.status === 500) {
              displayErrorDialog(httpRequest.responseText);
            } else if (httpRequest.status === 200) {
              displayInfoDialogAfterLoading("Legacy database " + dbname + " is converted.");
            } else if (httpRequest.status === 299) {
              displayWarningDialog(httpRequest.responseText);
            }
          }
        };
        hideDialog("importLegacyDeviceModal");
        httpRequest.open('POST', '/database/importwithdevices');
        httpRequest.send(formData);
      });
    }

    function updateLegacyDeviceWarning() {
      let emptyDeviceNames = [];
      let warningPrefix = "All devices that have I/Os must be paired to an existing connection. ";
      let warningSuffix = " not been paired to any connection. You can still change the device connection after import. Are you sure you want to continue?";
      importLegacyDeviceGridOptions.api.forEachNode((node) => {
        if (node.data.connection === "") {
          emptyDeviceNames.push(node.data.name);
        }
      });
      let warningDiv = document.getElementById("confirmImportLegacyDeviceMessage");
      if (emptyDeviceNames.length > 0) {
        let deviceNameString = '';
        for (let i=0; i<emptyDeviceNames.length; i++) {
          deviceNameString += '"' + emptyDeviceNames[i] + '"';
          if (emptyDeviceNames.length > 1 && i<emptyDeviceNames.length - 1) {
            deviceNameString += ", ";
          }
        }
        warningSuffix = (emptyDeviceNames.length > 1) ? " have" + warningSuffix : " has" + warningSuffix;
        let warningText = warningPrefix + deviceNameString + warningSuffix;
        warningDiv.innerHTML = "<i class='icon-alarm-warning' style='float:left'></i><p><b>" + "Warning: " + "</b>" + warningText + "</p>";
      } else {
        warningDiv.innerHTML = "";
      }
    }

    function getDeviceConnections() {
      let deviceConnections = [];
      importLegacyDeviceGridOptions.api.forEachNode((node) => {
        deviceConnections.push(node.data);
      });
      deviceConnections.forEach((device) => {
        let splitConnection = device.connection.split(" | ");
        if (splitConnection.length > 0) {
          device.connection = device.connection.split(" | ")[0];
        } else {
          device.connection = "";
        }
      })
      return deviceConnections;
    }

    function copySelectedDatabase(newDbName) {
      displayDialog("LoadingModal");
      const selectedData = gridOptions.api.getSelectedRows();
      if (selectedData.length > 0) {
        let disableImplied = $("#copy_disable_implied_src").prop("checked");
        const urlParameters = [
            "dbname=" + selectedData[0].Name,
            "copyname=" + encodeURIComponent(newDbName),
            "disableImplied=" + disableImplied
        ];
        $.ajax({
          url: "/database/duplicate?" + urlParameters.join("&"),
          success: () => {
            hideDialog('duplicateDatabaseModal');
            hideDialog("LoadingModal");
          },
          error: (err) => {
            displayErrorDialog(err.responseText || JSON.stringify(err));
          }
        });
      }
    }

    function addDatabase(dbName) {
      displayProgressBar("Creating new database", "Sending initial data...", function(guid) {
        let impliedSrcCheckBox = document.getElementById('dbImpliedSrc');
        let impliedSrc = impliedSrcCheckBox && impliedSrcCheckBox.checked;

        let autoGenerateCheckBox = document.getElementById('dbAutoGenerate');
        let autoGenerate = autoGenerateCheckBox && autoGenerateCheckBox.checked;

        const urlParameters = [
          "dbname=" + encodeURIComponent(dbName),
          "autoImpliedSrc=" + impliedSrc,
          "autoGenerate=" + autoGenerate,
          getProgressBarURLParameter(guid),
        ];
        hideDialog('addDatabaseModal');
        $.ajax({ url: "/database/add?" + urlParameters.join("&"),
          error: (err) => {
            displayErrorDialog(err.responseText || JSON.stringify(err));
          }
        });
      });
    }

    function exportDatabaseCheck() {
      const selectedData = gridOptions.api.getSelectedRows();
      if (selectedData.length > 0) {
        document.getElementById('filename').value = selectedData[0].Name
        displayDialog('exportDatabaseModal');
      } else {
        displayWarningDialog("Please select a database to export.");
      }
    }

    function restoreSnapshotCheck() {
      const selectedData = snapshotsGridOptions.api.getSelectedRows();
      if (selectedData.length > 0) {
        displayDialog('restoreSnapshotsDatabaseModal');
      } else {
        displayWarningDialog("Please select a database to restore.");
      }
    }

    function changeSnapshotIntervalCheck() {
      document.getElementById('snapshotIntervalValue').value = document.getElementById('intervalSelect').value;
      displayDialog('changeSnapshotIntervalModal'); 
    }

    function exportDatabase(filename, dbToExport) {
      hideDialog('exportDatabaseModal');
      let allPlatforms = false;
      let allPlatformsCheckBox = document.getElementById('allPlatforms')
      if (allPlatformsCheckBox) {
        allPlatforms = allPlatformsCheckBox.checked;
      }
      const urlParameters = [
          "dbname=" + dbToExport,
          "filename=" + filename,
          "allplatforms=" + allPlatforms
      ];
      downloadFile("/database/export?" + urlParameters.join("&"), true);
    }

    function downloadSnapshotsDatabase(filename) {
      hideDialog('exportSnapshotsDatabaseModal');
      const urlParameters = [
          "dbname=" + snapshotsGridOptions.api.getSelectedRows()[0].Name,
          "filename=" + filename
      ];
      downloadFile("/database/export?" + urlParameters.join("&"), true);
    }

    function createSnapshot() {
      displayDialog("LoadingModal");
      $.ajax({ url: "/snapshot/create",
        success: (result) => {
          hideDialog("LoadingModal");
          if (result.msgType === "warning") {
            displayWarningDialog(result.msg);
          }
        },
        error: (err) => {
          displayErrorDialog(err.responseText || JSON.stringify(err));
        }});
    }

    function restoreSnapshot() {
      hideDialog('restoreSnapshotsDatabaseModal');
      displayDialog("LoadingModal");
      $.ajax({ url: "/snapshot/restore?snapshot=" + snapshotsGridOptions.api.getSelectedRows()[0].Name,
        success: () => {
          hideDialog("LoadingModal");
        },
        error: (err) => {
          displayErrorDialog(err.responseText || JSON.stringify(err));
        }
      });
    }

    function changeSnapshotInterval() {
      hideDialog('changeSnapshotIntervalModal')
      displayDialog("LoadingModal");
      $.ajax({ url: "/snapshot/updateInterval?interval=" + document.getElementById('intervalSelect').value,
        success: () => {
          hideDialog("LoadingModal");
        },
        error: (err) => {
          displayErrorDialog(err.responseText || JSON.stringify(err));
        }
      });
    }

    function showImportLegacyDBModal() {
      updateLegacyDb();
      displayDialog("importLegacyDBModal");
    }

    function deleteLegacyDBCheck() {
      const selectedData = importLegacyDBGridOptions.api.getSelectedRows();
      if (selectedData.length === 0) {
        displayWarningDialog("Please select a database to delete.");
      } else {
        displayDialog("confirmDeleteLegacyDBModal");
      }
    }

    function deleteLegacyDatabase() {
      hideDialog('confirmDeleteLegacyDBModal');
      const selectedData = importLegacyDBGridOptions.api.getSelectedRows();
      $.ajax({ url: "/database/legacy/remove?deleteDB=" + selectedData[0].Name,
        success: () => {
          updateLegacyDb();
        },
        error: (err) => {
          displayErrorDialog(err.responseText || JSON.stringify(err));
        }
      });
    }

    function importLegacyDB() {
      const selectedData = importLegacyDBGridOptions.api.getSelectedRows();
      if (selectedData.length === 0) {
        displayWarningDialog("Please select a database to import.");
        return
      }
      const dbName = selectedData[0].Name;
      displayDialog("LoadingModal");
      $.ajax({ url: "/database/legacy/import?importDB=" + dbName,
        success: (result) => {
          hideDialog("LoadingModal");
          let data = result;
          if (data.hasOwnProperty('devices')) {
            document.getElementById("importLegacyDeviceApplyButton").onclick = function() { importLegacyDBFromDevice(dbName); };
            showImportDeviceModal(data);
          }
        },
        error: (err) => {
          displayErrorDialog(err.responseText || JSON.stringify(err));
        }
      });
    }

    function importLegacyDBFromDevice(dbName) {
      displayProgressBar("Import legacy database", "preparing...", function(guid) {
        const urlParameters = [
          "importDB=" + dbName,
          "devices=" + JSON.stringify(getDeviceConnections()),
          getProgressBarURLParameter(guid),
        ];
        hideDialog("importLegacyDeviceModal");
        $.ajax({
          url: "/database/legacy/importFromDevice?" + urlParameters.join("&"),
          success: () => {
            displayInfoDialogAfterLoading("Legacy database " + dbName + " is converted.");
          },
          error: (err) => {
            if (err.status === 299) {
              displayWarningDialog(err.responseText || JSON.stringify(err));
            } else {
              displayErrorDialog(err.responseText || JSON.stringify(err));
            }
          }
        });
      });
    }

    function showImportDeviceModal(previewData) {
      hideDialog("LoadingModal");
      displayDialog("importLegacyDeviceModal");
      importLegacyDeviceGridOptions.api.setRowData(previewData.devices);
      let columnDef = importLegacyDeviceGridOptions.api.getColumnDefs();
      let options = [];
      columnDef.forEach(column => {
        if (column.field === "connection") {
          options.push("");
          previewData.connections.forEach((connection) => {
            options.push(connection.Name + " | " + connection.Type + " | " + connection.Info);
          })
          column.cellEditorParams.values = options;
          importLegacyDeviceGridOptions.api.setColumnDefs(columnDef);
        }
      });
      previewData.devices.forEach((device) => {
        options.forEach((option) => {
          if (device.connection !== "" && option.includes(device.connection)) {
            device.connection = option;
          }
        })
      });
      importLegacyDeviceGridOptions.api.setRowData(previewData.devices);
    }

    function updateLegacyDb() {
      fetch('/database/legacydb')
        .then((response) => response.json())
        .then((data) => {
          if (data.length === 0) {
            document.getElementById("legacyDbSpan").style.display = "none";
            document.getElementById("legacyDbSpanMenu").style.display = "none";
          } else {
            document.getElementById("legacyDbSpan").style.display = "";
            document.getElementById("legacyDbSpanMenu").style.display = "";
            importLegacyDBGridOptions.api.setRowData(data);
          }
        });
    }

    function setUIIDBaseSetting(value) {
        if ((value == 0) || (value == 1)) {
            $.ajax({
                url: "/uiidBase/set?value=" + value,
                error: (err) => {
                  displayErrorDialog(err.responseText || JSON.stringify(err));
                }
            });
        } else {
            displayWarningDialog("Invalid UIID base (" + value + ") number.");
        }
    }

    function updateUIIDBaseSettingUI(newUIIDBaseNumber) {
      switch (newUIIDBaseNumber) {
            case 0:
                $('#uiid_zero_base').prop("checked", true);
                break;
            case 1:
                $('#uiid_one_base').prop("checked", true);
                break;
            default:
                displayWarningDialog("Invalid UIID base (" + newUIIDBaseNumber + ") number.");
                return;
        }
    }

  </script>

<!-- Add DB modal -->
<div class="modal" id="addDatabaseModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
  aria-labelledby="addDeviceModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="addDatabaseModalTitle"><i class="icon-add icon-white"></i>Add Database</span>
        <span class="btn btn-transparent" onclick="hideDialog('addDatabaseModal');"><i class="icon-close-header"></i></span>
      </div>
        <div class="modal-body">
          <table class="container-data">
            <!-- Database add -->
            <tr class="row-data">
              <td class="col-data-label col-data-label-60">Name:</td>
              <td class="col-data-input"><input tabindex="0" class="form-control rounded-0 name-size" name="dbname" id="dbname" required></td>
            </tr>
            {{ if .ImpliedSourceAvailable}}
            <tr class="row-data">
              <td class="col-data-label col-data-label-db-add">Auto-Configure Audio:</td>
              <td class="col-data-input"><input class="form-check-input" type="checkbox" value="" name="dbImpliedSrc" id="dbImpliedSrc"></td>
            </tr>
            {{ end }}
            {{ if .AutoGenerate}}
            <tr class="row-data">
              <td class="col-data-label col-data-label-db-add">Default configuration</td>
              <td class="col-data-input"><input class="form-check-input" type="checkbox" checked value="" name="dbAutoGenerate" id="dbAutoGenerate"></td>
            </tr>
            {{ end }}
          </table>
          <div class="modal-footer justify-content-between">
            <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('addDatabaseModal');">Cancel</button>
            <button class="btn btn-text" tabindex="1" onclick="addDatabase(dbname.value)">Apply</button>
          </div>
        </div>
    </div>
  </div>
</div>

<!--Activate database confirmation modal-->
<div class="modal" id="activateDatabaseModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
  aria-labelledby="activateDatabaseModalLabel" 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="activateDatabaseModalLabel"><i class="icon-activate icon-white"></i>Confirm Activate Database</span>
        <span class="btn btn-transparent" onclick="hideDialog('activateDatabaseModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <p class="container-data" id="activateDatabaseText">
          Are you sure you want to activate the selected database?
        </p>
      </div>
      <div class="modal-footer justify-content-between">
        <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('activateDatabaseModal');">Cancel</button>
        <button tabindex="0" onclick="activateDatabase()" class="btn btn-text">Apply</button>
      </div>
    </div>
  </div>
</div>

<!--Change mode confirmation modal-->
<div class="modal" id="changeModeModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="changeModeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="changeModeModalLabel"><i class="icon-alarm-info icon-white"></i>Operation Mode</span>
        <span class="btn btn-transparent" onclick="cancelChangeMode()"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <p class="container-data">
          All pending changes for this database will be discarded.  Are you sure you want to continue?
        </p>
      </div>
      <div class="modal-footer justify-content-between">
        <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="cancelChangeMode()">Cancel</button>
        <button tabindex="0" onclick="onChangeMode();hideDialog('changeModeModal');" class="btn btn-text">Apply</button>
      </div>
    </div>
  </div>
</div>

<!--Remove database confirmation modal-->
<div class="modal" id="removeDatabaseModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="removeDatabaseModalLabel" 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="removeDatabaseModalLabel"><i class="icon-delete icon-white"></i>Confirm Delete Database</span>
        <span class="btn btn-transparent" onclick="hideDialog('removeDatabaseModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <p class="container-data">Are you sure you want to delete the selected database?</p>
      </div>
      <div class="modal-footer justify-content-between">
        <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('removeDatabaseModal');">Cancel</button>
        <button tabindex="0" onclick="removeSelectedDatabase()" class="btn btn-text">Apply</button>
      </div>
    </div>
  </div>
</div>

<!-- Import DB  modal-->
<div class="modal" id="importDatabaseModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
  aria-labelledby="importDeviceModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-import-db-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="importDatabaseModalTitle"><i class="icon-import icon-white"></i>Import Database</span>
        <span class="btn btn-transparent" onclick="hideDialog('importDatabaseModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <div class="container-data">
          <!-- Database import -->
          <div class="row-data">
            <input type="file" tabindex="0" name="myFile" id="myFile" required />
          </div>
          <table class="row-data">
            <tr>
              <td class="col-data-label"> Database Name:</td>
              <td class="col-data-input"><input tabindex="1" class="form-control rounded-0 name-size" name="importDbName" id="importDbName" required></td>
            </tr>
          </table>
          <div class="row-data">
            <br/>
            <p>
              Note that it might take up to several minutes for the imported database to be available.
            </p>
          </div>
          <div class="row-data"></div>
        </div>
        <div class="modal-footer justify-content-between">
          <button class="btn btn-text btn-outline-secondary" tabindex="3" onclick="hideDialog('importDatabaseModal');">Cancel</button>
          <button class="btn btn-text" type="submit" tabindex="2" onclick="importDatabase(importDbName.value)" >Apply</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- duplicate DB modal -->
<div class="modal" id="duplicateDatabaseModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="duplicateDatabaseModal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="duplicateDatabaseModalLabel"><i class="icon-duplicate icon-white"></i>Duplicate Database</span>
        <span class="btn btn-transparent" onclick="hideDialog('duplicateDatabaseModal');"><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 col-data-label-60"> Name:</td>
              <td class="col-data-input"><input tabindex="0" class="form-control rounded-0 name-size" name="copyDbName" id="copyDbName" required></td>
            </tr>
            {{ if .ImpliedSourceAvailable}}
            <tr class="row-data">
              <td class="col-data-label col-data-label-db-copy"> Disable Auto-Configured Audio Sources:</td>
              <td class="col-data-input"><input tabindex="0" class="form-check-input" type="checkbox" value="" name="copy_disable_implied_src" id="copy_disable_implied_src" required></td>
            </tr>
            {{ end }}
          </table>
        </div>
        <div class="modal-footer justify-content-between">
          <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('duplicateDatabaseModal');">Cancel</button>
          <button class="btn btn-text" type="submit" tabindex="1" onclick="copySelectedDatabase(copyDbName.value)">Apply</button>
        </div>
    </div>
  </div>
</div>

<!-- Export DB modal-->
<div class="modal" id="exportDatabaseModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="exportDatabaseModal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="exportDatabaseModalTitle"><i class="icon-export icon-white"></i>Export Database</span>
        <span class="btn btn-transparent" onclick="hideDialog('exportDatabaseModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <table class="container-data">
      <!-- Database export -->
          <tr class="row-data">
            <td class="col-data-label"> Save As:</td>
            <td class="col-data-input"><input tabindex="0" class="form-control rounded-0 name-size" name="filename" id="filename" required></td>
          </tr>
          {{ if .AllPlatforms}}
          <tr class="row-data">
            <td class="col-data-label" for="allPlatforms">&nbsp;&nbsp;All Platforms:</td>
            <td class="col-data-input"><input class="form-check-input" type="checkbox" id="allPlatforms"></td>
          </tr>
          <tr class="row-data">
            <td colspan="2">Note that enabling the All Platforms option might take longer to complete.</td>
          </tr>
          {{ end }}
        </table>
        <div class="modal-footer justify-content-between">
          <button class="btn btn-text btn-outline-secondary"  tabindex="2" onclick="hideDialog('exportDatabaseModal');">Cancel</button>
          <div id="exportDatabaseButton">
            <button class="btn btn-text" type="submit" tabindex="1" onclick="exportDatabase(filename.value, gridOptions.api.getSelectedRows()[0].Name)" >Apply</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Restore Snapshots DB modal-->
<div class="modal" id="restoreSnapshotsDatabaseModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="restoreSnapshotsDatabaseModal" 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="restoreSnapshotsDatabaseModalTitle"><i class="icon-restore icon-white"></i> Confirm Restore Snapshot</span>
        <span class="btn btn-transparent" onclick="hideDialog('restoreSnapshotsDatabaseModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <p class="container-data-snapshots-text" >
          All current changes will be lost. Are you sure you want to continue?
        </p>
        <div class="modal-footer justify-content-between">
          <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('restoreSnapshotsDatabaseModal');">Cancel</button>
          <button class="btn btn-text" type="submit" tabindex="0" onclick="restoreSnapshot()" >Apply</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Export Snapshots DB modal-->
<div class="modal" id="exportSnapshotsDatabaseModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="importDeviceModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="exportSnapshotsDatabaseModalTitle"><i class="icon-export icon-white"></i>Export Snapshot</span>
        <span class="btn btn-transparent" onclick="hideDialog('exportSnapshotsDatabaseModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <table class="container-data">
          <!-- Snapshot export -->
          <tr class="row-data">
            <td class="col-data-label"> Save As:</td>
            <td class="col-data-input"><input tabindex="0" class="form-control rounded-0 name-size" name="filenameSnapshot" id="filenameSnapshot" required></td>
          </tr>
        </table>
        <div class="modal-footer justify-content-between">
          <button class="btn btn-text btn-outline-secondary"  tabindex="2" onclick="hideDialog('exportSnapshotsDatabaseModal');">Cancel</button>
          <button class="btn btn-text" type="submit" tabindex="1" onclick="downloadSnapshotsDatabase(filenameSnapshot.value)" >Apply</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Change Snapshot Interval modal-->
<div class="modal" id="changeSnapshotIntervalModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="changeSnapshotIntervalModal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="changeSnapshotIntervalModalTitle">Change Snapshot Interval</span>
        <span class="btn btn-transparent" onclick="setSnapshotOptions();hideDialog('changeSnapshotIntervalModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <p class="container-data-snapshots-text">
          When a change in the database occurs, an automatic snapshot will be taken every
          <input class="read-only-text" type="text" id="snapshotIntervalValue" readonly>
        </p>
        <div class="modal-footer justify-content-between">
          <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="setSnapshotOptions();hideDialog('changeSnapshotIntervalModal');">Cancel</button>
          <button class="btn btn-text" type="submit" tabindex="0" onclick="changeSnapshotInterval()">Apply</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="importLegacyDBModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="importLegacyDBModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="importLegacyDBModalTitle"><i class="icon-database icon-white"></i>Legacy Database</span>
        <span class="btn btn-transparent" onclick="hideDialog('importLegacyDBModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <div class="container-data modal-import-legacy-db-size">

          <nav class="navbar navbar-expand-1240">
            <span class=" btn btn-nav-icon-text navbar-toggler" role="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
              <i class="icon-menu"></i>Menu
            </span>
            <div class="collapse navbar-collapse" id="legacyNavbarToggler">
              <ul class="navbar-nav me-auto mb-lg-0">
                <li class="nav-item dropdown">
                  <button onclick="" class="btn btn-nav-icon" id="legacyMenuButton" 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="menuLegacyImage"></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="deleteLegacyDBCheck()" id="deleteLegacyMenuButton" ><i class="icon-btn-nav-menu icon-delete" ></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="importLegacyDB()" id="importLegacyMenuButton"><i class="icon-convert-db icon-btn-nav-menu"></i>Convert</button>
                    </li>
                    <li><hr class="dropdown-item-divider" /></li>
                  </ul>
                </li>
                <li>
                  <span><i class="icon-separator"></i></span>
                </li>
                <li>
                  <button class="btn btn-nav-icon" onclick="deleteLegacyDBCheck()" id="deleteLegacyButton" data-toggle="tooltip" data-placement="bottom" title="Delete"><i class="icon-btn icon-delete"></i></button>
                </li>
                <li>
                  <span class="btn btn-nav-icon" onclick="importLegacyDB()" id="importLegacyButton" data-toggle="tooltip" data-placement="bottom" title="Convert"><i class="icon-btn icon-convert-db"></i></span>
                </li>
              </ul>
              <form class="d-flex">
                <input class="form-control rounded-0" type="search" placeholder="Filter ..." aria-label="Filter" id="legacyDbInputFilter" oninput="onLegacyDBFilterTextBoxChanged()">
                <span><i class="icon-filter"></i></span>
              </form>
            </div>
          </nav>
          <div class="grid-wrapper" >
            <div id="importLegacyDBGrid" style="height: 250px;" class="ag-theme-balham-dark"></div>
          </div>
          <div class="row-data">
            <br/>
            <p>
              Note that database conversion will take several minutes to complete.
            </p>
          </div>
        </div>
      </div>
      <div class="modal-footer justify-content-between">
        <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('importLegacyDBModal');">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="importLegacyDeviceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="importLegacyDeviceModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-import-legacy-device-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="importLegacyDeviceModalTitle"><i class="icon-database icon-white"></i>Legacy Database</span>
        <span class="btn btn-transparent" onclick="hideDialog('importLegacyDeviceModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <div class="container-data" id="confirmImportLegacyDeviceInstructions">
          <p>Please confirm the device connection pairing below.</p>
        </div>
        <div class="container-data modal-import-legacy-device-size">
          <div class="grid-wrapper" style="height: 100%; width: 100%;">
            <div id="importLegacyDeviceGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
          </div>
        </div>
          <div class="container-data" id="confirmImportLegacyDeviceMessage">
          </div>
      </div>
      <div class="modal-footer justify-content-between">
        <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('importLegacyDeviceModal');">Cancel</button>
        <button class="btn btn-text" tabindex="0" id="importLegacyDeviceApplyButton" onclick="importDatabaseWithDevices()">Apply</button>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="confirmDeleteLegacyDBModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="confirmDeleteLegacyDBModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="confirmDeleteLegacyDBModalLabel"><i class="icon-database icon-white"></i>Legacy Database</span>
        <span class="btn btn-transparent" onclick="hideDialog('confirmDeleteLegacyDBModalLabel');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <p class="container-data content-margin" id="confirmLegacyDBMessage">
          Once the database is deleted, it will no longer be available after downgrade. Are you sure you want to continue?
        </p>
      </div>
      <div class="modal-footer justify-content-between">
        <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('confirmDeleteLegacyDBModal');">Cancel</button>
        <button class="btn btn-text" tabindex="0" onclick="deleteLegacyDatabase()">Apply</button>
      </div>
    </div>
  </div>
</div>

{{ template "progressbar" . }}

{{ end }}