{{ define "destinationAliases" }}
<link href="/static/css/pages/alias.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="matrixMenuButton" 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="matrixMenuImage"></i></button>
                <ul class="dropdown-menu dropdown-menu-nav">
                    <li><hr class="dropdown-item-divider" /></li>
                    <li class="dropdown-item dropdown-item-nav">
                        <button onclick="selectAllAliases();" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="destinationAliasSelectMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-select-rows-disabled" id="destinationAliasSelectMenuImg"></i>Select All</button>
                    </li>
                    <li><div class="dropdown-item-divider"></div></li>
                    <li class="dropdown-item dropdown-item-nav">
                        <button onclick="deselectAllAliases();" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="destinationAliasDeselectMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-deselect-rows-disabled" id="destinationAliasDeselectMenuImg"></i>Deselect All</button>
                    </li>
                    <li><div class="dropdown-item-divider"></div></li>
                    <li class="dropdown-item dropdown-item-nav">
                        <button onclick="showRenameAliasesPreview();" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="destinationAliasRenameMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-rename-disabled" id="destinationAliasRenameMenuImg"></i>Rename</button>
                    </li>
                    <li><div class="dropdown-item-divider"></div></li>
                    <li class="dropdown-item dropdown-item-nav">
                        <button onclick="displayConfirmationDialog('Are you sure you would like to clear the selected aliases?', 'Apply', 'clearSelectedAliases();', 'Confirm Clear Aliases', 'icon-clear icon-white')" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="destinationAliasClearMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-clear-disabled" id="destinationAliasClearMenuImg"></i>Clear</button>
                    </li>
                    <li><div class="dropdown-section-divider"></div></li>
                    <li class="dropdown-item dropdown-item-nav">
                        <button onclick="showImportAliasModal()" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="destinationAliasImportMenuButton"><i class="icon-btn-nav-menu icon-plain icon-import" id="destinationAliasImportMenuImg"></i>Import</button>
                    </li>
                    <li><div class="dropdown-item-divider"></div></li>
                    <li class="dropdown-item dropdown-item-nav">
                        <button onclick="showExportAliasModal()" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="destinationAliasExportMenuButton"><i class="icon-btn-nav-menu icon-plain icon-export" id="destinationAliasExportMenuImg"></i>Export</button>
                    </li>
                    <li><hr class="dropdown-item-divider" /></li>
                </ul>
            </li>
            <li>
                <span><i class="icon-separator"></i></span>
            </li>
            <li>
                <button onclick="selectAllAliases();" class="btn btn-nav-icon" id="destinationAliasSelectButton" data-toggle="tooltip" data-placement="bottom" title="Select All"><i class="icon-btn icon-select-rows" id="destinationAliasSelectImg"></i></button>
            </li>
            <li>
                <button onclick="deselectAllAliases();" class="btn btn-nav-icon" id="destinationAliasDeselectButton" data-toggle="tooltip" data-placement="bottom" title="Deselect All"><i class="icon-btn icon-deselect-rows" id="destinationAliasDeselectImg"></i></button>
            </li>
            <li>
                <button onclick="showRenameAliasesPreview();" class="btn btn-nav-icon" id="destinationAliasRenameButton" data-toggle="tooltip" data-placement="bottom" title="Rename"><i class="icon-btn icon-rename" id="destinationAliasRenameImg"></i></button>
            </li>
            <li>
                <button onclick="displayConfirmationDialog('Are you sure you would like to clear the selected aliases?', 'Apply', 'clearSelectedAliases();', 'Confirm Clear Aliases', 'icon-clear icon-white');" class="btn btn-nav-icon" id="destinationAliasClearButton" data-toggle="tooltip" data-placement="bottom" title="Clear"><i class="icon-btn icon-clear" id="destinationAliasClearImg"></i></button>
            </li>
            <li>
                <span><i class="icon-separator"></i></span>
            </li>
            <li>
                <button onclick="showImportAliasModal();" class="btn btn-nav-icon" id="destinationAliasImportButton" data-toggle="tooltip" data-placement="bottom" title="Import"><i class="icon-btn icon-import" id="destinationAliasImportImg"></i></button>
            </li>
            <li>
                <button onclick="showExportAliasModal();" class="btn btn-nav-icon" id="destinationAliasExportButton" data-toggle="tooltip" data-placement="bottom" title="Export"><i class="icon-btn icon-export" id="destinationAliasExportImg"></i></button>
            </li>
        </ul>

    </div>
</nav>

<div class="grid-wrapper-alias" id="destinationaliaseditortable" style="height: 100%;">
    <div id="destinationAliasGrid" style="height: 100%" class="ag-theme-balham-dark" onfocusout="sessionStorage.removeItem(sessionKeys.LAST_TABLE);"></div>
</div>

<script type="text/javascript" charset="utf-8">
    const destinationAliasGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: false,
            flex: 1,
        },
        columnDefs: aliasColumnDefs,
        suppressMenuHide: true,
        headerHeight: 36,
        rowHeight: 31,
        onCellValueChanged: logicalEndAliasChange,
        stopEditingWhenCellsLoseFocus: true,
        rowSelection: 'multiple',
        onSelectionChanged: updateAliasButtonToolbar,
        onCellClicked: () => {
            sessionStorage.setItem(sessionKeys.LAST_TABLE, aliasTypeNames.get(aliasTypes.DESTINATION));
        }
    };
</script>

{{ end }}