From 1509f3805da35d76b493eedab192ae2a2d22f19e Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sun, 18 Jan 2015 14:53:34 -0500
Subject: [PATCH] display server name in dashboard

---
 dashboard-ui/advanced.html               |   3 +-
 dashboard-ui/css/librarybrowser.css      |   4 +-
 dashboard-ui/css/librarymenu.css         |   4 +-
 dashboard-ui/css/site.css                |  68 +++++++++++---
 dashboard-ui/dashboard.html              |   1 -
 dashboard-ui/dashboardgeneral.html       |   1 -
 dashboard-ui/notificationsetting.html    |  10 +-
 dashboard-ui/notificationsettings.html   |  10 +-
 dashboard-ui/scheduledtask.html          |  10 +-
 dashboard-ui/scheduledtasks.html         |  10 +-
 dashboard-ui/scripts/dashboardgeneral.js |   9 ++
 dashboard-ui/scripts/dashboardpage.js    |   5 +
 dashboard-ui/scripts/site.js             | 112 +++++++++++++++++------
 dashboard-ui/serversecurity.html         |   9 +-
 14 files changed, 169 insertions(+), 87 deletions(-)

diff --git a/dashboard-ui/advanced.html b/dashboard-ui/advanced.html
index 27870dc926..cbbe51504e 100644
--- a/dashboard-ui/advanced.html
+++ b/dashboard-ui/advanced.html
@@ -11,8 +11,7 @@
 
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" data-role="button" class="ui-btn-active">${TabGeneral}</a>
-                    <a href="notificationsettings.html" data-role="button">${TabNotifications}</a>
-                    <a href="scheduledtasks.html" data-role="button">${TabScheduledTasks}</a>
+                    <a href="serversecurity.html" data-role="button">${TabSecurity}</a>
                 </div>
                 <form id="advancedConfigurationForm">
 
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 3b0447f6c6..c9ad731d95 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -559,7 +559,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     }
 
 .ui-page-theme-a .detailSectionHeader {
-    background-color: #e9e9e9;
+    background-color: #fff;
     border: 1px solid #ddd;
     border-radius: 2px;
 }
@@ -644,7 +644,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     }
 }
 
-@media all and (max-width: 750px) {
+@media all and (max-width: 800px) {
 
     .editorMenuLink {
         display: none;
diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css
index 619f5e19fa..23665a481a 100644
--- a/dashboard-ui/css/librarymenu.css
+++ b/dashboard-ui/css/librarymenu.css
@@ -265,14 +265,14 @@
     }
 }
 
-@media all and (min-width: 750px) {
+@media all and (min-width: 800px) {
 
     .dashboardDocument .dashboardMenuButton {
         display: none;
     }
 }
 
-@media all and (max-width: 750px) {
+@media all and (max-width: 800px) {
 
     .dashboardDocument .libraryMenuButton {
         display: none;
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index ae15b3c104..8f2897f44f 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -320,49 +320,93 @@ h1 .imageLink {
     border: 0;
     display: none;
     text-align: left;
-    width: 220px;
+    width: 240px;
     position: fixed;
     top: 51px;
     left: 0;
     bottom: 0;
     margin: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-right: 1px solid #e0e0e0;
+    /*-moz-box-shadow: -3px 0 10px 0 #555;
+    -webkit-box-shadow: -3px 0 10px 0 #555;
+    box-shadow: -3px 0 10px 0 #555;*/
 }
 
+.ui-page-theme-a {
+    background: #f2f2f2;
+}
+
+    .ui-page-theme-a .content-secondary {
+        background: #fff;
+    }
+
 .sidebarLinks {
-    margin-top: 2.75em;
-    margin-left: 1em;
+    margin-top: 1.5em;
+    padding-bottom: 50px;
 }
 
     .sidebarLinks a {
         display: block;
-        padding: .6em 20px .6em 20px;
+        padding: .6em 20px .6em 0;
         text-decoration: none;
         color: inherit !important;
         text-shadow: none !important;
         font-weight: 500 !important;
         font-size: 14px;
-        border-radius: 2px;
+        vertical-align: middle;
     }
 
         .sidebarLinks a:hover {
-            background: #52B54B;
-            color: #fff !important;
+            background: #f2f2f2;
         }
 
         .sidebarLinks a.selectedSidebarLink {
-            background: #38c !important;
-            color: #fff !important;
             margin-right: 0;
         }
 
+.ui-page-theme-a .sidebarLinks a.selectedSidebarLink {
+    background: #f2f2f2 !important;
+}
+
+.ui-page-theme-b .sidebarLinks a.selectedSidebarLink {
+    background: #38c !important;
+    color: #fff !important;
+}
+
+.sidebarLinks .sidebarLinkIcon {
+    font-size: 17px;
+    width: 66px;
+    text-align: center;
+}
+
+.ui-page-theme-a .sidebarLinkIcon {
+    color: #666;
+}
+
 .sidebarDivider {
     height: 0;
     border-width: 1px 0 0;
     border-style: solid;
-    margin: .25em 0;
+    margin: .7em 0;
     border-radius: 0;
 }
 
+.sidebarLinkText, .sidebarLinkIcon {
+}
+
+.sidebarHeader {
+    padding-left: 20px;
+    margin: 1em 0;
+    font-size: 90%;
+}
+
+.ui-page-theme-a .sidebarHeader {
+    color: #888;
+}
+
+
 .invalidEntry {
     background-color: lightpink !important;
 }
@@ -439,7 +483,7 @@ h1 .imageLink {
     }
 }
 
-@media all and (min-width: 750px) {
+@media all and (min-width: 800px) {
 
     /*
     Forms
@@ -465,7 +509,7 @@ h1 .imageLink {
 
     .content-primary {
         padding: 80px 15px 3em 0;
-        margin: 0 0 0 260px;
+        margin: 0 0 0 280px;
     }
 
         .content-primary ul:first-child {
diff --git a/dashboard-ui/dashboard.html b/dashboard-ui/dashboard.html
index 50ed20663d..2b120724d3 100644
--- a/dashboard-ui/dashboard.html
+++ b/dashboard-ui/dashboard.html
@@ -12,7 +12,6 @@
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" data-role="button" class="ui-btn-active">${TabDashboard}</a>
                     <a href="dashboardgeneral.html" data-role="button">${TabSettings}</a>
-                    <a href="serversecurity.html" data-role="button">${TabSecurity}</a>
                 </div>
                 <div class="dashboardContent">
                     <div class="ui-bar-a welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em 0; font-weight: normal; max-width: 800px;">
diff --git a/dashboard-ui/dashboardgeneral.html b/dashboard-ui/dashboardgeneral.html
index 157e97754d..f7fb46eeac 100644
--- a/dashboard-ui/dashboardgeneral.html
+++ b/dashboard-ui/dashboardgeneral.html
@@ -12,7 +12,6 @@
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="dashboard.html" data-role="button">${TabDashboard}</a>
                     <a href="#" data-role="button" class="ui-btn-active">${TabSettings}</a>
-                    <a href="serversecurity.html" data-role="button">${TabSecurity}</a>
                 </div>
 
                 <form class="dashboardGeneralForm">
diff --git a/dashboard-ui/notificationsetting.html b/dashboard-ui/notificationsetting.html
index f5e0c35d09..918ac624cf 100644
--- a/dashboard-ui/notificationsetting.html
+++ b/dashboard-ui/notificationsetting.html
@@ -1,20 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>${TitleAdvanced}</title>
+    <title>${TitleNotifications}</title>
 </head>
 <body>
-    <div id="notificationSettingPage" data-role="page" class="page type-interior advancedConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Notifications">
+    <div id="notificationSettingPage" data-role="page" class="page type-interior notificationConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Notifications">
 
         <div data-role="content">
             <div class="content-primary">
 
-                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="advanced.html" data-role="button">${TabGeneral}</a>
-                    <a href="notificationsettings.html" data-role="button" class="ui-btn-active">${TabNotifications}</a>
-                    <a href="scheduledtasks.html" data-role="button">${TabScheduledTasks}</a>
-                </div>
-
                 <h2 class="notificationType" style="margin-bottom: 0;"></h2>
 
                 <form class="notificationSettingForm">
diff --git a/dashboard-ui/notificationsettings.html b/dashboard-ui/notificationsettings.html
index ddf842059b..c39afbb14c 100644
--- a/dashboard-ui/notificationsettings.html
+++ b/dashboard-ui/notificationsettings.html
@@ -1,20 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>${TitleAdvanced}</title>
+    <title>${TitleNotifications}</title>
 </head>
 <body>
-    <div id="notificationSettingsPage" data-role="page" class="page type-interior advancedConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Notifications">
+    <div id="notificationSettingsPage" data-role="page" class="page type-interior notificationConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Notifications">
 
         <div data-role="content">
             <div class="content-primary">
 
-                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="advanced.html" data-role="button">${TabGeneral}</a>
-                    <a href="#" data-role="button" class="ui-btn-active">${TabNotifications}</a>
-                    <a href="scheduledtasks.html" data-role="button">${TabScheduledTasks}</a>
-                </div>
-
                 <div class="readOnlyContent">
                     <p>${HeaderNotificationList}</p>
                     <p>${SendNotificationHelp}</p>
diff --git a/dashboard-ui/scheduledtask.html b/dashboard-ui/scheduledtask.html
index 14ab75b31c..94d535d3ee 100644
--- a/dashboard-ui/scheduledtask.html
+++ b/dashboard-ui/scheduledtask.html
@@ -1,19 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>${TitleAdvanced}</title>
+    <title>${TitleScheduledTasks}</title>
 </head>
 <body>
-    <div id="scheduledTaskPage" data-role="page" class="page type-interior advancedConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Scheduled%20tasks">
+    <div id="scheduledTaskPage" data-role="page" class="page type-interior scheduledTasksConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Scheduled%20tasks">
         <div data-role="content">
             <div class="content-primary">
 
-                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="advanced.html" data-role="button">${TabGeneral}</a>
-                    <a href="notificationsettings.html" data-role="button">${TabNotifications}</a>
-                    <a href="scheduledtasks.html" data-role="button" class="ui-btn-active">${TabScheduledTasks}</a>
-                </div>
-
                 <div class="readOnlyContent">
                     <h2 class="taskName"></h2>
                     <p id="pTaskDescription"></p>
diff --git a/dashboard-ui/scheduledtasks.html b/dashboard-ui/scheduledtasks.html
index b9b6c89bdf..41cdb39aa7 100644
--- a/dashboard-ui/scheduledtasks.html
+++ b/dashboard-ui/scheduledtasks.html
@@ -1,19 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>${TitleAdvanced}</title>
+    <title>${TitleScheduledTasks}</title>
 </head>
 <body>
-    <div id="scheduledTasksPage" data-role="page" class="page type-interior advancedConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Scheduled%20tasks">
+    <div id="scheduledTasksPage" data-role="page" class="page type-interior scheduledTasksConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Scheduled%20tasks">
         <div data-role="content">
             <div class="content-primary">
 
-                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="advanced.html" data-role="button">${TabGeneral}</a>
-                    <a href="notificationsettings.html" data-role="button">${TabNotifications}</a>
-                    <a href="#" data-role="button" class="ui-btn-active">${TabScheduledTasks}</a>
-                </div>
-
                 <div class="readOnlyContent">
                     <p>${ScheduledTasksHelp}</p>
                     <div id="divScheduledTasks"></div>
diff --git a/dashboard-ui/scripts/dashboardgeneral.js b/dashboard-ui/scripts/dashboardgeneral.js
index f225b6ef82..735f5c6e9f 100644
--- a/dashboard-ui/scripts/dashboardgeneral.js
+++ b/dashboard-ui/scripts/dashboardgeneral.js
@@ -4,6 +4,15 @@
 
     function loadPage(page, config, languageOptions) {
 
+        if (Dashboard.lastSystemInfo) {
+            Dashboard.setPageTitle(Dashboard.lastSystemInfo.ServerName);
+        }
+
+        ApiClient.getSystemInfo().done(function (systemInfo) {
+
+            Dashboard.setPageTitle(systemInfo.ServerName);
+        });
+
         $('#txtServerName', page).val(config.ServerName || '');
 
         $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) {
diff --git a/dashboard-ui/scripts/dashboardpage.js b/dashboard-ui/scripts/dashboardpage.js
index 7dcf7767d3..82bd7f8ad0 100644
--- a/dashboard-ui/scripts/dashboardpage.js
+++ b/dashboard-ui/scripts/dashboardpage.js
@@ -6,6 +6,10 @@
 
         var page = this;
 
+        if (Dashboard.lastSystemInfo) {
+            Dashboard.setPageTitle(Dashboard.lastSystemInfo.ServerName);
+        }
+
         DashboardPage.newsStartIndex = 0;
 
         Dashboard.showLoadingMsg();
@@ -73,6 +77,7 @@
 
         ApiClient.getSystemInfo().done(function (systemInfo) {
 
+            Dashboard.setPageTitle(systemInfo.ServerName);
             Dashboard.updateSystemInfo(systemInfo);
 
             $('#appVersionNumber', page).html(Globalize.translate('LabelVersionNumber').replace('{0}', systemInfo.Version));
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 37d2a8fdd1..27253e3910 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -665,30 +665,43 @@ var Dashboard = {
 
             html += '<div class="sidebarLinks">';
 
-            var links = Dashboard.getToolsMenuLinks(page);
+            var items = Dashboard.getToolsMenuLinks(page);
 
-            var i, length, link;
+            var i, length, item;
 
-            for (i = 0, length = links.length; i < length; i++) {
+            for (i = 0, length = items.length; i < length; i++) {
 
-                link = links[i];
+                item = items[i];
 
                 if (!user.Policy.IsAdministrator) {
                     break;
                 }
 
-                if (link.divider) {
+                if (item.divider) {
                     html += "<div class='sidebarDivider ui-bar-inherit'></div>";
                 }
 
-                if (link.href) {
+                if (item.href) {
 
-                    if (link.selected) {
-                        html += '<a class="selectedSidebarLink" href="' + link.href + '">' + link.name + '</a>';
+                    var style = item.color ? ' style="color:' + item.color + '"' : '';
+
+                    if (item.selected) {
+                        html += '<a class="selectedSidebarLink" href="' + item.href + '">';
                     } else {
-                        html += '<a href="' + link.href + '">' + link.name + '</a>';
+                        html += '<a href="' + item.href + '">';
                     }
 
+                    html += '<span class="fa ' + item.icon + ' sidebarLinkIcon"' + style + '></span>';
+
+                    html += '<span class="sidebarLinkText">';
+                    html += item.name;
+                    html += '</span>';
+                    html += '</a>';
+                } else {
+                    
+                    html += '<div class="sidebarHeader">';
+                    html += item.name;
+                    html += '</div>';
                 }
             }
 
@@ -702,24 +715,24 @@ var Dashboard = {
 
             html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 15px;"><a href="index.html" class="imageLink"><img src="css/images/mblogoicon.png" /><span style="color:#333;">MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a></p>';
 
-            for (i = 0, length = links.length; i < length; i++) {
+            for (i = 0, length = items.length; i < length; i++) {
 
-                link = links[i];
+                item = items[i];
 
                 if (!user.Policy.IsAdministrator) {
                     break;
                 }
 
-                if (link.divider) {
+                if (item.divider) {
                     html += "<div class='dashboardPanelDivider'></div>";
                 }
 
-                if (link.href) {
+                if (item.href) {
 
-                    if (link.selected) {
-                        html += '<a class="selectedDashboardPanelLink dashboardPanelLink" href="' + link.href + '">' + link.name + '</a>';
+                    if (item.selected) {
+                        html += '<a class="selectedDashboardPanelLink dashboardPanelLink" href="' + item.href + '">' + item.name + '</a>';
                     } else {
-                        html += '<a class="dashboardPanelLink" href="' + link.href + '">' + link.name + '</a>';
+                        html += '<a class="dashboardPanelLink" href="' + item.href + '">' + item.name + '</a>';
                     }
 
                 }
@@ -739,58 +752,97 @@ var Dashboard = {
         return [{
             name: Globalize.translate('TabServer'),
             href: "dashboard.html",
-            selected: page.hasClass("dashboardHomePage")
+            selected: page.hasClass("dashboardHomePage"),
+            icon: 'fa-dashboard',
+            color: '#38c'
         }, {
             name: Globalize.translate('TabDevices'),
             href: "devices.html",
-            selected: page.hasClass("devicesPage")
+            selected: page.hasClass("devicesPage"),
+            icon: 'fa-tablet',
+            color: '#ECA403'
         }, {
             name: Globalize.translate('TabUsers'),
             href: "userprofiles.html",
-            selected: page.hasClass("userProfilesPage")
+            selected: page.hasClass("userProfilesPage"),
+            icon: 'fa-users',
+            color: '#679C34'
         }, {
             name: Globalize.translate('TabLibrary'),
             divider: true,
             href: "library.html",
-            selected: page.hasClass("mediaLibraryPage")
+            selected: page.hasClass("mediaLibraryPage"),
+            icon: 'fa-film'
         }, {
             name: Globalize.translate('TabMetadata'),
             href: "metadata.html",
-            selected: page.hasClass('metadataConfigurationPage')
+            selected: page.hasClass('metadataConfigurationPage'),
+            icon: 'fa-file-text'
         }, {
             name: Globalize.translate('TabPlayback'),
             href: "playbackconfiguration.html",
-            selected: page.hasClass('playbackConfigurationPage')
+            selected: page.hasClass('playbackConfigurationPage'),
+            icon: 'fa-play-circle'
         }, {
             name: Globalize.translate('TabSync'),
             href: "syncactivity.html",
-            selected: page.hasClass('syncConfigurationPage')
+            selected: page.hasClass('syncConfigurationPage'),
+            icon: 'fa-cloud'
         }, {
             divider: true,
+            name: Globalize.translate('TabExtras')
+        }, {
             name: Globalize.translate('TabAutoOrganize'),
             href: "autoorganizelog.html",
-            selected: page.hasClass("organizePage")
+            selected: page.hasClass("organizePage"),
+            icon: 'fa-files-o',
+            color: '#01C0DD'
         }, {
             name: Globalize.translate('TabDLNA'),
             href: "dlnasettings.html",
-            selected: page.hasClass("dlnaPage")
+            selected: page.hasClass("dlnaPage"),
+            icon: 'fa-film',
+            color: '#E5342E'
         }, {
             name: Globalize.translate('TabLiveTV'),
             href: "livetvstatus.html",
-            selected: page.hasClass("liveTvSettingsPage")
+            selected: page.hasClass("liveTvSettingsPage"),
+            icon: 'fa-video-camera',
+            color: '#293AAE'
+        }, {
+            name: Globalize.translate('TabNotifications'),
+            href: "notificationsettings.html",
+            selected: page.hasClass("notificationConfigurationPage"),
+            icon: 'fa-wifi',
+            color: 'brown'
         }, {
             name: Globalize.translate('TabPlugins'),
             href: "plugins.html",
-            selected: page.hasClass("pluginConfigurationPage")
+            selected: page.hasClass("pluginConfigurationPage"),
+            icon: 'fa-plus-circle',
+            color: '#9D22B1'
+        }, {
+            divider: true,
+            name: Globalize.translate('TabExpert')
         }, {
             name: Globalize.translate('TabAdvanced'),
-            divider: true,
             href: "advanced.html",
-            selected: page.hasClass("advancedConfigurationPage")
+            selected: page.hasClass("advancedConfigurationPage"),
+            icon: 'fa-gears',
+            color: '#F16834'
+        }, {
+            name: Globalize.translate('TabScheduledTasks'),
+            href: "scheduledtasks.html",
+            selected: page.hasClass("scheduledTasksConfigurationPage"),
+            icon: 'fa-clock-o',
+            color: '#38c'
         }, {
             name: Globalize.translate('TabHelp'),
+            divider: true,
             href: "support.html",
-            selected: pageElem.id == "supportPage" || pageElem.id == "logPage" || pageElem.id == "supporterPage" || pageElem.id == "supporterKeyPage" || pageElem.id == "aboutPage"
+            selected: pageElem.id == "supportPage" || pageElem.id == "logPage" || pageElem.id == "supporterPage" || pageElem.id == "supporterKeyPage" || pageElem.id == "aboutPage",
+            icon: 'fa-info-circle',
+            color: '#679C34'
         }];
 
     },
diff --git a/dashboard-ui/serversecurity.html b/dashboard-ui/serversecurity.html
index 23ff8ae850..d34398e1bb 100644
--- a/dashboard-ui/serversecurity.html
+++ b/dashboard-ui/serversecurity.html
@@ -1,23 +1,22 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>${TitleServer}</title>
+    <title>${TitleAdvanced}</title>
 </head>
 <body>
-    <div id="serverSecurityPage" data-role="page" class="page type-interior dashboardHomePage">
+    <div id="serverSecurityPage" data-role="page" class="page type-interior advancedConfigurationPage">
 
         <div data-role="content">
             <div class="content-primary">
 
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="dashboard.html" data-role="button">${TabDashboard}</a>
-                    <a href="dashboardgeneral.html" data-role="button">${TabSettings}</a>
+                    <a href="advanced.html" data-role="button">${TabGeneral}</a>
                     <a href="#" data-role="button" class="ui-btn-active">${TabSecurity}</a>
                 </div>
 
                 <h2 style="margin-top: -10px;">
                     <span>${HeaderApiKeys}</span>
-                    <button class="btnNewKey" style="float: right; margin: -4px 0 0; vertical-align: top;" data-icon="plus" data-mini="true" data-inline="true" type="button">${ButtonNew}</button>
+                    <button class="btnNewKey" style="margin: -4px 0 0 2em; vertical-align: top;" data-icon="plus" data-mini="true" data-inline="true" type="button">${ButtonNew}</button>
                 </h2>
                 <p>${HeaderApiKeysHelp}</p>
                 <br />