<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AMP - Application Management Panel</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="cleartype" content="on" />
    <meta name="description" content="AMP - Application Management Panel" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="application-name" content="AMP" />
    <meta name="theme-color" content="#222222" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="AMP" />
    <!-- Preload critical assets -->
    <link rel="preload" as="style" href="/CSS/Stylesheet.css?v=2.6.4.0">
    <link rel="preload" as="style" href="/theme?v=2.6.4.0">
    <link rel="preload" href="/Fonts/MaterialSymbolsRounded.woff2" as="font" type="font/woff2" crossorigin>
    <!-- Preload critical scripts -->
    <link rel="preload" as="script" href="/Scripts/jquery-3.6.0.min.js">
    <link rel="preload" as="script" href="/Scripts/knockout-3.5.1.js">
    <link rel="preload" as="script" href="/Scripts/AMP.js?v=2.6.4.0">
    <!-- Preconnect to needed domains to save load time later -->
    <link rel="preconnect" href="https://gravatar.com" />
    <link rel="preconnect" href="https://cdn.cloudflare.steamstatic.com" />
    <!-- Normal resource links -->
    <link rel="apple-touch-icon-precomposed" sizes="256x256" href="/Images/AppIcon.png">
    <link rel="apple-touch-icon" href="/Images/AppIcon.png">
    <link type="text/css" href="/CSS/Stylesheet.css?v=2.6.4.0" rel="stylesheet" />
    <link type="text/css" href="/theme?v=2.6.4.0" rel="stylesheet" id="themeLink" />
    <link type="image/x-icon" rel="shortcut icon" href="/favicon.ico" />
    <link rel="icon" sizes="256x256" href="/Images/AppIcon.png" />
    <link rel="manifest" href="/manifest.json" />
</head>
<body>
    <div id="mainModal" class="modalbg">
        <div class="modalpanel">
            <img id="modalImage" />
            <h1 id="modaltitle"></h1>
            <div class="modalcontents">
                <p id="modalmessage"></p>
                <p id="modalsubtitle"></p>
                <input id="modalPromptInput" type="text" />
                <p id="relatedLinkArea"><span>Related Link:</span> <a href="" id="relatedLinkA" title="" target="_blank"></a></p>
                <div id="modalAdvanced">
                    <p>Advanced Details <span class="adHandle"></span></p>
                    <pre id="modalAdvancedText"></pre>
                </div>
            </div>
            <div class="modalbuttons">

            </div>
            <div class="loader" id="modalLoader"><div class="loader2" style="display:block;"><div class="loader2" style="display:block;"><div class="loader2" style="display:block;"></div></div></div></div>
        </div>
    </div>
    <div id="loginSplash" class="desktopOnly">
        <!--<d-topics-list discourse-url="https://discourse.cubecoders.com/" category="6" per-page="8"></d-topics-list>-->
        <iframe id="loginBrandContents"></iframe>
    </div>
    <div id="loginContainer">
        <div id="loginLogo">
            <!--<img src="/Images/10thAnniversary.png" alt="Welcome to AMP" />-->
            <img src="/Images/FullLogo256.webp" fetchpriority="high" alt="Welcome to AMP" />
            <div id="ADSLoginWaiting">Connecting to remote AMP instance...</div>
            <h2 id="loginWelcome">Welcome to AMP</h2>
            <div id="loginModuleInfo">
                <h4><span>For </span><span class="AppName"></span></h4>
                <h6><span>&copy;</span><span class="ModuleAuthor"></span></h6>
            </div>
        </div>
        <div role="form" id="loginForm">
            <div>
                <label>Username</label><br />
                <input type="text" name="username" />
            </div>
            <div>
                <label>Password</label><br />
                <input type="password" name="password" id="loginPasswordField" />
            </div>
            <div>
                <label class="checkbox">
                    <input type="checkbox" name="rememberme" checked="checked" />
                    <span></span>
                </label>
                <span style="margin-left: 8px;">Remember Me</span>
            </div>
            <button class="bgGreen" id="loginButton">Login</button>
            <button type="button" class="bgGreen secureLoginButton" id="secureLoginButton">
                <span>Passwordless Login</span>
            </button>
            <br /><br />
            <div class="well warning transparentAnim" id="loginFailure" style="margin: 0">
                <div style="margin: 0;">
                    <h3><span id="loginFailureReason" style="margin-bottom:0"></span></h3>
                    <p id="loginFailureDetails"></p>
                    <a href="about:blank" style="display:none" target="_blank" id="acocuntDisabledLinked">Contact Support</a>
                    <a href="https://discourse.cubecoders.com/docs?topic=14191?utm_source=amplogin" style="display:none" target="_blank" id="loginHelperLink">Why am I being rate limited?</a>
                    <a href="https://discourse.cubecoders.com/docs?topic=3349?utm_source=amplogin" style="display:block;margin-top:16px;" target="_blank" id="forgotLogin">Forgotten login details?</a>
                </div>
            </div>
        </div>
        <div class="loginBusy">
            <div class="loader" id="loginSpinner"><div class="loader2" style="display:block;"><div class="loader2" style="display:block;"><div class="loader2" style="display:block;"></div></div></div></div>
            <h3>Loading plugins<br />one moment please...</h3>
        </div>
    </div>
    <div id="barTop">
        <div id="responsiveHelpers">
            <img src="/Images/NavToggle.png" loading="lazy" id="navToggle" alt="Navigation" />
        </div>
        <div id="tabInfo">
            <h2 id="tabTitle">Status</h2>
            <h4 id="tabCaption"></h4>
        </div>
        <div id="topSearchBox" data-viewmodel="SearchAreaVM">
            <div class="icon icons_search"></div>
            <input type="search" role="search" aria-label="search" autocomplete="amp_off_9af765b1-21c0-4385-b1ea-383cefb5a33f" class="searchBox" title="Search" placeholder="Search..." data-bind="textInput: query" name="amp_search_9a7ef19d-eeb0-43c8-a706-f4333629f5db" spellcheck="false" />
        </div>
    </div>
    <div id="searchResults" data-viewmodel="SearchAreaVM" style="display:none;" data-bind="visible: resultsVisible">
        <div class="searchResultCategory" data-bind="visible: results().length == 0">
            <div class="searchResultCategoryInfo">
                <h3>No results for '<span data-bind="text: query"></span>'</h3>
                <p>Try using a simpler query with fewer search terms, or try the options below:</p>
            </div>
            <div class="searchCategoryItems">
                <div class="searchResult" data-bind="click: kbSearch">
                    <h3>Search Knowledge Base</h3>
                    <p>Click to search the knowledge base for '<span data-bind="text: query"></span>'</p>
                </div>
                <div class="searchResult" data-bind="click: supportSearch">
                    <h3>Search CubeCoders Support</h3>
                    <p>Click to check the official support board for posts about '<span data-bind="text: query"></span>'</p>
                </div>
            </div>
        </div>
        <!-- ko foreach: results -->
        <div class="searchResultCategory">
            <div class="searchResultCategoryInfo">
                <div class="mat-icon" data-bind="text: icon">settings</div>
                <h3 data-bind="text: name"></h3>
                <p data-bind="text: description"></p>
            </div>
            <div class="searchCategoryItems" data-bind="foreach: items">
                <div class="searchResult" data-bind="click: click, css: {'videoResult' : imageURI != null}">
                    <!-- ko if: imageURI != null -->
                    <img data-bind="attr: {src: imageURI}" loading="lazy" />
                    <!-- /ko -->
                    <h3 data-bind="text: title"></h3>
                    <p data-bind="text: description"></p>
                    <p class="source" data-bind="text: source"></p>
                </div>
            </div>
        </div>
        <!-- /ko -->
    </div>
    <div id="mainBody">
        <div id="releaseSpec"></div>
        <div id="mainBodyArea">
            <div class="bodyTab" id="tab_currentuser" data-viewmodel="UserInfoVM">
                <div class="settingsGroup">
                    <div class="groupBody">
                        <div class="userInfoBlock doubleWidth">
                            <img data-bind="attr: {src: imageSmallURI}" loading="lazy" alt="User Avatar" style="float: left; margin-right: 16px; border-radius: 8px;" />
                            <h2 data-bind="text: username"></h2>
                            <!-- ko if: isLDAPUser() -->
                            <h3>LDAP Authenticated User</h3>
                            <!-- /ko -->
                            <!-- ko if: isOIDCUser() -->
                            <h3>OIDC Authenticated User</h3>
                            <!-- /ko -->
                            <!-- ko if: !isOIDCUser() && !isLDAPUser() -->
                            <h3>AMP Authenticated User</h3>
                            <!-- /ko -->
                            <a href="https://gravatar.com/emails/" target="_new">Edit Profile Picture</a>
                        </div>
                        <div class="settingContainer">
                            <div class="settingLabel">Email Address</div>
                            <input type="email" data-bind="value: emailAddress" />
                            <div class="settingActionsList">
                                <button data-bind="click: updateDetails" class="slimButton slideIcon"><span>Save Changes</span><span class="mat-icon">save</span></button>
                            </div>
                        </div>

                        <h2 style="margin:0" class="doubleWidth">Multi-factor Authentication and Logins</h2>
                        <div class="settingContainer">
                            <div class="settingLabel">
                                <div>
                                    <span class="mat-icon" data-bind="text: isTwoFactor() ? 'check_circle' : 'warning'" style="float:right;"></span>
                                    <span>2FA is currently <span data-bind="text: (isTwoFactor() ? 'Enabled' : 'Disabled')" style="margin-right: 8px"></span></span>
                                    <p>Two-factor authentication helps prevent against attacks by requiring a secondary authentication source such as a one-time code.</p>
                                </div>
                            </div>
                            <div class="settingActionsList">
                                <button class="slimButton" data-bind="visible: !isTwoFactor(), click: enableTwoFactor">Setup 2FA</button>
                                <button data-bind="visible: isTwoFactor(), click: disableTwoFactor" class="slimButton bgRed slideIcon"><span>Disable 2FA</span><span class="mat-icon">key_off</span></button>
                            </div>
                        </div>

                        <!-- ko if: showWebauthnSetup -->
                        <div class="settingContainer">
                            <div class="settingLabel">
                                <div>Passwordless Login</div>
                                <div class="settingDescription">Passwordless login allows you to authenticate using your device, fingerprint, a security key, or any other Webauthn compatible security method.</div>
                            </div>

                            <div class="settingActionsList">
                                <button data-bind="click: setupWebauthn" class="slimButton bgGreen secureLoginButton"><span>Setup Passwordless Login</span></button>
                                <button data-bind="click: manageWebauthnTokens" class="slimButton"><span>Manage Tokens</span></button>
                            </div>
                        </div>
                        <!-- /ko -->
                        <!-- ko if: !showWebauthnSetup -->
                        <div class="well warning">
                            <span class="mat-icon">warning</span>
                            <div>
                                <h3>Passwordless logins not available</h3>
                                <p>You are not accessing AMP over HTTPS which is mandatory for passwordless logins.<br /><a href="https://discourse.cubecoders.com/docs?topic=2305" target="_blank">Support Article: Setting up secure HTTP (HTTPS) with AMP </a></p>
                            </div>
                        </div>
                        <!-- /ko -->

                        <div class="settingContainer doubleWidth">
                            <div class="settingLabel">
                                <div><span>RSA public key</span></div>
                                <div class="settingDescription">Specifying a public key allows you to log into AMPs SFTP using an RSA public key. This is mandatory when using Oauth2 login providers and recommended when using 2FA logins. Enter using ssh 'authorized keys' format.</div>
                            </div>
                            <input type="text" data-bind="value: newPubkey, valueUpdate: 'input'" placeholder="ssh-rsa QXJlIHlvdSBib3JlZCBvciBzb21ldGhpbmc/IHdoeSBhcmUgeW91IGxvb2tpbmcgYXQgdGhpcz8= user@example.org" />
                            <div class="settingActionsList">
                                <button data-bind="click: savePubKey" class="slimButton">Update Public Key</button>
                            </div>
                        </div>

                        <h2 class="doubleWidth" style="margin: 0">Actions</h2>

                        <!-- ko if: !isLDAPUser() && !isOIDCUser()-->
                        <div class="settingContainer">
                            <div class="settingLabel">Change Password</div>
                            <table class="twoColLine noZebra" style="margin: 0 -4px 0 -4px">
                                <tr>
                                    <td>Current Password</td>
                                    <td><input type="password" data-bind="value: oldPassword" required="required" /></td>
                                </tr>
                                <tr>
                                    <td>New Password</td>
                                    <td><input type="password" data-bind="value: newPassword, valueUpdate: 'input'" required="required" autocomplete="new-password" /></td>
                                </tr>
                                <tr>
                                    <td>Confirm Password</td>
                                    <td><input type="password" data-bind="value: confirmPassword" required="required" autocomplete="new-password" /></td>
                                </tr>
                                <tr>
                                    <td>Password Strength</td>
                                    <td><div class="passwordGrade" data-bind="css: passwordGradeClass(), style: {width: passwordGradeWidth()}, visible: newPassword() != ''"></div></td>
                                </tr>
                            </table>
                            <div class="settingActionsList">
                                <button class="slimButton" data-bind="click: changePassword">Change Password</button>
                            </div>
                        </div>
                        <!-- /ko -->

                        <div>
                            <button class="slimButton" data-bind="click: serviceLogin">Service Login</button>
                            <button class="slimButton bgRed slideIcon" data-bind="click: logout"><span>Logout</span><span class="mat-icon">logout</span></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bodyTab" id="tab_status">
                <div class="metricsHeader">
                    <h2>Metrics and Status</h2>
                    <div class="grow"></div>
                    <div id="AMP_Core_PrimaryTask" class="AppStatus" data-bind="'class': stateColorClass()">
                        <span data-bind="text: stateText"></span>
                        <span class="mat-icon" data-bind="text: stateIcon"></span>
                    </div>
                </div>
                <div id="AMP_Core_MetricsDisplay">
                    <!-- ko foreach: metrics -->
                    <div class="DisplayMetric" data-bind="style: {'border-color': color}, attr: {'data-metric': shortMetricName}">
                        <div class="DisplayMetricHeader" data-bind="style: { 'background-color': color, 'color': color3 }">
                            <div data-bind="text:name" style="font-weight:bold;"></div>
                            <div data-bind="text:displayValue"></div>
                            <div class="circleChart">
                                <svg>
                                    <g>
                                        <circle r="32" cx="48" cy="56"></circle>
                                        <circle r="32" cx="48" cy="56" class="value" data-bind="style:{ 'stroke-dashoffset': dashOffset() }"></circle>
                                    </g>
                                </svg>
                            </div>
                        </div>
                        <div class="DisplayMetricGraph" data-bind="attr: { id: elementId }"></div>
                    </div>
                    <!-- /ko -->
                </div>
                <div id="statusActions">
                    <div>
                        <h2>Actions</h2>
                        <div class="buttonGroup" id="AMP_Core_ServerStatus" style="width: auto; float: none;">
                            <button class="bgGreen slideIcon" data-module="Core" data-method="Start" data-showstates="0,80,100" data-permission="Core.AppManagement.StartApplication"><span>Start</span><span class="mat-icon">play_arrow</span></button>
                            <button class="bgGreen slideIcon" data-module="Core" data-method="Start" data-showstates="50" data-permission="Core.AppManagement.StartApplication"><span>Wake Up</span><span class="mat-icon">play_arrow</span></button>
                            <button class="bgAmber slideIcon" data-module="Core" data-method="UpdateApplication" data-showstates="0,80,100" data-permission="Core.AppManagement.UpdateApplication"><span>Update</span><span class="mat-icon">system_update_alt</span></button>
                            <button class="slideIcon" data-module="Core" data-method="Restart" data-showstates="20" data-permission="Core.AppManagement.RestartApplication"><span>Restart</span><span class="mat-icon">replay</span></button>
                            <button class="bgRed slideIcon" data-module="Core" data-method="Stop" data-showstates="20,50" data-permission="Core.AppManagement.StopApplication"><span>Stop</span><span class="mat-icon">stop</span></button>
                            <button class="bgAmber slideIcon" data-module="Core" data-method="Sleep" data-showstates="20" id="sleepButton" data-permission="Core.AppManagement.StopApplication"><span>Sleep</span><span class="mat-icon">pause</span></button>
                            <button class="bgRed slideIcon" data-module="Core" data-method="Kill" data-showstates="30,40" data-permission="Core.AppManagement.StopApplication"><span>Kill</span><span class="mat-icon">warning</span></button>
                            <button class="bgRed slideIcon" data-module="Core" data-method="Kill" data-showstates="10,70" data-permission="Core.AppManagement.StopApplication"><span>Abort</span><span class="mat-icon">error</span></button>
                            <button class="slideIcon bgGreen" id="helpButton" data-permission="Core.Special.Diagnostics" data-bind="click: openTicket"><span>Assistance</span><span class="mat-icon">support</span></button>
                        </div>
                    </div>
                    <div data-viewmodel="DiagnosticsVM">
                        <h2>Connection Info</h2>
                        <div class="listenPort">
                            <span>Primary Endpoint</span>
                            <span><span data-bind="text:primaryEndpoint()"></span> <a href="javascript:void" style="text-decoration:none;" title="Copy to Clipboard" data-bind="click: copyPrimaryEndpointToClipboard, visible: canCopyToClipboard">🔗</a></span>
                        </div>
                        <div class="listenPort" data-bind="if: primaryEndpointURL() != ''">
                            <span>Connection Link</span>
                            <span><a data-bind="attr: {href: primaryEndpointURL()}, text: primaryEndpointURL()"></a></span>
                        </div>
                        <!-- ko foreach: extraServerInfo -->
                        <div class="listenPort">
                            <span data-bind="text: key"></span>
                            <span data-bind="text: value"></span>
                        </div>
                        <!-- /ko -->
                    </div>
                    <div data-viewmodel="DiagnosticsVM" style="min-width: 45%">
                        <h2>Network Port Status</h2>
                        <div id="AMP_Core_Ports">
                            <div data-bind="foreach: ports">
                                <div class="listenPort">
                                    <span class="AppStatus" data-bind="'class': ListeningColor()">
                                        <span data-bind="text: Caption"></span>
                                        <span class="mat-icon" data-bind="text: Icon"></span>
                                    </span>
                                    <span data-bind="text: Name"></span>
                                    <span data-bind="text: Port"></span>
                                    <span data-bind="text: ProtocolName"></span>
                                </div>
                            </div>
                            <div data-bind="if: ports().length == 0">
                                <div class="listenPort">
                                    <span><span class="appStateIcon" style="background-color: orange">&nbsp;</span></span>
                                    <span>No port information available.</span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bodyTab noOverflowTab noPaddingTab" id="tab_console">
                <div class="consoleHeader">
                    <div class="iconButtonGroup" id="AMP_Core_ConsoleButtons">
                        <button class="bgGreen iconButton" data-module="Core" data-method="Start" data-showstates="0,100" data-permission="Core.AppManagement.StartApplication"><span class="mat-icon">play_arrow</span></button>
                        <button class="bgGreen iconButton" data-module="Core" data-method="Start" data-showstates="50" data-permission="Core.AppManagement.StartApplication"><span class="mat-icon">play_arrow</span></button>
                        <button class="bgAmber iconButton" data-module="Core" data-method="UpdateApplication" data-showstates="0,100" data-permission="Core.AppManagement.UpdateApplication"><span></span><span class="mat-icon">system_update_alt</span></button>
                        <button class="iconButton" data-module="Core" data-method="Restart" data-showstates="20" data-permission="Core.AppManagement.RestartApplication"><span class="mat-icon">replay</span></button>
                        <button class="bgRed iconButton" data-module="Core" data-method="Stop" data-showstates="20,50" data-permission="Core.AppManagement.StopApplication"><span class="mat-icon">stop</span></button>
                        <button class="bgAmber iconButton" data-module="Core" data-method="Sleep" data-showstates="20" id="sleepButton" data-permission="Core.AppManagement.StopApplication"><span class="mat-icon">pause</span></button>
                        <button class="bgRed iconButton" data-module="Core" data-method="Kill" data-showstates="30,40" data-permission="Core.AppManagement.StopApplication"><span class="mat-icon">warning</span></button>
                        <button class="bgRed iconButton" data-module="Core" data-method="Kill" data-showstates="10,70" data-permission="Core.AppManagement.StopApplication"><span class="mat-icon">error</span></button>
                    </div>
                    <div class="grow"></div>
                    <div id="AMP_Core_ConsoleStatus" class="AppStatus" data-bind="'class': stateColorClass()">
                        <span data-bind="text: stateText"></span>
                        <span class="mat-icon" data-bind="text: stateIcon"></span>
                    </div>
                </div>
                <div id="consoleContainer" data-viewmodel="UserListVM">
                    <div id="consoleUsers" data-bind="foreach: users">
                        <div class="consoleUserEntry" data-bind="text: name, style: {color: userColor}, click: click, attr: {'data-name': name, 'data-id': id}"></div>
                    </div>
                    <div id="consoleArea">

                    </div>
                    <div id="consoleLine">
                        <input id="consoleLineEntry" type="text" autocomplete="off" spellcheck="false" />
                    </div>
                </div>
            </div>

            <div id="tab_settings" class="bodyTab noRounded" data-viewmodel="SettingsVM">
                <div class="tabHeaderContainer" data-bind="foreach: currentCategory()?.subcategories, visible: currentCategory()?.subcategories().length > 1 ">
                    <div class="button tabHeader" data-bind="css: {active:active}, click: click">
                        <span class="mat-icon" data-bind="text: icon"></span><span data-bind="text: displayName"></span>
                    </div>
                </div>

                <!-- ko foreach: categories -->
                <!-- ko if: currentSubcategory() != null && currentSubcategory().settings().length > 0 -->
                <div class="settingsGroup" data-bind="attr: {id: tabName()}">
                    <div class="groupBody" data-bind="template: {name: 'settingEditorTemplate', foreach: currentSubcategory()?.settings}"></div>
                </div>
                <!-- /ko -->
                <!-- /ko -->
            </div>

            <script id="settingEditorTemplate" type="text/html">
                <div class="settingContainer" data-bind="visible: visible, css: { highlighted : isHighlighted, 'warning': hasWarning, doubleWidth: doubleWidth }, element: el">
                    <!-- ko if: settingType.startsWith("List<") -->
                    <button class="slimButton listEditButton" data-bind="click: addValue, disable: bulkEditMode()"><span class="mat-icon">add</span></button>
                    <button class="slimButton listEditButton" data-bind="click: removeValue, disable: bulkEditMode()"><span class="mat-icon">delete</span></button>
                    <button class="slimButton listEditButton" data-bind="click: moveValueDown, disable: bulkEditMode()"><span class="mat-icon">move_up</span></button>
                    <button class="slimButton listEditButton" data-bind="click: moveValueUp, disable: bulkEditMode()"><span class="mat-icon">move_down</span></button>
                    <button class="slimButton listEditButton" data-bind="click: bulkEdit, visible: !bulkEditMode()"><span class="mat-icon">edit</span></button>
                    <button class="slimButton listEditButton" data-bind="click: bulkEdit, visible: bulkEditMode()"><span class="mat-icon">save</span></button>
                    <!-- /ko -->
                    <div class="settingLabel" data-bind="style: { position: (!settingType.startsWith('List<') && !settingType.startsWith('Dictionary<')) ? 'relative' : 'unset'}, css: {'provisionSpec': provisionSpec }">
                        <!-- ko if: settingType == "Boolean" -->
                        <label class="checkbox">
                            <input type="checkbox" data-bind="checked: value" />
                            <span></span>
                        </label>
                        <!-- /ko -->
                        <div><span data-bind="text: name"></span></div>
                        <!-- ko if: description != "" -->
                        <div class="settingDescription" data-bind="text: description"></div>
                        <!-- /ko -->
                        <!-- ko if: settingType == "Enum" && inputType() != "Radio" -->
                        <select data-bind="options: enumValues, value: value, optionsText: 'name', optionsValue: 'value', disable: isReadOnly()"></select>
                        <!-- /ko -->
                        <!-- ko if: settingType == "Combo" -->
                        <input type="text" data-bind="value: value, attr: { 'list' : 'list_' + node }, event: {dblclick: clearValue}, disable: isReadOnly()" />
                        <datalist data-bind="attr: {id:'list_' + node}, foreach: enumValues">
                            <option data-bind="val: value, text: name"></option>
                        </datalist>
                        <!-- /ko -->
                        <!-- ko if: inputType() == "Radio" -->
                        <div data-bind="foreach: enumValues" class="radioList">
                            <label data-bind="css: {selected: $parent.value == value}"><input type="radio" data-bind="checked: $parent.value, uniqueName: false, attr: {name: 'list_' + $parent.node, value: value}, disable: isReadOnly" /><span data-bind="text: name"></span></label>
                        </div>
                        <!-- /ko -->
                        <!-- ko if: inputType() == "Textarea" -->
                        <textarea data-bind="textInput: value, disabled: isReadOnly()"></textarea>
                        <!-- /ko -->
                        <!-- ko if: settingType.startsWith("List<") -->
                        <!-- ko if: !bulkEditMode() -->
                        <select multiple="multiple" data-bind="options: value, value: selectedValue, valueAllowUnset: true, disabled: isReadOnly()"></select>
                        <!-- /ko -->
                        <!-- ko if: bulkEditMode() -->
                        <textarea data-bind="textInput: bulkValue, disabled: isReadOnly()"></textarea>
                        <!-- /ko -->
                        <!-- /ko -->
                        <!-- ko if: settingType.startsWith("Dictionary<") -->
                        <table>
                            <thead>
                                <tr>
                                    <th data-bind="text: attributes?.KeyName ?? 'Key'"></th>
                                    <th data-bind="text: attributes?.ValueName ?? 'Value'"></th>
                                    <!-- ko if: isReadOnly() === false -->
                                    <th>
                                        <button class="slimButton listEditButton solo" data-bind="click: bulkEdit, visible: !bulkEditMode()"><span class="mat-icon">edit</span></button>
                                        <button class="slimButton listEditButton solo" data-bind="click: bulkEdit, visible: bulkEditMode()"><span class="mat-icon">save</span></button>
                                    </th>
                                    <!-- /ko -->
                                </tr>
                            </thead>
                            <tbody data-bind="foreach: value">
                                <tr>
                                    <!-- ko if: $parent.isReadOnly() || !$parent.bulkEditMode() -->
                                    <td data-bind="text: Key"></td>
                                    <td data-bind="text: Value"></td>
                                    <!-- /ko -->
                                    <!-- ko if: $parent.bulkEditMode() -->
                                    <td><input type="text" data-bind="value: Key" /></td>
                                    <td><input type="text" data-bind="value: Value" /></td>
                                    <!-- /ko -->
                                    <!-- ko if: $parent.isReadOnly() === false -->
                                    <td>
                                        <button class="slimButton listEditButton solo" data-bind="click: $parent.removeKVP"><span class="mat-icon">delete</span></button>
                                    </td>
                                    <!-- /ko -->
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td><input type="text" data-bind="value: newKVPkey, attr: {placeholder: attributes?.KeyPlaceholder ?? 'Key'}" /></td>
                                    <td><input type="text" data-bind="value: newKVPvalue, attr: {placeholder: attributes?.ValuePlaceholder ?? 'Value'}" /></td>
                                    <!-- ko if: isReadOnly() === false -->
                                    <td><button class="slimButton listEditButton solo" data-bind="click: addKVP"><span class="mat-icon">add</span></button></td>
                                    <!-- /ko -->
                                </tr>
                            </tfoot>
                        </table>
                        <!-- /ko -->
                        <!-- ko if: settingType == "Uri" -->
                        <input type="url" data-bind="value: value, disable: isReadOnly(), attr: {'placeholder' : placeholder, 'maxlength': maxLength}" />
                        <!-- /ko -->
                        <!-- ko if: inputType() == "RandomPassword" -->
                        <button class="slimButton slideIcon" style="margin-bottom:16px" data-bind="click: generateRandomPassword"><span>Generate Password</span></button> <button class="slimButton bgRed slideIcon" data-bind="click: clearPassword"><span>Clear Password</span><span class="mat-icon">delete</span></button>
                        <!-- /ko -->
                        <!-- ko if: inputType() == "UserPassword" -->
                        <input type="password" minlength="12" data-bind="attr: {'placeholder' : placeholder, 'maxlength': maxLength}, textInput: pwInput, disable: isReadOnly()" />
                        <div class="passwordGrade" data-bind="css: passwordGradeClass, style: { width : (passwordGrade() * 14.28) + '%', display: 'block', 'margin-top': '16px' }, visible: showPwGrade"></div>
                        <div class="settingActionsList">
                            <button class="slimButton slideIcon" style="margin-bottom:16px" data-bind="click: generateRandomPassword"><span>Generate Password</span><span class="mat-icon">edit</span></button>
                            <button class="slimButton slideIcon" style="margin-bottom:16px" data-bind="click: updatePassword"><span>Save Password</span><span class="mat-icon">edit</span></button>
                        </div>
                        <!-- /ko -->
                        <!-- ko if: inputType() == "number" -->
                        <input type="number" inputmode="number" pattern="[0-9]*" data-bind="attr: {'placeholder' : placeholder, 'min': minValue, 'max': maxValue, 'maxlength': maxLength}, value: value, disable: isReadOnly()" />
                        <!-- /ko -->
                        <!-- ko if: (settingType == "String" || inputType() == "range") && inputType() != "number" && inputType() != "Textarea" && inputType() != "RandomPassword" && inputType() != "UserPassword" -->
                        <input data-bind="attr: {'type': inputType(), 'placeholder' : placeholder, 'min': minValue, 'max': maxValue, 'maxlength': maxLength}, value: value, disable: isReadOnly()" />
                        <!-- /ko -->
                        <!-- ko if: suffix != null && suffix != "" && (settingType == "String" || inputType() == "range" || inputType() == "number") -->
                        <span class="inputFieldSuffix" data-bind="text: suffix"></span>
                        <!-- /ko -->
                        <div data-bind="foreach: actions" class="settingActionsList">
                            <button type="button" data-bind="text: caption, click: click"></button>
                        </div>
                        <!-- ko if: !settingType.startsWith("List<") && !settingType.startsWith("Dictionary<") -->
                        <div data-bind="fadeVisible: tooltipVisible, attr: {'class': tooltipClass}"><span data-bind="text: tooltipText"></span><span class="mat-icon" data-bind="text: tooltipIcon"></span><!--<img src="/Images/settingWait.gif" alt="Updating..." data-bind="visible: updating" />--></div>
                        <!-- /ko -->
                        <span data-bind="visible: showNodes, text: node" class="permNodeDescription"></span>
                    </div>
                    <!-- ko if: provisionSpec === true -->
                    <div class="settingWarning">Managed by ADS. Select "Edit Ports" for this instance to modify.</div>
                    <!-- /ko -->
                    <!-- ko if: requiresRestart === true -->
                    <div class="settingInfo">Instance Restart Required <span class="mat-icon">replay</span></div>
                    <!-- /ko -->
                </div>
            </script>

            <div class="bodyTab" id="tab_schedule" data-viewmodel="ScheduleVM">
                <!-- ko if: populatedTriggers().length === 0 -->
                <h1>No Schedule Set</h1>
                <p style="margin-bottom:48px">Create a new trigger to make tasks run at a given interval or in response to an event.</p>
                <!-- /ko -->
                <div class="flexButtonGroup">
                    <button class="slideIcon bgGreen" data-bind="click: addNewTrigger"><span>Add New Trigger</span><span class="mat-icon">add_circle</span></button>
                </div>
                <div id="scheduleTriggersContainer">
                    <!-- ko foreach: populatedTriggers -->
                    <div class="scheduleTriggerInfo">
                        <div class="scheduleTriggerDescription">
                            <div class="scheduleTriggerHeaderItem grow">
                                <div class="scheduleHeader">Trigger</div>
                                <div class="scheduleTriggerDescriptionTitle">
                                    <span data-bind="text: Description"></span>
                                </div>
                            </div>
                            <!-- ko if: !Restricted() -->
                            <div class="scheduleTriggerHeaderItem" style="min-width: 72px">
                                <div class="scheduleHeader">Enabled</div>
                                <div class="ScheduleHeaderDescriptionTitle">
                                    <label class="checkbox">
                                        <input type="checkbox" data-bind="checked: EnabledToggle" />
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                            <!-- /ko -->
                            <div class="scheduleTriggerDescriptionVariables scheduleTriggerHeaderItem">
                                <div class="scheduleHeader">Emitted Values</div>
                                <div class="scheduleTriggerDescriptionVariables">
                                    <!-- ko if: (Emits().length === 0) -->
                                    <div class="scheduleTriggerVariable">(None)</div>
                                    <!-- /ko -->
                                    <!-- ko foreach: Emits -->
                                    <div class="scheduleTriggerVariable" data-bind="text: Name"></div>
                                    <!-- /ko -->
                                </div>
                            </div>
                            <div class="scheduleTriggerTaskDropper">
                                <div class="button iconButton" data-bind="click: RunNow" title="Run this trigger immediately"><span class="mat-icon">play_arrow</span></div>
                                <div class="button iconButton" data-bind="click: Edit, visible: IsEditable" title="Edit Trigger"><span class="mat-icon">edit</span></div>
                                <div class="button iconButton" data-bind="click: Delete" title="Delete Trigger"><span class="mat-icon">delete</span></div>
                            </div>
                        </div>
                        <div class="scheduleTriggerContents">
                            <!-- ko foreach: Tasks -->
                            <div class="scheduleTriggerTask">
                                <div class="scheduleTriggerTaskTitle">
                                    <span data-bind="text: FormattedDisplay() == '' ? Description : FormattedDisplay()"></span>
                                    <div class="scheduleTriggerTaskDropper">
                                        <!-- ko if: (ParameterMappings().length > 0) -->
                                        <div class="button iconButton" data-bind="click: Edit" title="Edit Task"><span class="mat-icon">edit</span></div>
                                        <!-- /ko -->
                                        <div class="button iconButton" data-bind="click: MoveUp" title="Move task up in list"><span class="mat-icon">move_up</span></div>
                                        <div class="button iconButton" data-bind="click: MoveDown" title="Move task down in list"><span class="mat-icon">move_down</span></div>
                                        <div class="button iconButton bgRed" data-bind="click: Delete" title="Delete Task"><span class="mat-icon">delete</span></div>
                                    </div>
                                </div>
                                <!-- ko if: (ParameterMappings().length > 0 && FormattedDisplay() == "") -->
                                <table class="TwoColLine">
                                    <tbody data-bind="foreach: ParameterMappings">
                                        <tr>
                                            <td data-bind="text: Param"></td>
                                            <td data-bind="text: displayValue()" class="parameterMapping"></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- /ko -->
                                <!-- ko if: LastExecuteError -->
                                <div class="well warning">
                                    <span class="mat-icon">warning</span>
                                    <div>
                                        <h3>This task failed the last time it ran:</h3>
                                        <p data-bind="text: LastErrorReason"></p>
                                    </div>
                                    <button class="bgRed slimButton" data-bind="click: DismissWarning">Dismiss</button>
                                </div>
                                <!-- /ko -->
                            </div>
                            <!-- /ko -->
                            <!-- ko if: (Tasks().length == 0) && !Restricted() -->
                            <div style="padding:16px">
                                <h2>No Tasks Added</h2>
                                <p style="margin-bottom:16px">Add a new task to this trigger to perform actions once this trigger is activated, such as taking a backup.</p>
                            </div>
                            <!-- /ko -->
                            <!-- ko if: Restricted() -->
                            <div style="padding:16px">
                                <h2 style="margin-top: 0;">Licence Upgrade Required</h2>
                                <h3>Webhook Recievers are available in AMP Professional, Advanced and Enterprise Editions</h3>
                                <p>You can upgrade at any time via your Licence account.</p>
                                <div class="flexButtonList">
                                    <a class="button bgGreen slimButton" href="https://cubecoders.com/account?utm_source=scheduleupgrade" target="_blank">&nbsp;Access your account&nbsp;</a>
                                </div>
                            </div>
                            <!-- /ko -->
                            <!-- ko if: !Restricted() -->
                            <div class="scheduleTriggerTask">
                                <button class="slideIcon slimButton bgGreen" data-bind="click: AddTask" title="Add New Task"><span>Add New Task</span><span class="mat-icon">add_circle</span></button>
                            </div>
                            <!-- /ko -->
                        </div>
                    </div>
                    <!-- /ko -->
                </div>
            </div>

            <div class="bodyTab noMobilePadding" id="tab_activesessions" data-viewmodel="SessionManagementVM">
                <table id="currentSessionsTable" class="rowSelect noMobileRadius">
                    <thead>
                        <tr>
                            <th>Username</th>
                            <th class="hiddenOnMobile">Logged in at</th>
                            <th>Last activity</th>
                            <th>IP Address</th>
                            <th>Device</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: sessions">
                        <tr data-bind="click: click, css: {selected: selected}">
                            <td data-bind="text: Username"></td>
                            <td class="hiddenOnMobile" data-bind="text: DisplayStartTime"></td>
                            <td data-bind="text: DisplayLastActivity"></td>
                            <td data-bind="text: Source"></td>
                            <td><div data-bind="attr: {'class' : SessionTypeIcon()}"></div></td>
                        </tr>
                    </tbody>
                </table>
                <br />
                <div class="buttonGroup" data-bind="visible: selectedSession() != null">
                    <!--<button>End Session</button>-->
                </div>
                <h3></h3>
            </div>

            <div class="bodyTab noPaddingTab" id="tab_usermanagement" data-viewmodel="AMPUserListVM">
                <div class="sideItemList hiddenOnMobile">
                    <button class="slideIcon slimButton" data-bind="click: createUser"><span>Create User</span><span class="mat-icon">person_add</span></button>

                    <div>
                        <div data-bind="foreach: users" class="itemList">
                            <div class="item" data-bind="click: click, css:{selected: selected}">
                                <img data-bind="attr:{src: gravatar}" loading="lazy" alt="Gravatar" />
                                <div>
                                    <span data-bind="text: username"></span>
                                    <span class="desc" data-bind="text: userShortDesc"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <select class="hiddenOnDesktop" data-bind="options: users, optionsText: 'username', value: currentUser, optionsCaption: 'Select a user...'">
                </select>

                <div class="sideItemData fullSizeOnMobile" style="margin-top:16px;">
                    <div class="settingsGroup">
                        <div class="groupBody">
                            <!-- ko with: editUser -->
                            <div class="userInfoBlock doubleWidth">
                                <img data-bind="attr: {src: GravatarImageUri}" loading="lazy" alt="User Avatar" style="float: left; margin-right: 16px; border-radius: 8px;" />
                                <h2 data-bind="text: Name"></h2>
                                <!-- ko if: IsLDAPUser() -->
                                <h3>LDAP Authenticated User</h3>
                                <!-- /ko -->
                                <!-- ko if: IsOIDCUser() -->
                                <h3>OIDC Authenticated User</h3>
                                <!-- /ko -->
                                <!-- ko if: !IsOIDCUser() && !IsLDAPUser() -->
                                <h3>AMP Authenticated User</h3>
                                <!-- /ko -->
                                <p>Last login: <span data-bind="text: LastLoginTimestamp"></span></p>
                            </div>

                            <div></div>

                            <h2 style="margin:0" class="doubleWidth">User Details</h2>

                            <div class="settingContainer">
                                <div class="settingLabel">Email Address</div>
                                <input type="email" data-bind="value: EmailAddress" />
                            </div>

                            <div class="settingContainer">
                                <div class="settingLabel">
                                    <label class="checkbox">
                                        <input type="checkbox" data-bind="checked: Disabled" />
                                        <span></span>
                                    </label>
                                    <div>Account Disabled / Pending</div>
                                    <div class="settingDescription">Disabled accounts cannot log in, but retain all their data.</div>
                                </div>
                            </div>

                            <!-- ko if: !IsLDAPUser() && !IsOIDCUser() -->
                            <div class="settingContainer">
                                <div class="settingLabel">
                                    <label class="checkbox">
                                        <input type="checkbox" data-bind="checked: PasswordExpires" />
                                        <span></span>
                                    </label>
                                    <div>Password Expires</div>
                                    <div class="settingDescription">If enabled, user passwords expire after 90 days and must be changed in order to log in again.</div>
                                </div>
                            </div>

                            <div class="settingContainer">
                                <div class="settingLabel">
                                    <label class="checkbox">
                                        <input type="checkbox" data-bind="checked: CannotChangePassword" />
                                        <span></span>
                                    </label>
                                    <div>Cannot Change Password</div>
                                    <div class="settingDescription">Prevents this user from being able to change their own password, but it can still be changed by an administrator. Useful for bots or service accounts.</div>
                                </div>
                            </div>

                            <div class="settingContainer">
                                <div class="settingLabel">
                                    <label class="checkbox">
                                        <input type="checkbox" data-bind="checked: MustChangePassword" />
                                        <span></span>
                                    </label>
                                    <div>Require Password Change</div>
                                    <div class="settingDescription">Mandates that the user change their password next time they log in. This flag is cleared automatically once the user has done this.</div>
                                </div>
                            </div>
                            <!-- /ko -->

                            <div class="doubleWidth">
                                <div class="settingActionsList">
                                    <button class="slimButton slideIcon" data-bind="click: saveChanges"><span>Save Changes</span><span class="mat-icon">save</span></button>
                                </div>
                            </div>

                            <h2 style="margin:0" class="doubleWidth">Security and Permissions</h2>
                            <!-- ko if: !IsLDAPUser() && !IsOIDCUser() -->
                            <div class="settingContainer">
                                <div class="settingLabel">Change Password</div>
                                <table class="twoColLine noZebra" style="margin: 0 -4px 0 -4px">
                                    <tr>
                                        <td>New Password</td>
                                        <td><input type="password" data-bind="value: Password, valueUpdate: 'input'" required="required" autocomplete="new-password" /></td>
                                    </tr>
                                    <tr>
                                        <td>Confirm Password</td>
                                        <td><input type="password" data-bind="value: Password2" required="required" autocomplete="new-password" /></td>
                                    </tr>
                                    <tr>
                                        <td>Password Strength</td>
                                        <td><div class="passwordGrade" data-bind="css: passwordGradeClass(), style: {width: passwordGradeWidth()}, visible: Password() != ''"></div></td>
                                    </tr>
                                </table>
                                <div class="settingActionsList">
                                    <button class="slimButton" data-bind="click: changePassword">Change Password</button>
                                </div>
                            </div>
                            <!-- /ko -->
                            <div class="settingContainer" data-bind="css: {'doubleWidth' : IsLDAPUser() || IsOIDCUser()}">
                                <div class="settingLabel">
                                    <div>Role Membership</div>
                                    <div class="settingDescription">Control which roles this user is a member of. Roles that deny permissions take precedence over those that allow.</div>
                                </div>
                                <div data-bind="foreach: RoleMembership" class="treeContainer">
                                    <div class="treeEntry treeItem noParent">
                                        <div class="treeItemText">
                                            <div class="treeName" data-bind="click: Toggle, text: Name"></div>
                                        </div>
                                        <label class="checkbox">
                                            <input type="checkbox" data-bind="click: Toggle, checked: IsMember() == true" />
                                            <span></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="settingActionsList">
                                    <button class="slimButton" data-bind="click: editPermissions">Edit User Permissions</button>
                                </div>
                            </div>
                            <h2 class="doubleWidth" style="margin: 0" data-bind="click: clickDanger">Danger Zone</h2>
                            <div class="settingContainer">
                                <div class="settingLabel">Delete User</div>
                                <p>This will permanently delete this user and all associated data.</p>
                                <!-- ko if: IsLDAPUser() -->
                                <p>If this user logs in again over LDAP, the user will be recreated. You should delete the user in your directory server before deleting it here.</p>
                                <!-- /ko -->
                                <!-- ko if: IsOIDCUser() -->
                                <p>If this user logs in again over OIDC, the user will be recreated. You should delete the user in your authentication provider before deleting it here.</p>
                                <!-- /ko -->
                                <button class="bgRed slideIcon" data-bind="click: deleteUser"><span>Delete User Forever</span><span class="mat-icon">delete_forever</span></button>
                            </div>
                            <!-- /ko -->
                            <p>&nbsp;<br /></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bodyTab noMobilePadding" id="tab_auditlog" data-viewmodel="AuditLogVM">
                <table id="auditLogTable" class="noMobileRadius">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Timestamp</th>
                            <th class="hiddenOnMobile">Source</th>
                            <th class="hiddenOnMobile">Category</th>
                            <th class="hiddenOnMobile">Message</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: entries">
                        <tr>
                            <td data-bind="text: User"></td>
                            <td data-bind="text: DisplayTime"></td>
                            <td class="hiddenOnMobile" data-bind="text: Source"></td>
                            <td class="hiddenOnMobile" data-bind="text: Category"></td>
                            <td class="hiddenOnMobile" data-bind="text: Message"></td>
                        </tr>
                        <tr class="noDesktopRow">
                            <td colspan="2" data-bind="text: `${Source} [${Category}]: ${Message}`"></td>
                        </tr>
                    </tbody>
                </table>
                <button class="bgGreen" data-bind="click:advance">More &gt;&gt;</button>
            </div>

            <div class="bodyTab noPaddingTab" id="tab_rolemanagement" data-viewmodel="PermissionManagementVM">
                <div class="sideItemList hiddenOnMobile">
                    <button class="slideIcon slimButton" data-bind="click: createRole"><span>Create Role</span><span class="mat-icon">group_add</span></button>
                    <button class="slideIcon slimButton" data-bind="click: createTemplateRole, visible: canCreateTemplates"><span>Create Template Role</span><span class="mat-icon">group_add</span></button>

                    <div>
                        <div data-bind="foreach: roles" class="itemList">
                            <div class="item" data-bind="click: Click, css:{selected: selected}">
                                <span class="mat-icon" data-bind="text: Icon()"></span>
                                <div>
                                    <span data-bind="text: Name"></span>
                                    <span class="desc" data-bind="text: DisplayRoleType()"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <select class="hiddenOnDesktop" data-bind="options: roles, optionsText: 'Name', value: currentRole, optionsCaption: 'Select a role...'">
                </select>

                <div class="sideItemData fullSizeOnMobile">
                    <!-- ko with: overrideRole() != null ? overrideRole : currentRole -->
                    <div class="permissionsHeader">
                        <h4>Permissions for <span data-bind="text: Name"></span></h4>
                        <p data-bind="text: Description"></p>
                    </div>
                    <div class="permissionDescriptions">
                        <!-- ko if: IsInstanceSpecific -->
                        <div>
                            <h4>Instance Specific</h4>
                            <p>This role is specific to this instance and is not visible to other instances</p>
                            <p class="description">Users created outside this instance can still be assigned this role</p>
                        </div>
                        <!-- /ko -->
                        <!-- ko if: !IsInstanceSpecific && !IsCommonRole -->
                        <div>
                            <h4>Global Role</h4>
                            <p>This role is visible in all instances, but has different permissions in each instance</p>
                            <p class="description">Edit this role from inside a single instance to change what effect it will have</p>
                        </div>
                        <!-- /ko -->
                        <!-- ko if: IsCommonRole -->
                        <div>
                            <h4>Template Role</h4>
                            <p>The permissions for this role are the same across all instances except ADS</p>
                            <p class="description">Changing permissions for this role will change it in all other instances except ADS which will continue to have separate permissions.</p>
                        </div>
                        <!-- /ko -->
                        <!-- ko if: DisableEdits -->
                        <div>
                            <h4>Read Only</h4>
                            <p>This role cannot be modified</p>
                            <p class="description">This role is managed by AMP and cannot be edited</p>
                        </div>
                        <!-- /ko -->
                    </div>
                    <!-- /ko -->
                    <script type="text/html" id="permissionNestedTemplate">
                        <div class="treeEntry treeItem" data-bind="css: {noParent : Parent == null}">
                            <div data-bind="css: {expanded : Expanded()}, click: Toggle, visible: CanExpand" class="treeExpando"></div>
                            <div class="treeItemText" data-bind="click: Toggle">
                                <div class="treeName">
                                    <span data-bind="text: DisplayName"></span>
                                </div>
                                <!-- ko if: Description != null -->
                                <div data-bind="text: Description" class="description"></div>
                                <!-- /ko -->
                            </div>
                            <span data-bind="foreach: NodeSegments" class="permNodeDescription"><span data-bind="text: $data"></span></span>
                            <label class="checkbox" data-bind="visible: Node != ''">
                                <input type="checkbox" class="redOff" data-bind="click: Click, checked: HasPermission() == true, attr: {indeterminate : HasPermission() == null}" />
                                <span></span>
                            </label>
                        </div>
                        <!-- ko if: Children().length > 0 -->
                        <div data-bind="css: { expanded : Expanded() }, style: { 'max-height': Expanded() ? Height() : 0 }, template: { name: 'permissionNestedTemplate', foreach: Children}" class="treeContents"></div>
                        <!-- /ko -->
                    </script>

                    <div data-bind="template: { name: 'permissionNestedTemplate', foreach: permissions}" id="rolePermissionsSelector" class="treeContainer"></div>
                    <hr style="margin: 16px -8px; color: #333;" />
                    <!--<h3>Members of <span data-bind="text: Name"></span></h3>-->
                    <!-- ko with: overrideRole() != null ? overrideRole : currentRole -->
                    <!-- ko if: !IsDefault && !IsHidden() && !DisableEdits -->
                    <h3>Delete Role</h3>
                    <p>This will permanently delete this role and any associated data</p>
                    <button class="bgRed slideIcon" data-bind="click: deleteRole"><span>Delete Role Forever</span><span class="mat-icon">delete_forever</span></button>
                    <!-- /ko -->
                    <!-- /ko -->
                    <p>&nbsp;<br /></p>
                    <button class="slideIcon hiddenOnDesktop" data-bind="click: createRole"><span>Create Role</span><span class="mat-icon">group_add</span></button>
                    <button class="slideIcon hiddenOnDesktop" data-bind="click: createTemplateRole, visible: canCreateTemplates"><span>Create Template Role</span><span class="mat-icon">group_add</span></button>
                </div>
            </div>

            <div class="bodyTab" id="tab_support" data-viewmodel="DiagnosticsVM">
                <a data-bind="visible: branded, attr: {href: brandURL}" style="float:right"><img style="max-height:256px" loading="lazy" data-bind="attr: {src: brandLogo, alt: brandName}" /></a>
                <h2>Get Support</h2>

                <!-- ko if: branded() -->
                <p>Server provided by <a data-bind="attr: {href: brandURL}, text: brandName"></a> | <a data-bind="attr: {href: supportUrl}">Support Home</a></p>
                <button data-bind="click: createTicket">Open a support ticket</button>
                <p data-bind="text: supportText()"></p>
                <!-- /ko -->
                <!-- ko if: !branded() -->
                <table style="width: 500px; max-width: 100%;">
                    <tr>
                        <td>Got a quick question?</td>
                        <td><button class="" data-bind="click: showDiscord">Join Discord Server</button></td>
                    </tr>
                    <tr style="background-color:transparent;">
                        <td>Check out documentation and articles</td>
                        <td><button class="" data-bind="click: showSupportBoard">Visit support board</button></td>
                    </tr>
                    <tr>
                        <td>Still need assistance?</td>
                        <td><button class="" data-bind="click: createTicket">Open a support ticket</button></td>
                    </tr>
                </table>
                <!-- /ko -->
                <h2>Updates</h2>
                <!-- ko if: !upgradePending() -->
                <p>Hooray! AMP is up-to-date.</p>
                <!-- /ko -->
                <p>Currently running version <span data-bind="text: installedVersion"></span> - <span data-bind="text: installedBuild"></span></p>
                <!-- ko if: upgradePending() && !upgradePatchOnly() -->
                <p>An AMP Update is Available: <span data-bind="text: upgradeVersion"></span> - <span data-bind="text: upgradeBuild"></span></p>
                <!-- /ko -->
                <!-- ko if: upgradePatchOnly() -->
                <p>A new patch is Available: <span data-bind="text: upgradeBuild"></span></p>
                <!-- /ko -->

                <button class="slimButton slideIcon" data-bind="click: showReleaseNotes"><span>View Release Notes</span><span class="mat-icon">contract</span></button>&nbsp;
                <button class="slimButton slideIcon" data-bind="click: upgradeAMP"><span>Upgrade this instance</span><span class="mat-icon">system_update_alt</span></button>

                <h2>Diagnostics</h2>
                <button class="slimButton slideIcon" data-bind="click: copyToClipboard"><span>Copy data to clipboard</span><span class="mat-icon">content_copy</span></button>
                <button class="slimButton slideIcon" data-bind="click: showReports, visible: !branded()"><span>View uploaded error reports</span><span class="mat-icon">pageview</span></button>
                <p> </p>
                <table id="diagTable">
                    <tbody data-bind="foreach: diaginfo">
                        <tr>
                            <td data-bind="text: key"></td>
                            <td data-bind="text: value"></td>
                        </tr>
                    </tbody>
                </table>
                <h2>Actions</h2>
                <button class="slimButton slideIcon bgRed" data-bind="click: restartAMP, visible: restartAvailable"><span>Restart this AMP instance</span><span class="mat-icon">replay</span></button>
            </div>

            <!-- Merlin tabs should go below here -->
            <div class="bodyTab wizardTab" id="tab_diagnostics_newTicket" data-viewmodel="DiagnosticsVM">
                <div class="wizardContents wizardPopup">
                    <!-- ko with: newTicket -->
                    <h2>Create new ticket <span data-bind="text: selectedCategory() == null ? '' : ' - ' + selectedCategory().title"></span></h2>
                    <button class="iconButton" data-bind="click: close"><span class="mat-icon">close</span></button>
                    <h2 class="warningHeader" data-bind="visible: showADSwarning()">You are creating a ticket for AMPs deployment system (ADS), if you are having a problem with a particular instance/game - manage that instance first and create a ticket from there. Do not use this for issues with a specific game.</h2>
                    <!-- ko if: selectedCategory() == null -->
                    <h3>Issue Category</h3>
                    <p>Which category best describes the problem you are having?</p>
                    <div class="radioButtonGrid" data-bind="foreach: availableCategories">
                        <label class="radioButtons">
                            <input type="radio" name="NewTicketCategory" data-bind="checked: $parent.selectedCategory, checkedValue: $data" />
                            <span>
                                <strong data-bind="text: title"></strong><br /><span data-bind="text: caption"></span>
                            </span>
                        </label>
                    </div>
                    <!-- /ko -->
                    <!-- ko if: selectedCategory() != null && selectedCategory().special == "conn" -->
                    <h3>Connectivity Problems</h3>
                    <p>Which of the following are best describes the issue?</p>
                    <div class="radioButtonGrid" data-bind="foreach: connectivityCategories">
                        <label class="radioButtons">
                            <input type="radio" name="NewTicketConnCategory" data-bind="checked: $parent.selectedSubcategory, checkedValue: $data" />
                            <span>
                                <strong data-bind="text: title"></strong><br /><span data-bind="text: caption"></span>
                            </span>
                        </label>
                    </div>
                    <!-- /ko -->
                    <!-- ko if: selectedCategory() != null -->
                    <p class="infoWell" data-bind="visible: selectedCategory()?.articleLink != null">You may find the following support article useful: <a data-bind="attr: {href: selectedCategory()?.articleLink}, text: selectedCategory()?.articleTitle" href="" target="_blank" class="plausible-event-name=ClickRelevantSupportArticle"></a></p>
                    <br />
                    <h3>Problem Description</h3>
                    <p style="margin-top:0">Please fill in all the fields below. <em>All responses must be in English.</em></p>
                    <!-- ko if: selectedCategory()?.isOther -->
                    <h4>Task</h4>
                    <p>In a few words, what is it that you're currently trying to do?</p>
                    <input type="text" placeholder="" data-bind="value: tryingToDo" />
                    <!-- /ko -->
                    <h4>Summary</h4>
                    <p>Briefly describe the issue in between 4 and 10 words (120 characters max)</p>
                    <input type="text" placeholder="It is not necessary to include the name of the application" data-bind="value: shortDescription" pattern="^(\s*\S+\s*){4,10}$" title="Please enter between 4 and 10 words, up to 120 characters" maxlength="120" />
                    <h4>Reproduction Steps</h4>
                    <p>What steps have you performed to get to your current situation? (Minimum 3 steps)</p>
                    <!-- ko foreach: steps -->
                    <ul>
                        <li><span data-bind="text: $data"></span> &nbsp;&nbsp;<button class="slimButton slideIcon listEditButton bgRed" data-bind="$parent.removeStep($data)"><span>Remove Step</span><span class="mat-icon">delete</span></button></li>
                    </ul>
                    <!-- /ko -->
                    <button class="slimButton slideIcon bgGreen" data-bind="click: addStep"><span>Add Step</span><span class="mat-icon">add_circle</span></button>
                    <h4>Detailed Description</h4>
                    <textarea data-bind="value: longProblemDescription, valueUpdate: 'input'"></textarea>
                    <!--<h4>Include Console Output</h4>
                    <p class="settingDescription">Includes the most recent 20 lines of log output.</p>
                    <label class="checkbox">
                        <input type="checkbox" data-bind="checked: includeConsoleOutput" />
                        <span></span>
                    </label>-->
                    <!-- /ko -->
                    <p> </p>
                    <button data-bind="click: close"><span>Cancel</span></button>
                    <button data-bind="click: clearCategory, visible: selectedCategory() != null"><span>Back</span></button>
                    <button data-bind="enable: isValid, click: createTicket, visible: selectedCategory() != null" class="bgGreen"><span>Create Ticket</span></button>
                    <!-- /ko -->
                </div>
            </div>

            <div class="bodyTab wizardTab" id="tab_userinfo_tokens" data-viewmodel="UserInfoVM">
                <div class="wizardContents wizardPopup">
                    <h2>Authentication Tokens</h2>
                    <button class="iconButton" data-bind="click: closeWebauthnManage"><span class="mat-icon">close</span></button>
                    <table>
                        <thead>
                            <tr>
                                <th>Last Used</th>
                                <th>Description</th>
                                <th class="hiddenOnMobile">Created</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach: webauthnCredentials">
                            <tr>
                                <td data-bind="text: _displayLastUsedUTC"></td>
                                <td data-bind="text: Description"></td>
                                <td class="hiddenOnMobile" data-bind="text: _displayCreatedUTC"></td>
                                <td>
                                    <button class="slimButton slideIcon bgRed" data-bind="click: _revoke"><span>Revoke</span><span class="mat-icon">key_off</span></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <p> </p>
                    <button data-bind="click: closeWebauthnManage"><span>Close</span></button>
                    <button data-bind="click: setupWebauthn" class="bgGreen secureLoginButton"><span>Add new token</span></button>
                </div>
            </div>

            <div class="bodyTab wizardTab" id="tab_console_userinfo">
                <div class="wizardContents wizardPopup">
                    <h2>User Information</h2>
                    <button class="iconButton" data-wizard="finish" data-wizardname="viewUserInfo"><span class="mat-icon">close</span></button>
                    <table class="TwoColLine">
                        <tr>
                            <td>Name</td>
                            <td id="tab_console_name"></td>
                        </tr>
                        <tr>
                            <td>UUID</td>
                            <td id="tab_console_uuid"></td>
                        </tr>
                        <tr>
                            <td>IP Address</td>
                            <td id="tab_console_ip"></td>
                        </tr>
                        <tr>
                            <td>Join Time</td>
                            <td id="tab_console_join"></td>
                        </tr>
                    </table>

                    <br />
                    <button class="bgRed slideIcon" data-wizard="finish" data-wizardname="viewUserInfo"><span>Close</span><span class="mat-icon">close</span></button>
                    <div id="userContentsButtonsArea" class="buttonGroup flexButtonGroup">

                    </div>
                </div>
            </div>

            <div class="bodyTab wizardTab" id="tab_schedule_newTask" data-viewmodel="ScheduleVM">
                <div class="wizardContents wizardPopup">
                    <!-- ko if: editing() -->
                    <h2>Edit task</h2>
                    <!-- /ko -->
                    <!-- ko if: !editing() -->
                    <h2>Add a new task</h2>
                    <button class="iconButton" data-wizard="cancel"><span class="mat-icon">close</span></button>

                    <p>What task would you like to perform?</p>

                    <select data-bind="options: availableMethods, optionsText: 'Description', value: selectedTask"></select>
                    <!-- /ko -->

                    <!-- ko with: editing() ? editingTask : selectedTask -->
                    <h4 data-bind="text: Description().length > 0 ? Description() : Name(), visible: $parent.editing()"></h4>

                    <!-- ko if: Consumes().length == 0 -->
                    <p style="margin-top: 16px">This task consumes no values.</p>
                    <!-- /ko -->
                    <!-- ko if: Consumes().length > 0 -->
                    <div class="settingsGroup" style="margin-top: 16px">
                        <div class="groupBody" data-bind="foreach: Consumes" style="grid-template-columns: repeat(auto-fill, minmax(250px, 2fr))">
                            <div class="settingContainer">
                                <div class="settingLabel">
                                    <div><span data-bind="text: DisplayName"></span></div>
                                    <div class="settingDescription" data-bind="text: Description"></div>
                                    <!-- ko if: InputType == "Enum" -->
                                    <select data-bind="options: enumValues, value: Value, optionsText: 'name', optionsValue: 'value'"></select>
                                    <!-- /ko -->
                                    <!-- ko if: (InputType == "text" || InputType == "number") -->
                                    <input class="scheduleTriggerContents" data-bind="attr: {'type': InputType}, value: Value, valueUpdate: 'input', click: $root.setSelected($element)" />
                                    <!-- /ko -->
                                    <!-- ko if: ValueType == "Uri" -->
                                    <input class="scheduleTriggerContents" type="url" data-bind="value: Value, valueUpdate: 'input', click: $root.setSelected($element)" />
                                    <!-- /ko -->
                                    <!-- ko if: InputType === "Boolean" || InputType === "checkbox" -->
                                    <label class="checkbox">
                                        <input type="checkbox" data-bind="checked: Value" />
                                        <span></span>
                                    </label>
                                    <!-- /ko -->
                                    <!-- ko if: InputType === "Textarea" -->
                                    <textarea class="scheduleTriggerContents" data-bind="value: Value, valueUpdate: 'input', click: $root.setSelected($element)"></textarea>
                                    <!-- /ko -->
                                </div>

                            </div>
                        </div>
                    </div>

                    <div>
                        <h4>Available Variables</h4>
                        <!-- ko with: $root.selectedTrigger() -->
                        <div class="emitsList">
                            <!-- ko foreach: Emits() -->
                            <div class="button emitValue bgAmber" data-bind="text: Name, click: () => {$root.insertParam(Name());}"></div>
                            <!-- /ko -->
                            <!-- ko foreach: GlobalMappings -->
                            <div class="button emitValue" data-bind="text: Name, click: () => {$root.insertParam(Name());}"></div>
                            <!-- /ko -->
                        </div>
                        <p>Click on a parameter to insert it into your value.</p>
                        <!-- /ko -->
                    </div>
                    <!-- /ko -->
                    <!-- /ko -->
                    <br />
                    <button class="bgRed slideIcon" data-wizard="cancel"><span>Cancel</span><span class="mat-icon">close</span></button>
                    <button class="bgGreen slideIcon" data-bind="click: addEditTask"><span data-bind="text: editing() ? 'Edit Task' : 'Add Task'"></span><span class="mat-icon" data-bind="text: (editing()) ? 'edit' : 'add_circle'"></span></button>
                </div>
            </div>

            <div class="bodyTab wizardTab" id="tab_schedule_newTrigger" data-viewmodel="ScheduleVM">
                <div class="wizardContents wizardPopup">
                    <!-- Merlin -->
                    <!-- ko if: editing() -->
                    <h2>Edit trigger</h2>
                    <!-- /ko -->
                    <!-- ko if: !editing() -->
                    <h2>Add a new trigger</h2>
                    <!-- /ko -->
                    <button class="iconButton" data-wizard="cancel"><span class="mat-icon">close</span></button>

                    <div data-bind="visible: newTriggerType() == -1">
                        <p>What type of trigger would you like to add?</p>

                        <label class="radioButtons">
                            <input type="radio" name="NewTriggerType" value="0" data-bind="checked: newTriggerType" />
                            <span>
                                <strong>Event Trigger</strong><br />For responding to events raised by in-application actions or by other AMP components
                                <img src="/Images/Glyphicons/glyphicons-basic-556-flash@3x.png" loading="lazy" alt="Lightning bolt symbol representing an 'event'" />
                            </span>
                        </label>


                        <label class="radioButtons">
                            <input type="radio" name="NewTriggerType" value="15" data-bind="checked: newTriggerType" />
                            <span>
                                <strong>Simple Time Interval</strong><br />Create a trigger that runs at a fixed interval (daily, weekly, etc.)
                                <img src="/Images/Glyphicons/glyphicons-basic-60-timer@3x.png" loading="lazy" alt="A clock icon representing a regular interval" />
                            </span>
                        </label>


                        <label class="radioButtons">
                            <input type="radio" name="NewTriggerType" value="10" data-bind="checked: newTriggerType" />
                            <span>
                                <strong>Advanced Time Interval</strong><br />Create a trigger that runs at a more variable interval (E.g. only on weekdays but not weekends)
                                <img src="/Images/Glyphicons/AdvSchedule.png" loading="lazy" alt="A calendar overlaid with a clock representing a variable interval" />
                            </span>
                        </label>

                        <!--
                        <label class="radioButtons">
                            <input type="radio" name="NewTriggerType" value="20" disabled />
                            <span><strong>Fixed Time</strong><br />One-shot triggers that occur at a specific time, and are then removed</span>
                        </label>
                        -->
                    </div>

                    <div data-bind="visible: newTriggerType() == 0">
                        <h3>Event Trigger</h3>
                        <select data-bind="options: availableTriggers, optionsText: 'Description', value: newTriggerEvent"></select>
                    </div>

                    <div data-bind="visible: newTriggerType() == 10" class="scheduleAdvSegments">
                        <h3>Advanced Time Interval Trigger</h3>

                        <h4>Months</h4>
                        <div class="twelveSegmentContainer" data-bind="foreach: newTriggerMonths">
                            <div class="timeSegment" data-bind="text: text, click: toggle, css: {selected: selected}"></div>
                        </div>
                        <h4>Days</h4>
                        <div class="sevenSegmentContainer" data-bind="foreach: newTriggerDays">
                            <div class="timeSegment" data-bind="text: text, click: toggle, css: {selected: selected}"></div>
                        </div>
                        <h4>Hours</h4>
                        <div class="hoursSegmentContainer" data-bind="foreach: newTriggerHours">
                            <div class="timeSegment" data-bind="text: text, click: toggle, css: {selected: selected}"></div>
                        </div>
                        <h4>Minutes</h4>
                        <div class="minutesSegmentContainer" data-bind="foreach: newTriggerMinutes">
                            <div class="timeSegment" data-bind="text: text, click: toggle, css: {selected: selected}"></div>
                        </div>

                        <div class="segmentKeyContainer" style="float: right; position: unset;">
                            <div class="timeSegment selected" style="float:right;">Selected</div>
                            <div class="timeSegment" style="float:right;">Not Selected</div>
                        </div>

                        <div style="margin-top:8px">
                            <p>Server Timezone: <span data-bind="text: serverTimezone"></span></p>
                            <h4>What do you want to call this trigger?</h4>
                            <input data-bind="value: newTriggerName" type="text" required="required" />
                        </div>
                    </div>

                    <div data-bind="visible: newTriggerType() == 15">
                        <h3>Simple Time Interval Trigger</h3>

                        <select data-bind="value: newSimpleTriggerType">
                            <option value="0">Once per week</option>
                            <option value="10">Once per day</option>
                            <option value="20">Every X hours</option>
                            <option value="30">Every X minutes</option>
                            <option value="40">Once per month</option>
                            <option value="50">On the (nth) (day) of each month</option>
                        </select>

                        <br /><br />

                        <span data-bind="visible: newSimpleTriggerType() != 10 && newSimpleTriggerType() != 40 && newSimpleTriggerType() != 50">Every</span>
                        <span data-bind="visible: newSimpleTriggerType() == 40 || newSimpleTriggerType() == 50">On the</span>

                        <select data-bind="visible: newSimpleTriggerType() == 50, value: simpleNthDayOf">
                            <option value="0">first</option>
                            <option value="1">second</option>
                            <option value="2">third</option>
                            <option value="3">fourth</option>
                            <option value="4">fifth</option>
                        </select>

                        <select data-bind="visible: newSimpleTriggerType() == 0 || newSimpleTriggerType() == 50, value: simpleWeekday">
                            <option value="0">Monday</option>
                            <option value="1">Tuesday</option>
                            <option value="2">Wednesday</option>
                            <option value="3">Thursday</option>
                            <option value="4">Friday</option>
                            <option value="5">Saturday</option>
                            <option value="6">Sunday</option>
                        </select>

                        <select data-bind="visible: newSimpleTriggerType() == 20, value: simpleIntervalHours">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="6">6</option>
                            <option value="8">8</option>
                            <option value="12">12</option>
                        </select>

                        <select data-bind="visible: newSimpleTriggerType() == 30, value: simpleIntervalMinutes">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="10">10</option>
                            <option value="12">12</option>
                            <option value="15">15</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                        </select>

                        <select data-bind="visible: newSimpleTriggerType() == 40, value: simpleIntervalDayOfMonth" id="scheduleSimpleDayOfMonth">
                            <option value="1">1st</option>
                            <option value="2">2nd</option>
                            <option value="3">3rd</option>
                            <option value="4">4th</option>
                            <option value="5">5th</option>
                            <option value="6">6th</option>
                            <option value="7">7th</option>
                            <option value="8">8th</option>
                            <option value="9">9th</option>
                            <option value="10">10th</option>
                            <option value="11">11th</option>
                            <option value="12">12th</option>
                            <option value="13">13th</option>
                            <option value="14">14th</option>
                            <option value="15">15th</option>
                            <option value="16">16th</option>
                            <option value="17">17th</option>
                            <option value="18">18th</option>
                            <option value="19">19th</option>
                            <option value="20">20th</option>
                            <option value="21">21st</option>
                            <option value="22">22nd</option>
                            <option value="23">23rd</option>
                            <option value="24">24th</option>
                            <option value="25">25th</option>
                            <option value="26">26th</option>
                            <option value="27">27th</option>
                            <option value="28">28th</option>
                            <option value="29">29th</option>
                            <option value="30">30th</option>
                            <option value="31">31st</option>
                        </select>

                        <span data-bind="visible: newSimpleTriggerType() == 30"> Minutes </span>
                        <span data-bind="visible: newSimpleTriggerType() == 20"> Hours </span>
                        <span data-bind="visible: newSimpleTriggerType() == 0 || newSimpleTriggerType() == 10"> at </span>
                        <span data-bind="visible: newSimpleTriggerType() == 40 || newSimpleTriggerType() == 50"> of each month at </span>

                        <span data-bind="visible: newSimpleTriggerType() == 0 || newSimpleTriggerType() == 10 || newSimpleTriggerType() == 40 || newSimpleTriggerType() == 50">
                            <select data-bind="value: simpleHours">
                                <option value="0">00</option>
                                <option value="1">01</option>
                                <option value="2">02</option>
                                <option value="3">03</option>
                                <option value="4">04</option>
                                <option value="5">05</option>
                                <option value="6">06</option>
                                <option value="7">07</option>
                                <option value="8">08</option>
                                <option value="9">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                            </select>
                            <span>:</span>
                            <select data-bind="value: simpleMinutes">
                                <option value="0">00</option>
                                <option value="1">01</option>
                                <option value="2">02</option>
                                <option value="3">03</option>
                                <option value="4">04</option>
                                <option value="5">05</option>
                                <option value="6">06</option>
                                <option value="7">07</option>
                                <option value="8">08</option>
                                <option value="9">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>
                                <option value="32">32</option>
                                <option value="33">33</option>
                                <option value="34">34</option>
                                <option value="35">35</option>
                                <option value="36">36</option>
                                <option value="37">37</option>
                                <option value="38">38</option>
                                <option value="39">39</option>
                                <option value="40">40</option>
                                <option value="41">41</option>
                                <option value="42">42</option>
                                <option value="43">43</option>
                                <option value="44">44</option>
                                <option value="45">45</option>
                                <option value="46">46</option>
                                <option value="47">47</option>
                                <option value="48">48</option>
                                <option value="49">49</option>
                                <option value="50">50</option>
                                <option value="51">51</option>
                                <option value="52">52</option>
                                <option value="53">53</option>
                                <option value="54">54</option>
                                <option value="55">55</option>
                                <option value="56">56</option>
                                <option value="57">57</option>
                                <option value="58">58</option>
                                <option value="59">59</option>
                            </select>
                        </span>

                        <p data-bind="visible: newSimpleTriggerType() == 40 && simpleIntervalDayOfMonth() > 28" class="inlineWarning">This trigger will not fire on months that have fewer than <span style="font-weight:bold" data-bind="text: simpleIntervalDayOfMonth()"></span> days.</p>
                        <p>Server Timezone: <span data-bind="text: serverTimezone"></span></p>
                    </div>

                    <!-- ko if: newTriggerType() != -1 -->
                    <h4>Emitted Values</h4>
                    <!-- /ko -->
                    <!-- ko if: newTriggerType() == 0 -->
                    <!-- ko with: newTriggerEvent -->
                    <!-- ko if: Emits().length > 0 -->
                    <ul id="triggerEmittedValues" data-bind="foreach: Emits">
                        <li data-bind="text: Name"></li>
                    </ul>
                    <!-- /ko -->
                    <!-- ko if: Emits().length == 0 -->
                    <p>This trigger emits no values.</p>
                    <!-- /ko -->
                    <!-- /ko -->
                    <!-- /ko -->
                    <ul data-bind="visible: (newTriggerType() == 10 || newTriggerType() == 15 || newTriggerType() == 20 || newTriggerType() == 40)">
                        <li>Time</li>
                    </ul>

                    <br />
                    <button class="bgRed slideIcon" data-bind="click: hideWizard"><span>Cancel</span><span class="mat-icon">delete</span></button>
                    <!-- ko if: newTriggerType() != -1 -->
                    <!-- ko if: !editing() -->
                    <button data-bind="click: backButton"><span>Back</span></button>
                    <!-- /ko -->
                    <button class="bgGreen slideIcon" data-bind="click: addTrigger"><span data-bind="text: (editing()) ? 'Edit Trigger' : 'Add Trigger'"></span><span class="mat-icon" data-bind="text: (editing()) ? 'edit' : 'add_circle'"></span></button>
                    <!-- /ko -->
                </div>
            </div>

            <div class="bodyTab wizardPopup wizardTab" id="tab_mobileLogin">
                <div class="wizardContents">
                    <h2>Mobile Login</h2>
                    <button class="iconButton" data-wizard="finish" data-wizardname="mobileLogin"><span class="mat-icon">close</span></button>
                    <img id="mobileLoginQR" loading="lazy" alt="A single-use QR code. Scan this with a mobile device. Not seeing anything here? Try disabling ad-blockers/privacy plugins for this page." />
                    <p>Scan this QR code on your mobile device to log in as the current user.</p>
                    <p>This is a single-use code that cannot be used again once scanned. It will remain valid for 30 seconds.</p>
                    <br />
                    <button class="" data-wizard="finish" data-wizardname="mobileLogin"><span>Finish</span></button>
                </div>
            </div>

            <div class="bodyTab wizardPopup wizardTab" id="tab_changepassword">
                <div class="wizardContents">
                    <h2>Change Password</h2>
                    <button class="iconButton" data-wizard="cancel" data-wizardname="tab_changepassword"><span class="mat-icon">close</span></button>
                    <h3 id="passwdChangeRequiredText">A password change is required to log in with this user</h3>
                    <form id="changePasswordForm">
                        <table class="twoColLine noZebra">
                            <tr>
                                <td>Username</td>
                                <td id="changepw_showusername" data-formfield="username"></td>
                            </tr>
                            <tr>
                                <td>Old Password</td>
                                <td><input type="password" name="oldpassword" required="required" /></td>
                            </tr>
                            <tr>
                                <td>New Password</td>
                                <td><input type="password" id="changepw_newpwd" name="newpassword" required="required" /></td>
                            </tr>
                            <tr>
                                <td>Confirm Password</td>
                                <td><input type="password" name="confirmpassword" required="required" /></td>
                            </tr>
                            <tr id="showChangePW2FA">
                                <td>2FA Code (If enabled)</td>
                                <td><input type="number" name="changepw2fa" /></td>
                            </tr>
                            <tr>
                                <td>Password Strength</td>
                                <td><div id="passwordGrade" class="passwordGrade"></div></td>
                            </tr>
                        </table>
                        <br />
                        <button class="bgRed slideIcon" data-wizard="cancel" data-wizardname="tab_changepassword" type="button"><span>Cancel</span><span class="mat-icon">close</span></button>
                        <button class="bgGreen slideIcon" data-wizard="finish" data-wizardname="tab_changepassword" type="submit"><span>Change Password</span><span class="mat-icon">password</span></button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="notificationTemplate">
        <div class="notification" data-bind="css: { failed: State() == 3, alert: State() == 100 }">
            <div class="notificationTitle">
                <span data-bind="text: Name"></span>
                <button data-bind="click: Cancel, visible: IsCancellable() && State() == 0">Cancel</button>
                <button class="bgRed" data-bind="click: Dismiss, visible: State() == 3">Dismiss</button>
            </div>
            <!-- ko if: Actions().length == 0 -->
            <div class="notificationDescription" data-bind="text: Description"></div>
            <div class="notificationProgessContainer">
                <div class="notificationProgressBar" data-bind="css: { progUnknown: IsIndeterminate }, style: { width : IsIndeterminate() ? '100%' : ProgressPercent() + '%' }">
                    <div class="notificationSpeed" data-bind="text: Speed"></div>
                </div>
            </div>
            <!-- /ko -->
            <!-- ko if: Actions().length > 0 -->
            <div class="notificationDescription" style="margin: 16px 0px" data-bind="text: Description"></div>
            <!-- /ko -->
            <!-- ko foreach: Actions -->
            <button class="slimButton" data-bind="click: click, text: text, css: cssClass"></button>
            <!-- /ko -->
        </div>
    </script>

    <div id="notificationContainer" data-bind="fadeVisible: Visible">
        <div class="notificationBanner">
            <span>Notifications</span> (<span class="notificationCount" data-bind="text: Notifications().length"></span>)
            <button class="bgRed" data-bind="click: DismissAll, visible: DismissAllVisible">Dismiss All</button>
        </div>
        <div class="notificationContents">
            <!-- ko template: {name: 'notificationTemplate', foreach: Notifications, beforeRemove: BeforeRemove} -->
            <!-- /ko -->
        </div>
    </div>

    <div id="sideMenuContainer">
        <div id="userInfo" data-viewmodel="UserInfoVM">
            <img class="icon smallIcon" data-bind="attr: {src: imageSmallURI}" loading="lazy" alt="User Avatar" />
            <span data-bind="text: username"></span>
        </div>
        <div id="sideMenu">
            <img data-bind="visible: showADSUI, attr: {src: imageURL}" loading="lazy" class="heroImage" />
            <div class="menuTitle">Main Menu</div>

            <script type="text/html" id="menuSubmenu">
                <!-- ko if: children().length > 0 && visible() -->
                <div class="multiMenuContainer">
                    <a data-bind="'class': extraClass, click:click, css:{small: small}">
                        <span class="mat-icon" data-bind="text: image"></span>
                        <span style="flex-grow:1" data-bind="text:title"></span>
                        <span class="mat-icon">arrow_forward_ios</span>
                    </a>
                    <div class="subMenuWell" data-bind="css: {appear: expanded}">
                        <div class="menuTitle" data-bind="text:title"></div>
                        <a data-bind="click:click" class="small">
                            <span class="mat-icon">arrow_back_ios_new</span>
                            <span>Back</span>
                        </a>
                        <div data-bind="template: { name: 'menuSubmenu', foreach: children}">
                        </div>
                    </div>
                </div>
                <!-- /ko -->
                <!-- ko if: children().length == 0 && visible() -->
                <a data-bind="'class': extraClass, attr:{href: tab, 'data-permission': requiredPermission}, click:click, css:{selected: selected, small: small, disabled: disabled }, disable: disabled">
                    <span class="mat-icon" data-bind="text: image"></span>
                    <span data-bind="visible: subtitle() != '', text: subtitleIcon" class="warn mat-icon"></span>
                    <div>
                        <span data-bind="text:title, css: {hasSubtitle: subtitle() != ''}"></span>
                        <span data-bind="visible: subtitle() != '', text:subtitle" class="subtitle"></span>
                    </div>
                </a>
                <!-- /ko -->
            </script>

            <div id="sideMenuPresenter" data-bind="template: {name: 'menuSubmenu', foreach: sideMenuData}">

            </div>
        </div>

        <div id="bgtext" data-viewmodel="DiagnosticsVM">
            <span id="versionHeadline">AMP Release "<span data-bind="text: versionCodename()"></span>"</span>
            <div class="tiny" data-bind="text: versionTitle()"></div>
        </div>
    </div>

    <!--Scripts-->
    <!--Third Party-->
    <script type="text/javascript" src="/Scripts/jquery-3.6.0.min.js" defer></script>
    <script type="text/javascript" src="/Scripts/swiped-events.min.js" defer></script>
    <script type="text/javascript" src="/Scripts/flotchart-full.min.js" defer></script>
    <script type="text/javascript" src="/Scripts/knockout-3.5.1.js" defer></script>
    <script type="text/javascript" src="/Scripts/knockout.quickmap.js" defer></script>
    <script type="text/javascript" src="/Scripts/FileSaver.js" defer></script>
    <script type="text/javascript" src="/Scripts/pressure.min.js" defer></script>
    <!--End Third Party-->
    <!--Internal-->
    <script type="text/javascript" src="/Scripts/FeatureTest.js" defer></script>
    <script type="text/javascript" src="/Scripts/Common.js?v=2.6.4.0" defer></script>
    <script type="text/javascript" src="/Scripts/API.js?v=2.6.4.0" defer></script>
    <script type="text/javascript" src="/Scripts/Locale.js?v=2.6.4.0" defer></script>
    <script type="text/javascript" src="/Scripts/UI.js?v=2.6.4.0" defer></script>
    <script type="text/javascript" src="/Scripts/PluginHandler.js?v=2.6.4.0" defer></script>
    <script type="text/javascript" src="/Scripts/AMP.js?v=2.6.4.0" id="scriptAMPmain" defer></script>
    <!--End Internal-->
    <!--External-->
    <!--<script src="https://discourse.cubecoders.com/javascripts/embed-topics.js"></script>-->
    <!--End External-->
    <!--<script type="text/javascript" src="/Scripts/AMPBundle.js"></script>-->
</body>
</html>