<!DOCTYPE html>
<!--
Template Name:  SmartAdmin Responsive WebApp - Template build with Twitter Bootstrap 4
Version: 4.5.1
Author: Sunnyat A.
Website: http://gootbootstrap.com
Purchase: https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0?ref=myorange
License: You must have a valid license purchased only from wrapbootstrap.com (link above) in order to legally use this theme for your project.
-->
<html lang="zh-hant-TW" class="root-text-lg">

<head>
    <meta charset="utf-8">
    <title>
        Marketing Dashboard - Application Intel - SmartAdmin v4.5.1
    </title>
    <meta name="description" content="Marketing Dashboard">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
    <!-- Call App Mode on ios devices -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- Remove Tap Highlight on Windows Phone IE -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- base css -->
    <link id="vendorsbundle" rel="stylesheet" media="screen, print" href="lib/vendors.bundle.css">
    <link id="appbundle" rel="stylesheet" media="screen, print" href="lib/app.bundle.css">
    <link id="mytheme" rel="stylesheet" media="screen, print" href="#">
    <link id="myskin" rel="stylesheet" media="screen, print" href="lib/skins/skin-master.css">
    <link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
    <!-- Place favicon.ico in the root directory -->
    <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
    <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <!-- Font Awesome -->
    <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="css/site.css" />
    <link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
    <link rel="stylesheet" href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
</head>
<!-- BEGIN Body -->
<!-- Possible Classes

    * 'header-function-fixed'         - header is in a fixed at all times
    * 'nav-function-fixed'            - left panel is fixed
    * 'nav-function-minify'			  - skew nav to maximize space
    * 'nav-function-hidden'           - roll mouse on edge to reveal
    * 'nav-function-top'              - relocate left pane to top
    * 'mod-main-boxed'                - encapsulates to a container
    * 'nav-mobile-push'               - content pushed on menu reveal
    * 'nav-mobile-no-overlay'         - removes mesh on menu reveal
    * 'nav-mobile-slide-out'          - content overlaps menu
    * 'mod-bigger-font'               - content fonts are bigger for readability
    * 'mod-high-contrast'             - 4.5:1 text contrast ratio
    * 'mod-color-blind'               - color vision deficiency
    * 'mod-pace-custom'               - preloader will be inside content
    * 'mod-clean-page-bg'             - adds more whitespace
    * 'mod-hide-nav-icons'            - invisible navigation icons
    * 'mod-disable-animation'         - disables css based animations
    * 'mod-hide-info-card'            - hides info card from left panel
    * 'mod-lean-subheader'            - distinguished page header
    * 'mod-nav-link'                  - clear breakdown of nav links

    >>> more settings are described inside documentation page >>>
-->

<body class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">
    <!-- DOC: script to save and load page settings -->
    <script>
        /**
         *	This script should be placed right after the body tag for fast execution
         *	Note: the script is written in pure javascript and does not depend on thirdparty library
         **/
        'use strict';

        var classHolder = document.getElementsByTagName("BODY")[0],
            /**
             * Load from localstorage
             **/
            themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
                {},
            themeURL = themeSettings.themeURL || '',
            themeOptions = themeSettings.themeOptions || '';
        /**
         * Load theme options
         **/
        if (themeSettings.themeOptions) {
            classHolder.className = themeSettings.themeOptions;
            console.log("%c✔ Theme settings loaded", "color: #148f32");
        }
        else {
            console.log("%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...", "color: #ed1c24");
        }
        if (themeSettings.themeURL && !document.getElementById('mytheme')) {
            var cssfile = document.createElement('link');
            cssfile.id = 'mytheme';
            cssfile.rel = 'stylesheet';
            cssfile.href = themeURL;
            document.getElementsByTagName('head')[0].appendChild(cssfile);

        }
        else if (themeSettings.themeURL && document.getElementById('mytheme')) {
            document.getElementById('mytheme').href = themeSettings.themeURL;
        }
        /**
         * Save to localstorage
         **/
        var saveSettings = function () {
            themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function (item) {
                return /^(nav|header|footer|mod|display)-/i.test(item);
            }).join(' ');
            if (document.getElementById('mytheme')) {
                themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
            };
            localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
        }
        /**
         * Reset settings
         **/
        var resetSettings = function () {
            localStorage.setItem("themeSettings", "");
        }

    </script>
    <!-- BEGIN Page Wrapper -->
    <div class="page-wrapper">
        <div class="page-inner">
            <!-- BEGIN Left Aside -->
            <aside class="page-sidebar hidden-lg-up">
                <div class="page-logo">
                    <a href="#" class="page-logo-link press-scale-down d-flex align-items-center position-relative"
                       data-toggle="modal" data-target="#modal-shortcut">
                        <img src="img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
                        <span class="page-logo-text mr-1">System</span>
                        <span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
                        <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>
                    </a>
                </div>
                <!-- BEGIN PRIMARY NAVIGATION -->
                <nav id="js-primary-nav" class="primary-nav" role="navigation">
                    <div class="nav-filter">
                        <div class="position-relative">
                            <input type="text" id="nav_filter_input" placeholder="Filter menu" class="form-control"
                                   tabindex="0">
                            <a href="#" onclick="return false;" class="btn-primary btn-search-close js-waves-off"
                               data-action="toggle" data-class="list-filter-active" data-target=".page-sidebar">
                                <i class="fal fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="info-card">
                        <img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
                             alt="Dr. Codex Lantern">
                        <div class="info-card-text">
                            <a href="#" class="d-flex align-items-center text-white">
                                <span class="text-truncate text-truncate-sm d-inline-block">
                                    Dr. Codex Lantern
                                </span>
                            </a>
                            <span class="d-inline-block text-truncate text-truncate-sm">Toronto, Canada</span>
                        </div>
                        <img src="img/card-backgrounds/cover-2-lg.png" class="cover" alt="cover">
                        <a href="#" onclick="return false;" class="pull-trigger-btn" data-action="toggle"
                           data-class="list-filter-active" data-target=".page-sidebar" data-focus="nav_filter_input">
                            <i class="fal fa-angle-down"></i>
                        </a>
                    </div>
                    <ul id="js-nav-menu" class="nav-menu">
                        <li class="active open">
                            <a href="#" title="Application Intel" data-filter-tags="application intel">
                                <i class="fal fa-info-circle"></i>
                                <span class="nav-link-text" data-i18n="nav.application_intel">Application Intel</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="intel_analytics_dashboard.html" title="Analytics Dashboard"
                                       data-filter-tags="application intel analytics dashboard">
                                        <span class="nav-link-text"
                                              data-i18n="nav.application_intel_analytics_dashboard">
                                            Analytics
                                            Dashboard
                                        </span>
                                    </a>
                                </li>
                                <li class="active">
                                    <a href="intel_marketing_dashboard.html" title="Marketing Dashboard"
                                       data-filter-tags="application intel marketing dashboard">
                                        <span class="nav-link-text"
                                              data-i18n="nav.application_intel_marketing_dashboard">
                                            Marketing
                                            Dashboard
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="intel_introduction.html" title="Introduction"
                                       data-filter-tags="application intel introduction">
                                        <span class="nav-link-text"
                                              data-i18n="nav.application_intel_introduction">Introduction</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="intel_privacy.html" title="Privacy"
                                       data-filter-tags="application intel privacy">
                                        <span class="nav-link-text"
                                              data-i18n="nav.application_intel_privacy">Privacy</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="Theme Settings" data-filter-tags="theme settings">
                                <i class="fal fa-cog"></i>
                                <span class="nav-link-text" data-i18n="nav.theme_settings">Theme Settings</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="settings_how_it_works.html" title="How it works"
                                       data-filter-tags="theme settings how it works">
                                        <span class="nav-link-text" data-i18n="nav.theme_settings_how_it_works">
                                            How it
                                            works
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="settings_layout_options.html" title="Layout Options"
                                       data-filter-tags="theme settings layout options">
                                        <span class="nav-link-text" data-i18n="nav.theme_settings_layout_options">
                                            Layout
                                            Options
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="settings_theme_modes.html" title="Theme Modes (beta)"
                                       data-filter-tags="theme settings theme modes (beta)">
                                        <span class="nav-link-text"
                                              data-i18n="nav.theme_settings_theme_modes_(beta)">Theme Modes (beta)</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="settings_skin_options.html" title="Skin Options"
                                       data-filter-tags="theme settings skin options">
                                        <span class="nav-link-text" data-i18n="nav.theme_settings_skin_options">
                                            Skin
                                            Options
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="settings_saving_db.html" title="Saving to Database"
                                       data-filter-tags="theme settings saving to database">
                                        <span class="nav-link-text"
                                              data-i18n="nav.theme_settings_saving_to_database">Saving to Database</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="Documentation" data-filter-tags="documentation">
                                <i class="fal fa-book"></i>
                                <span class="nav-link-text" data-i18n="nav.documentation">Documentation</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="docs_general.html" title="General Docs"
                                       data-filter-tags="documentation general docs">
                                        <span class="nav-link-text" data-i18n="nav.documentation_general_docs">
                                            General
                                            Docs
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="docs_project_structure.html" title="Project Structure"
                                       data-filter-tags="documentation project structure">
                                        <span class="nav-link-text"
                                              data-i18n="nav.documentation_project_structure">Project Structure</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="docs_flavors_editions.html" title="Flavors & Editions"
                                       data-filter-tags="documentation flavors & editions">
                                        <span class="nav-link-text"
                                              data-i18n="nav.documentation_flavors_&_editions">Flavors & Editions</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="docs_community_support.html" title="Community Support"
                                       data-filter-tags="documentation community support">
                                        <span class="nav-link-text"
                                              data-i18n="nav.documentation_community_support">Community Support</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="docs_premium_support.html" title="Premium Support"
                                       data-filter-tags="documentation premium support">
                                        <span class="nav-link-text"
                                              data-i18n="nav.documentation_premium_support">Premium Support</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="docs_licensing.html" title="Licensing"
                                       data-filter-tags="documentation licensing">
                                        <span class="nav-link-text"
                                              data-i18n="nav.documentation_licensing">Licensing</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="docs_buildnotes.html" title="Build Notes"
                                       data-filter-tags="documentation build notes">
                                        <span class="nav-link-text" data-i18n="nav.documentation_build_notes">
                                            Build
                                            Notes
                                        </span>
                                        <span class="">v4.5.1</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-title">Tools & Components</li>
                        <li>
                            <a href="#" title="UI Components" data-filter-tags="ui components">
                                <i class="fal fa-window"></i>
                                <span class="nav-link-text" data-i18n="nav.ui_components">UI Components</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="ui_alerts.html" title="Alerts" data-filter-tags="ui components alerts">
                                        <span class="nav-link-text" data-i18n="nav.ui_components_alerts">Alerts</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_accordion.html" title="Accordions"
                                       data-filter-tags="ui components accordions">
                                        <span class="nav-link-text"
                                              data-i18n="nav.ui_components_accordions">Accordions</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_badges.html" title="Badges" data-filter-tags="ui components badges">
                                        <span class="nav-link-text" data-i18n="nav.ui_components_badges">Badges</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_breadcrumbs.html" title="Breadcrumbs"
                                       data-filter-tags="ui components breadcrumbs">
                                        <span class="nav-link-text"
                                              data-i18n="nav.ui_components_breadcrumbs">Breadcrumbs</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_buttons.html" title="Buttons" data-filter-tags="ui components buttons">
                                        <span class="nav-link-text" data-i18n="nav.ui_components_buttons">Buttons</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_button_group.html" title="Button Group"
                                       data-filter-tags="ui components button group">
                                        <span class="nav-link-text" data-i18n="nav.ui_components_button_group">
                                            Button
                                            Group
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_cards.html" title="Cards" data-filter-tags="ui components cards">
                                        <span class="nav-link-text" data-i18n="nav.ui_components_cards">Cards</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_carousel.html" title="Carousel"
                                       data-filter-tags="ui components carousel">
                                        <span class="nav-link-text"
                                              data-i18n="nav.ui_components_carousel">Carousel</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_collapse.html" title="Collapse"
                                       data-filter-tags="ui components collapse">
                                        <span class="nav-link-text"
                                              data-i18n="nav.ui_components_collapse">Collapse</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_dropdowns.html" title="Dropdowns"
                                       data-filter-tags="ui components dropdowns">
                                        <span class="nav-link-text"
                                              data-i18n="nav.ui_components_dropdowns">Dropdowns</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_list_filter.html" title="List Filter"
                                       data-filter-tags="ui components list filter">
                                        <span class="nav-link-text" data-i18n="nav.ui_components_list_filter">
                                            List
                                            Filter
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_modal.html" title="Modal" data-filter-tags="ui components modal">
                                        <span class="nav-link-text" data-i18n="nav.ui_components_modal">Modal</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_navbars.html" title="Navbars" data-filter-tags="ui components navbars">
                                        <span class="nav-link-text" data-i18n="nav.ui_components_navbars">Navbars</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_panels.html" title="Panels" data-filter-tags="ui components panels">
                                        <span class="nav-link-text" data-i18n="nav.ui_components_panels">Panels</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_pagination.html" title="Pagination"
                                       data-filter-tags="ui components pagination">
                                        <span class="nav-link-text"
                                              data-i18n="nav.ui_components_pagination">Pagination</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_popovers.html" title="Popovers"
                                       data-filter-tags="ui components popovers">
                                        <span class="nav-link-text"
                                              data-i18n="nav.ui_components_popovers">Popovers</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_progress_bars.html" title="Progress Bars"
                                       data-filter-tags="ui components progress bars">
                                        <span class="nav-link-text" data-i18n="nav.ui_components_progress_bars">
                                            Progress
                                            Bars
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_scrollspy.html" title="ScrollSpy"
                                       data-filter-tags="ui components scrollspy">
                                        <span class="nav-link-text"
                                              data-i18n="nav.ui_components_scrollspy">ScrollSpy</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_side_panel.html" title="Side Panel"
                                       data-filter-tags="ui components side panel">
                                        <span class="nav-link-text" data-i18n="nav.ui_components_side_panel">
                                            Side
                                            Panel
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_spinners.html" title="Spinners"
                                       data-filter-tags="ui components spinners">
                                        <span class="nav-link-text"
                                              data-i18n="nav.ui_components_spinners">Spinners</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_tabs_pills.html" title="Tabs & Pills"
                                       data-filter-tags="ui components tabs & pills">
                                        <span class="nav-link-text" data-i18n="nav.ui_components_tabs_&_pills">
                                            Tabs &
                                            Pills
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_toasts.html" title="Toasts" data-filter-tags="ui components toasts">
                                        <span class="nav-link-text" data-i18n="nav.ui_components_toasts">Toasts</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="ui_tooltips.html" title="Tooltips"
                                       data-filter-tags="ui components tooltips">
                                        <span class="nav-link-text"
                                              data-i18n="nav.ui_components_tooltips">Tooltips</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="Utilities" data-filter-tags="utilities">
                                <i class="fal fa-bolt"></i>
                                <span class="nav-link-text" data-i18n="nav.utilities">Utilities</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="utilities_borders.html" title="Borders"
                                       data-filter-tags="utilities borders">
                                        <span class="nav-link-text" data-i18n="nav.utilities_borders">Borders</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="utilities_clearfix.html" title="Clearfix"
                                       data-filter-tags="utilities clearfix">
                                        <span class="nav-link-text" data-i18n="nav.utilities_clearfix">Clearfix</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="utilities_color_pallet.html" title="Color Pallet"
                                       data-filter-tags="utilities color pallet">
                                        <span class="nav-link-text" data-i18n="nav.utilities_color_pallet">
                                            Color
                                            Pallet
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="utilities_display_property.html" title="Display Property"
                                       data-filter-tags="utilities display property">
                                        <span class="nav-link-text" data-i18n="nav.utilities_display_property">
                                            Display
                                            Property
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="utilities_fonts.html" title="Fonts" data-filter-tags="utilities fonts">
                                        <span class="nav-link-text" data-i18n="nav.utilities_fonts">Fonts</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="utilities_flexbox.html" title="Flexbox"
                                       data-filter-tags="utilities flexbox">
                                        <span class="nav-link-text" data-i18n="nav.utilities_flexbox">Flexbox</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="utilities_helpers.html" title="Helpers"
                                       data-filter-tags="utilities helpers">
                                        <span class="nav-link-text" data-i18n="nav.utilities_helpers">Helpers</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="utilities_position.html" title="Position"
                                       data-filter-tags="utilities position">
                                        <span class="nav-link-text" data-i18n="nav.utilities_position">Position</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="utilities_responsive_grid.html" title="Responsive Grid"
                                       data-filter-tags="utilities responsive grid">
                                        <span class="nav-link-text" data-i18n="nav.utilities_responsive_grid">
                                            Responsive
                                            Grid
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="utilities_sizing.html" title="Sizing" data-filter-tags="utilities sizing">
                                        <span class="nav-link-text" data-i18n="nav.utilities_sizing">Sizing</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="utilities_spacing.html" title="Spacing"
                                       data-filter-tags="utilities spacing">
                                        <span class="nav-link-text" data-i18n="nav.utilities_spacing">Spacing</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="utilities_typography.html" title="Typography"
                                       data-filter-tags="utilities typography fonts headings bold lead colors sizes link text states list styles truncate alignment">
                                        <span class="nav-link-text"
                                              data-i18n="nav.utilities_typography">Typography</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" title="Menu child"
                                       data-filter-tags="utilities menu child">
                                        <span class="nav-link-text" data-i18n="nav.utilities_menu_child">
                                            Menu
                                            child
                                        </span>
                                    </a>
                                    <ul>
                                        <li>
                                            <a href="javascript:void(0);" title="Sublevel Item"
                                               data-filter-tags="utilities menu child sublevel item">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.utilities_menu_child_sublevel_item">
                                                    Sublevel
                                                    Item
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0);" title="Another Item"
                                               data-filter-tags="utilities menu child another item">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.utilities_menu_child_another_item">
                                                    Another
                                                    Item
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="disabled">
                                    <a href="javascript:void(0);" title="Disabled item"
                                       data-filter-tags="utilities disabled item">
                                        <span class="nav-link-text" data-i18n="nav.utilities_disabled_item">
                                            Disabled
                                            item
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="Font Icons" data-filter-tags="font icons">
                                <i class="fal fa-map-marker-alt"></i>
                                <span class="nav-link-text" data-i18n="nav.font_icons">Font Icons</span>
                                <span class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">7,500+</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="javascript:void(0);" title="FontAwesome"
                                       data-filter-tags="font icons fontawesome">
                                        <span class="nav-link-text" data-i18n="nav.font_icons_fontawesome">
                                            FontAwesome
                                            Pro
                                        </span>
                                    </a>
                                    <ul>
                                        <li>
                                            <a href="icons_fontawesome_light.html" title="Light"
                                               data-filter-tags="font icons fontawesome light">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.font_icons_fontawesome_light">Light</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="icons_fontawesome_regular.html" title="Regular"
                                               data-filter-tags="font icons fontawesome regular">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.font_icons_fontawesome_regular">Regular</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="icons_fontawesome_solid.html" title="Solid"
                                               data-filter-tags="font icons fontawesome solid">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.font_icons_fontawesome_solid">Solid</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="icons_fontawesome_duotone.html" title="Duotone"
                                               data-filter-tags="font icons fontawesome duotone">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.font_icons_fontawesome_duotone">Duotone</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="icons_fontawesome_brand.html" title="Brand"
                                               data-filter-tags="font icons fontawesome brand">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.font_icons_fontawesome_brand">Brand</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" title="NextGen Icons"
                                       data-filter-tags="font icons nextgen icons">
                                        <span class="nav-link-text" data-i18n="nav.font_icons_nextgen_icons">
                                            NextGen
                                            Icons
                                        </span>
                                    </a>
                                    <ul>
                                        <li>
                                            <a href="icons_nextgen_general.html" title="General"
                                               data-filter-tags="font icons nextgen icons general">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.font_icons_nextgen_icons_general">General</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="icons_nextgen_base.html" title="Base"
                                               data-filter-tags="font icons nextgen icons base">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.font_icons_nextgen_icons_base">Base</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" title="Stack Icons"
                                       data-filter-tags="font icons stack icons">
                                        <span class="nav-link-text" data-i18n="nav.font_icons_stack_icons">
                                            Stack
                                            Icons
                                        </span>
                                    </a>
                                    <ul>
                                        <li>
                                            <a href="icons_stack_showcase.html" title="Showcase"
                                               data-filter-tags="font icons stack icons showcase">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.font_icons_stack_icons_showcase">Showcase</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="icons_stack_generate.html?layers=3" title="Generate Stack"
                                               data-filter-tags="font icons stack icons generate stack">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.font_icons_stack_icons_generate_stack">
                                                    Generate
                                                    Stack
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="Tables" data-filter-tags="tables">
                                <i class="fal fa-th-list"></i>
                                <span class="nav-link-text" data-i18n="nav.tables">Tables</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="tables_basic.html" title="Basic Tables"
                                       data-filter-tags="tables basic tables">
                                        <span class="nav-link-text" data-i18n="nav.tables_basic_tables">
                                            Basic
                                            Tables
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="tables_generate_style.html" title="Generate Table Style"
                                       data-filter-tags="tables generate table style">
                                        <span class="nav-link-text" data-i18n="nav.tables_generate_table_style">
                                            Generate
                                            Table Style
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="Form Stuff" data-filter-tags="form stuff">
                                <i class="fal fa-edit"></i>
                                <span class="nav-link-text" data-i18n="nav.form_stuff">Form Stuff</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="form_basic_inputs.html" title="Basic Inputs"
                                       data-filter-tags="form stuff basic inputs">
                                        <span class="nav-link-text" data-i18n="nav.form_stuff_basic_inputs">
                                            Basic
                                            Inputs
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_checkbox_radio.html" title="Checkbox & Radio"
                                       data-filter-tags="form stuff checkbox & radio">
                                        <span class="nav-link-text" data-i18n="nav.form_stuff_checkbox_&_radio">
                                            Checkbox
                                            & Radio
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_input_groups.html" title="Input Groups"
                                       data-filter-tags="form stuff input groups">
                                        <span class="nav-link-text" data-i18n="nav.form_stuff_input_groups">
                                            Input
                                            Groups
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_validation.html" title="Validation"
                                       data-filter-tags="form stuff validation">
                                        <span class="nav-link-text"
                                              data-i18n="nav.form_stuff_validation">Validation</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-title">Plugins & Addons</li>
                        <li>
                            <a href="#" title="Plugins" data-filter-tags="plugins">
                                <i class="fal fa-shield-alt"></i>
                                <span class="nav-link-text" data-i18n="nav.plugins">Core Plugins</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="plugins_faq.html" title="Plugins FAQ"
                                       data-filter-tags="plugins plugins faq">
                                        <span class="nav-link-text" data-i18n="nav.plugins_plugins_faq">
                                            Plugins
                                            FAQ
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="plugins_waves.html" title="Waves" data-filter-tags="plugins waves">
                                        <span class="nav-link-text" data-i18n="nav.plugins_waves">Waves</span>
                                        <span class="dl-ref label bg-primary-400 ml-2">9 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="plugins_pacejs.html" title="PaceJS" data-filter-tags="plugins pacejs">
                                        <span class="nav-link-text" data-i18n="nav.plugins_pacejs">PaceJS</span>
                                        <span class="dl-ref label bg-primary-500 ml-2">13 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="plugins_smartpanels.html" title="SmartPanels"
                                       data-filter-tags="plugins smartpanels">
                                        <span class="nav-link-text"
                                              data-i18n="nav.plugins_smartpanels">SmartPanels</span>
                                        <span class="dl-ref label bg-primary-600 ml-2">9 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="plugins_bootbox.html" title="BootBox"
                                       data-filter-tags="plugins bootbox alert sound">
                                        <span class="nav-link-text" data-i18n="nav.plugins_bootbox">BootBox</span>
                                        <span class="dl-ref label bg-primary-600 ml-2">15 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="plugins_slimscroll.html" title="Slimscroll"
                                       data-filter-tags="plugins slimscroll">
                                        <span class="nav-link-text" data-i18n="nav.plugins_slimscroll">Slimscroll</span>
                                        <span class="dl-ref label bg-primary-700 ml-2">5 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="plugins_throttle.html" title="Throttle"
                                       data-filter-tags="plugins throttle">
                                        <span class="nav-link-text" data-i18n="nav.plugins_throttle">Throttle</span>
                                        <span class="dl-ref label bg-primary-700 ml-2">1 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="plugins_navigation.html" title="Navigation"
                                       data-filter-tags="plugins navigation">
                                        <span class="nav-link-text" data-i18n="nav.plugins_navigation">Navigation</span>
                                        <span class="dl-ref label bg-primary-700 ml-2">2 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="plugins_i18next.html" title="i18next" data-filter-tags="plugins i18next">
                                        <span class="nav-link-text" data-i18n="nav.plugins_i18next">i18next</span>
                                        <span class="dl-ref label bg-primary-700 ml-2">10 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="plugins_appcore.html" title="App.Core" data-filter-tags="plugins app.core">
                                        <span class="nav-link-text" data-i18n="nav.plugins_app.core">App.Core</span>
                                        <span class="dl-ref label bg-success-700 ml-2">14 KB</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="Datatables" data-filter-tags="datatables datagrid">
                                <i class="fal fa-table"></i>
                                <span class="nav-link-text" data-i18n="nav.datatables">Datatables</span>
                                <span class="dl-ref bg-primary-500 hidden-nav-function-minify hidden-nav-function-top">
                                    235
                                    KB
                                </span>
                            </a>
                            <ul>
                                <li>
                                    <a href="datatables_basic.html" title="Basic"
                                       data-filter-tags="datatables datagrid basic">
                                        <span class="nav-link-text" data-i18n="nav.datatables_basic">Basic</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_autofill.html" title="Autofill"
                                       data-filter-tags="datatables datagrid autofill">
                                        <span class="nav-link-text" data-i18n="nav.datatables_autofill">Autofill</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_buttons.html" title="Buttons"
                                       data-filter-tags="datatables datagrid buttons">
                                        <span class="nav-link-text" data-i18n="nav.datatables_buttons">Buttons</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_export.html" title="Export"
                                       data-filter-tags="datatables datagrid export tables pdf excel print csv">
                                        <span class="nav-link-text" data-i18n="nav.datatables_export">Export</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_colreorder.html" title="ColReorder"
                                       data-filter-tags="datatables datagrid colreorder">
                                        <span class="nav-link-text"
                                              data-i18n="nav.datatables_colreorder">ColReorder</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_columnfilter.html" title="ColumnFilter"
                                       data-filter-tags="datatables datagrid columnfilter">
                                        <span class="nav-link-text"
                                              data-i18n="nav.datatables_columnfilter">ColumnFilter</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_fixedcolumns.html" title="FixedColumns"
                                       data-filter-tags="datatables datagrid fixedcolumns">
                                        <span class="nav-link-text"
                                              data-i18n="nav.datatables_fixedcolumns">FixedColumns</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_fixedheader.html" title="FixedHeader"
                                       data-filter-tags="datatables datagrid fixedheader">
                                        <span class="nav-link-text"
                                              data-i18n="nav.datatables_fixedheader">FixedHeader</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_keytable.html" title="KeyTable"
                                       data-filter-tags="datatables datagrid keytable">
                                        <span class="nav-link-text" data-i18n="nav.datatables_keytable">KeyTable</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_responsive.html" title="Responsive"
                                       data-filter-tags="datatables datagrid responsive">
                                        <span class="nav-link-text"
                                              data-i18n="nav.datatables_responsive">Responsive</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_responsive_alt.html" title="Responsive Alt"
                                       data-filter-tags="datatables datagrid responsive alt">
                                        <span class="nav-link-text" data-i18n="nav.datatables_responsive_alt">
                                            Responsive
                                            Alt
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_rowgroup.html" title="RowGroup"
                                       data-filter-tags="datatables datagrid rowgroup">
                                        <span class="nav-link-text" data-i18n="nav.datatables_rowgroup">RowGroup</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_rowreorder.html" title="RowReorder"
                                       data-filter-tags="datatables datagrid rowreorder">
                                        <span class="nav-link-text"
                                              data-i18n="nav.datatables_rowreorder">RowReorder</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_scroller.html" title="Scroller"
                                       data-filter-tags="datatables datagrid scroller">
                                        <span class="nav-link-text" data-i18n="nav.datatables_scroller">Scroller</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_select.html" title="Select"
                                       data-filter-tags="datatables datagrid select">
                                        <span class="nav-link-text" data-i18n="nav.datatables_select">Select</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="datatables_alteditor.html" title="AltEditor"
                                       data-filter-tags="datatables datagrid alteditor">
                                        <span class="nav-link-text"
                                              data-i18n="nav.datatables_alteditor">AltEditor</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="Statistics" data-filter-tags="statistics chart graphs">
                                <i class="fal fa-chart-pie"></i>
                                <span class="nav-link-text" data-i18n="nav.statistics">Statistics</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="statistics_flot.html" title="Flot"
                                       data-filter-tags="statistics chart graphs flot bar pie">
                                        <span class="nav-link-text" data-i18n="nav.statistics_flot">Flot</span>
                                        <span class="dl-ref label bg-primary-500 ml-2">36 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="statistics_chartjs.html" title="Chart.js"
                                       data-filter-tags="statistics chart graphs chart.js bar pie">
                                        <span class="nav-link-text" data-i18n="nav.statistics_chart.js">Chart.js</span>
                                        <span class="dl-ref label bg-primary-500 ml-2">205 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="statistics_chartist.html" title="Chartist.js"
                                       data-filter-tags="statistics chart graphs chartist.js">
                                        <span class="nav-link-text"
                                              data-i18n="nav.statistics_chartist.js">Chartist.js</span>
                                        <span class="dl-ref label bg-primary-600 ml-2">39 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="statistics_c3.html" title="C3 Charts"
                                       data-filter-tags="statistics chart graphs c3 charts">
                                        <span class="nav-link-text" data-i18n="nav.statistics_c3_charts">
                                            C3
                                            Charts
                                        </span>
                                        <span class="dl-ref label bg-primary-600 ml-2">197 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="statistics_peity.html" title="Peity"
                                       data-filter-tags="statistics chart graphs peity small">
                                        <span class="nav-link-text" data-i18n="nav.statistics_peity">Peity</span>
                                        <span class="dl-ref label bg-primary-700 ml-2">4 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="statistics_sparkline.html" title="Sparkline"
                                       data-filter-tags="statistics chart graphs sparkline small tiny">
                                        <span class="nav-link-text"
                                              data-i18n="nav.statistics_sparkline">Sparkline</span>
                                        <span class="dl-ref label bg-primary-700 ml-2">42 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="statistics_easypiechart.html" title="Easy Pie Chart"
                                       data-filter-tags="statistics chart graphs easy pie chart">
                                        <span class="nav-link-text" data-i18n="nav.statistics_easy_pie_chart">
                                            Easy Pie
                                            Chart
                                        </span>
                                        <span class="dl-ref label bg-primary-700 ml-2">4 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="statistics_dygraph.html" title="Dygraph"
                                       data-filter-tags="statistics chart graphs dygraph complex">
                                        <span class="nav-link-text" data-i18n="nav.statistics_dygraph">Dygraph</span>
                                        <span class="dl-ref label bg-primary-700 ml-2">120 KB</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="Notifications" data-filter-tags="notifications">
                                <i class="fal fa-exclamation-circle"></i>
                                <span class="nav-link-text" data-i18n="nav.notifications">Notifications</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="notifications_sweetalert2.html" title="SweetAlert2"
                                       data-filter-tags="notifications sweetalert2">
                                        <span class="nav-link-text"
                                              data-i18n="nav.notifications_sweetalert2">SweetAlert2</span>
                                        <span class="dl-ref label bg-primary-500 ml-2">40 KB</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="notifications_toastr.html" title="Toastr"
                                       data-filter-tags="notifications toastr">
                                        <span class="nav-link-text" data-i18n="nav.notifications_toastr">Toastr</span>
                                        <span class="dl-ref label bg-primary-600 ml-2">5 KB</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="Form Plugins" data-filter-tags="form plugins">
                                <i class="fal fa-credit-card-front"></i>
                                <span class="nav-link-text" data-i18n="nav.form_plugins">Form Plugins</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="form_plugins_colorpicker.html" title="Color Picker"
                                       data-filter-tags="form plugins color picker">
                                        <span class="nav-link-text" data-i18n="nav.form_plugins_color_picker">
                                            Color
                                            Picker
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_plugins_datepicker.html" title="Date Picker"
                                       data-filter-tags="form plugins date picker">
                                        <span class="nav-link-text" data-i18n="nav.form_plugins_date_picker">
                                            Date
                                            Picker
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_plugins_daterange_picker.html" title="Date Range Picker"
                                       data-filter-tags="form plugins date range picker">
                                        <span class="nav-link-text" data-i18n="nav.form_plugins_date_range_picker">
                                            Date
                                            Range Picker
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_plugins_dropzone.html" title="Dropzone"
                                       data-filter-tags="form plugins dropzone">
                                        <span class="nav-link-text"
                                              data-i18n="nav.form_plugins_dropzone">Dropzone</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_plugins_ionrangeslider.html" title="Ion.RangeSlider"
                                       data-filter-tags="form plugins ion.rangeslider">
                                        <span class="nav-link-text"
                                              data-i18n="nav.form_plugins_ion.rangeslider">Ion.RangeSlider</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_plugins_inputmask.html" title="Inputmask"
                                       data-filter-tags="form plugins inputmask">
                                        <span class="nav-link-text"
                                              data-i18n="nav.form_plugins_inputmask">Inputmask</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_plugins_imagecropper.html" title="Image Cropper"
                                       data-filter-tags="form plugins image cropper">
                                        <span class="nav-link-text" data-i18n="nav.form_plugins_image_cropper">
                                            Image
                                            Cropper
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_plugins_select2.html" title="Select2"
                                       data-filter-tags="form plugins select2">
                                        <span class="nav-link-text" data-i18n="nav.form_plugins_select2">Select2</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="form_plugins_summernote.html" title="Summernote"
                                       data-filter-tags="form plugins summernote texteditor editor">
                                        <span class="nav-link-text"
                                              data-i18n="nav.form_plugins_summernote">Summernote</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="Miscellaneous" data-filter-tags="miscellaneous">
                                <i class="fal fa-globe"></i>
                                <span class="nav-link-text" data-i18n="nav.miscellaneous">Miscellaneous</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="miscellaneous_fullcalendar.html" title="FullCalendar"
                                       data-filter-tags="miscellaneous fullcalendar">
                                        <span class="nav-link-text"
                                              data-i18n="nav.miscellaneous_fullcalendar">FullCalendar</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="miscellaneous_lightgallery.html" title="Light Gallery"
                                       data-filter-tags="miscellaneous light gallery">
                                        <span class="nav-link-text" data-i18n="nav.miscellaneous_light_gallery">
                                            Light
                                            Gallery
                                        </span>
                                        <span class="dl-ref label bg-primary-500 ml-2">61 KB</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-title">Layouts & Apps</li>
                        <li>
                            <a href="#" title="Pages" data-filter-tags="pages">
                                <i class="fal fa-plus-circle"></i>
                                <span class="nav-link-text" data-i18n="nav.pages">Page Views</span>
                            </a>
                            <ul>
                                <li>
                                    <a href="page_chat.html" title="Chat" data-filter-tags="pages chat">
                                        <span class="nav-link-text" data-i18n="nav.pages_chat">Chat</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="page_contacts.html" title="Contacts" data-filter-tags="pages contacts">
                                        <span class="nav-link-text" data-i18n="nav.pages_contacts">Contacts</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" title="Forum" data-filter-tags="pages forum">
                                        <span class="nav-link-text" data-i18n="nav.pages_forum">Forum</span>
                                    </a>
                                    <ul>
                                        <li>
                                            <a href="page_forum_list.html" title="List"
                                               data-filter-tags="pages forum list">
                                                <span class="nav-link-text" data-i18n="nav.pages_forum_list">List</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="page_forum_threads.html" title="Threads"
                                               data-filter-tags="pages forum threads">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.pages_forum_threads">Threads</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="page_forum_discussion.html" title="Discussion"
                                               data-filter-tags="pages forum discussion">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.pages_forum_discussion">Discussion</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" title="Inbox" data-filter-tags="pages inbox">
                                        <span class="nav-link-text" data-i18n="nav.pages_inbox">Inbox</span>
                                    </a>
                                    <ul>
                                        <li>
                                            <a href="page_inbox_general.html" title="General"
                                               data-filter-tags="pages inbox general">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.pages_inbox_general">General</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="page_inbox_read.html" title="Read"
                                               data-filter-tags="pages inbox read">
                                                <span class="nav-link-text" data-i18n="nav.pages_inbox_read">Read</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="page_inbox_write.html" title="Write"
                                               data-filter-tags="pages inbox write">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.pages_inbox_write">Write</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="page_invoice.html" title="Invoice (printable)"
                                       data-filter-tags="pages invoice (printable)">
                                        <span class="nav-link-text" data-i18n="nav.pages_invoice_(printable)">
                                            Invoice
                                            (printable)
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" title="Authentication"
                                       data-filter-tags="pages authentication">
                                        <span class="nav-link-text"
                                              data-i18n="nav.pages_authentication">Authentication</span>
                                    </a>
                                    <ul>
                                        <li>
                                            <a href="page_forget.html" title="Forget Password"
                                               data-filter-tags="pages authentication forget password">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.pages_authentication_forget_password">
                                                    Forget
                                                    Password
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="page_locked.html" title="Locked Screen"
                                               data-filter-tags="pages authentication locked screen">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.pages_authentication_locked_screen">
                                                    Locked
                                                    Screen
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="page_login.html" title="Login"
                                               data-filter-tags="pages authentication login">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.pages_authentication_login">Login</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="page_login_alt.html" title="Login Alt"
                                               data-filter-tags="pages authentication login alt">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.pages_authentication_login_alt">Login Alt</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="page_register.html" title="Register"
                                               data-filter-tags="pages authentication register">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.pages_authentication_register">Register</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="page_confirmation.html" title="Confirmation"
                                               data-filter-tags="pages authentication confirmation">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.pages_authentication_confirmation">Confirmation</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" title="Error Pages"
                                       data-filter-tags="pages error pages">
                                        <span class="nav-link-text" data-i18n="nav.pages_error_pages">Error Pages</span>
                                    </a>
                                    <ul>
                                        <li>
                                            <a href="page_error.html" title="General Error"
                                               data-filter-tags="pages error pages general error">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.pages_error_pages_general_error">General Error</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="page_error_404.html" title="Server Error"
                                               data-filter-tags="pages error pages server error">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.pages_error_pages_server_error">Server Error</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="page_error_announced.html" title="Announced Error"
                                               data-filter-tags="pages error pages announced error">
                                                <span class="nav-link-text"
                                                      data-i18n="nav.pages_error_pages_announced_error">
                                                    Announced
                                                    Error
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="page_profile.html" title="Profile" data-filter-tags="pages profile">
                                        <span class="nav-link-text" data-i18n="nav.pages_profile">Profile</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="page_projects.html" title="Projects" data-filter-tags="pages projects">
                                        <span class="nav-link-text" data-i18n="nav.pages_projects">Projects</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="page_search.html" title="Search Results"
                                       data-filter-tags="pages search results">
                                        <span class="nav-link-text" data-i18n="nav.pages_search_results">
                                            Search
                                            Results
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <div class="filter-message js-filter-message bg-success-600"></div>
                </nav>
                <!-- END PRIMARY NAVIGATION -->
                <!-- NAV FOOTER -->
                <div class="nav-footer shadow-top">
                    <a href="#" onclick="return false;" data-action="toggle" data-class="nav-function-minify"
                       class="hidden-md-down">
                        <i class="ni ni-chevron-right"></i>
                        <i class="ni ni-chevron-right"></i>
                    </a>
                    <ul class="list-table m-auto nav-footer-buttons">
                        <li>
                            <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Chat logs">
                                <i class="fal fa-comments"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top"
                               title="Support Chat">
                                <i class="fal fa-life-ring"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" data-toggle="tooltip" data-placement="top"
                               title="Make a call">
                                <i class="fal fa-phone"></i>
                            </a>
                        </li>
                    </ul>
                </div> <!-- END NAV FOOTER -->
            </aside>
            <!-- END Left Aside -->
            <div class="page-content-wrapper">
                <!-- BEGIN Page Header -->
                <header class="page-header" role="banner">
                    <!-- we need this logo when user switches to nav-function-top -->
                    <div class="page-logo">
                        <a href="#" class="page-logo-link press-scale-down d-flex align-items-center position-relative"
                           data-toggle="modal" data-target="#modal-shortcut">
                            <img src="img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">

                            <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>
            <span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
            <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
                        </a>

                    </div>
                    <!-- DOC: nav menu layout change shortcut -->
                    <div class="hidden-md-down dropdown-icon-menu position-relative">
                        <a href="#" class="header-btn btn js-waves-off" data-action="toggle"
                           data-class="nav-function-hidden" title="Hide Navigation">
                            <i class="ni ni-menu"></i>
                        </a>
                        <ul>
                            <li>
                                <a href="#" class="btn js-waves-off" data-action="toggle"
                                   data-class="nav-function-minify" title="Minify Navigation">
                                    <i class="ni ni-minify-nav"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="btn js-waves-off" data-action="toggle"
                                   data-class="nav-function-fixed" title="Lock Navigation">
                                    <i class="ni ni-lock-nav"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- DOC: mobile button appears during mobile width -->
                    <div class="hidden-lg-up">
                        <a href="#" class="header-btn btn press-scale-down" data-action="toggle"
                           data-class="mobile-nav-on">
                            <i class="ni ni-menu"></i>
                        </a>
                    </div>

                    <div class="dropdown">
                        <a class="dropdown-toggle" href="javascript:;" role="button" id="buiActDrop"
                           data-target="buiList" data-toggle="dropdown" aria-haspopup="true">

                        </a>
                        <div id="buiList" class="dropdown-menu dropdown-select-menu js-auto-close">

                        </div>
                    </div>

                    <div class="ml-auto d-flex">
                        <div class="btn-group mx-4">
                            <a href="javascript:;" name="topFunBtn" data-page="dashboard" class="text-center">
                                <i class="fal fa-home fa-2x"></i><br>首頁
                            </a>
                            <!--<div class="dropdown-menu">
                <button class="dropdown-item" type="button">Action</button>
                <button class="dropdown-item" type="button">Another action</button>
                <button class="dropdown-item" type="button">Something else here</button>
            </div>-->
                        </div>
                        <div class="btn-group mx-4">
                            <a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown"
                               aria-haspopup="true" aria-expanded="false">
                                <i class="fal fa-tv fa-2x"></i><br>系統監控
                            </a>
                            <div class="dropdown-menu dropdown-select-menu js-auto-close" id="sysMonBtnList">
                                <!--<button class="dropdown-item" type="button" name="sysMonBtn">電錶</button>
                <button class="dropdown-item" type="button" name="sysMonBtn">照明系統</button>
                <button class="dropdown-item" type="button" name="sysMonBtn">電梯系統</button>
                <button class="dropdown-item" type="button" name="sysMonBtn">環境感測</button>
                <button class="dropdown-item" type="button" name="sysMonBtn">空調系統</button>-->
                            </div>
                        </div>
                        <div class="btn-group mx-4">
                            <a href="javascript:;" name="topFunBtn" class="dropdown-toggle no-arrow text-center"
                               data-page="historyData">
                                <i class="fal fa-chart-area fa-2x"></i><br>歷史資料
                            </a>
                        </div>
                        <div class="btn-group mx-4">
                            <a href="javascript:;" class="dropdown-toggle no-arrow text-center blink"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fal fa-bell fa-2x"></i><br>即時告警
                            </a>
                        </div>
                        <div class="btn-group mx-4">
                            <a href="javascript:;" name="topFunBtn" class="no-arrow text-center"
                               data-page="operation">
                                <i class="fal fa-server fa-2x"></i><br>運維管理
                            </a>
                        </div>
                        <div class="btn-group mx-4">
                            <a href="javascript:;" name="topFunBtn" class="no-arrow text-center"
                               data-page="graphManagement">
                                <i class="fal fa-image fa-2x"></i><br>圖資管理
                            </a>
                        </div>
                        <div class="btn-group mx-4">
                            <a href="javascript:;" name="topFunBtn" class="no-arrow text-center"
                               data-page="accountManagement">
                                <i class="fal fa-user fa-2x"></i><br>帳號管理
                            </a>
                        </div>

                    </div>
                    <div class="ml-auto d-flex">

                        <!-- app user menu -->
                        <div>
                            <a href="#" data-toggle="dropdown" title="drlantern@gotbootstrap.com"
                               class="header-icon d-flex align-items-center justify-content-center ml-2">
                                <img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
                                     alt="Dr. Codex Lantern">
                                <!-- you can also add username next to the avatar with the codes below:
                <span class="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
                <i class="ni ni-chevron-down hidden-xs-down"></i> -->
                            </a>
                            <div class="dropdown-menu dropdown-menu-animated dropdown-lg">
                                
                                <a id="logout" href="javascript:;" class="dropdown-item fw-500 pt-3 pb-3">
                                    <span>登出</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="ml-2 text-center">
                        <label class="mb-0 fs-1-2">Diamond Controls<span class="fs-09 position-absolute">®</span></label><br>
                        <label class="mb-0 fs-1-1">智慧大樓管理平台</label>
                    </div>
                </header>
                <!-- END Page Header -->
                <!-- BEGIN Page Content -->
                <!-- the #js-page-content id is needed for some plugins to initialize -->
                <!--@RenderBody()-->
                <div id="app">

                </div>

                <!-- this overlay is activated only when mobile menu is triggered -->
                <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
                <!-- END Page Content -->
                <!-- BEGIN Page Footer -->
                <!--<footer class="page-footer" role="contentinfo">
                    <div class="d-flex align-items-center flex-1 text-muted">
                        <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
                    </div>
                    <div>
                        <ul class="list-table m-0">
                            <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
                            <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
                            <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
                            <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
                        </ul>
                    </div>
                </footer>-->
                <!-- END Page Footer -->
                <!-- BEGIN Shortcuts -->
                <div class="modal fade modal-backdrop-transparent" id="modal-shortcut" tabindex="-1" role="dialog"
                     aria-labelledby="modal-shortcut" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-top modal-transparent" role="document">
                        <div class="modal-content">
                            <div class="modal-body">
                                <ul class="app-list w-auto h-auto p-0 text-left">
                                    <li>
                                        <a href="intel_introduction.html" class="app-list-item text-white border-0 m-0">
                                            <div class="icon-stack">
                                                <i class="base base-7 icon-stack-3x opacity-100 color-primary-500 "></i>
                                                <i class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
                                                <i class="fal fa-home icon-stack-1x opacity-100 color-white"></i>
                                            </div>
                                            <span class="app-list-name">
                                                Home
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="page_inbox_general.html" class="app-list-item text-white border-0 m-0">
                                            <div class="icon-stack">
                                                <i class="base base-7 icon-stack-3x opacity-100 color-success-500 "></i>
                                                <i class="base base-7 icon-stack-2x opacity-100 color-success-300 "></i>
                                                <i class="ni ni-envelope icon-stack-1x text-white"></i>
                                            </div>
                                            <span class="app-list-name">
                                                Inbox
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="intel_introduction.html" class="app-list-item text-white border-0 m-0">
                                            <div class="icon-stack">
                                                <i class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
                                                <i class="fal fa-plus icon-stack-1x opacity-100 color-white"></i>
                                            </div>
                                            <span class="app-list-name">
                                                Add More
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Shortcuts -->
                <!-- BEGIN Color profile -->
                <!-- this area is hidden and will not be seen on screens or screen readers -->
                <!-- we use this only for CSS color refernce for JS stuff -->
                <p id="js-color-profile" class="d-none">
                    <span class="color-primary-50"></span>
                    <span class="color-primary-100"></span>
                    <span class="color-primary-200"></span>
                    <span class="color-primary-300"></span>
                    <span class="color-primary-400"></span>
                    <span class="color-primary-500"></span>
                    <span class="color-primary-600"></span>
                    <span class="color-primary-700"></span>
                    <span class="color-primary-800"></span>
                    <span class="color-primary-900"></span>
                    <span class="color-info-50"></span>
                    <span class="color-info-100"></span>
                    <span class="color-info-200"></span>
                    <span class="color-info-300"></span>
                    <span class="color-info-400"></span>
                    <span class="color-info-500"></span>
                    <span class="color-info-600"></span>
                    <span class="color-info-700"></span>
                    <span class="color-info-800"></span>
                    <span class="color-info-900"></span>
                    <span class="color-danger-50"></span>
                    <span class="color-danger-100"></span>
                    <span class="color-danger-200"></span>
                    <span class="color-danger-300"></span>
                    <span class="color-danger-400"></span>
                    <span class="color-danger-500"></span>
                    <span class="color-danger-600"></span>
                    <span class="color-danger-700"></span>
                    <span class="color-danger-800"></span>
                    <span class="color-danger-900"></span>
                    <span class="color-warning-50"></span>
                    <span class="color-warning-100"></span>
                    <span class="color-warning-200"></span>
                    <span class="color-warning-300"></span>
                    <span class="color-warning-400"></span>
                    <span class="color-warning-500"></span>
                    <span class="color-warning-600"></span>
                    <span class="color-warning-700"></span>
                    <span class="color-warning-800"></span>
                    <span class="color-warning-900"></span>
                    <span class="color-success-50"></span>
                    <span class="color-success-100"></span>
                    <span class="color-success-200"></span>
                    <span class="color-success-300"></span>
                    <span class="color-success-400"></span>
                    <span class="color-success-500"></span>
                    <span class="color-success-600"></span>
                    <span class="color-success-700"></span>
                    <span class="color-success-800"></span>
                    <span class="color-success-900"></span>
                    <span class="color-fusion-50"></span>
                    <span class="color-fusion-100"></span>
                    <span class="color-fusion-200"></span>
                    <span class="color-fusion-300"></span>
                    <span class="color-fusion-400"></span>
                    <span class="color-fusion-500"></span>
                    <span class="color-fusion-600"></span>
                    <span class="color-fusion-700"></span>
                    <span class="color-fusion-800"></span>
                    <span class="color-fusion-900"></span>
                </p>
                <!-- END Color profile -->
            </div>
        </div>
    </div>
    <!-- END Page Wrapper -->
    <!-- BEGIN Messenger -->
    <div class="modal fade js-modal-messenger modal-backdrop-transparent" tabindex="-1" role="dialog"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-right">
            <div class="modal-content h-100">
                <div class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
                    <div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
                        <span class="mr-2">
                            <span class="rounded-circle profile-image d-block"
                                  style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
                        </span>
                        <div class="info-card-text">
                            <a href="javascript:void(0);" class="fs-lg text-truncate text-truncate-lg text-white"
                               data-toggle="dropdown" aria-expanded="false">
                                Tracey Chang
                                <i class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Send Email</a>
                                <a class="dropdown-item" href="#">Create Appointment</a>
                                <a class="dropdown-item" href="#">Block User</a>
                            </div>
                            <span class="text-truncate text-truncate-md opacity-80">IT Director</span>
                        </div>
                    </div>
                    <button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
                            data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fal fa-times"></i></span>
                    </button>
                </div>
                <div class="modal-body p-0 h-100 d-flex">
                    <!-- BEGIN msgr-list -->
                    <div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
                        <div>
                            <div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
                                <i class="fal fa-search"></i>
                            </div>
                            <input type="text" class="form-control bg-white" id="msgr_listfilter_input"
                                   placeholder="Filter contacts" aria-label="FriendSearch"
                                   data-listfilter="#js-msgr-listfilter">
                        </div>
                        <div class="flex-1 h-100 custom-scroll">
                            <div class="w-100">
                                <ul id="js-msgr-listfilter" class="list-unstyled m-0">
                                    <li>
                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
                                           data-filter-tags="tracey chang online">
                                            <div class="d-table-cell align-middle status status-success status-sm ">
                                                <span class="profile-image-md rounded-circle d-block"
                                                      style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
                                            </div>
                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                <div class="text-truncate text-truncate-md">
                                                    Tracey Chang
                                                    <small class="d-block font-italic text-success fs-xs">
                                                        Online
                                                    </small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
                                           data-filter-tags="oliver kopyuv online">
                                            <div class="d-table-cell align-middle status status-success status-sm ">
                                                <span class="profile-image-md rounded-circle d-block"
                                                      style="background-image:url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
                                            </div>
                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                <div class="text-truncate text-truncate-md">
                                                    Oliver Kopyuv
                                                    <small class="d-block font-italic text-success fs-xs">
                                                        Online
                                                    </small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
                                           data-filter-tags="dr john cook phd away">
                                            <div class="d-table-cell align-middle status status-warning status-sm ">
                                                <span class="profile-image-md rounded-circle d-block"
                                                      style="background-image:url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
                                            </div>
                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                <div class="text-truncate text-truncate-md">
                                                    Dr. John Cook PhD
                                                    <small class="d-block font-italic fs-xs">
                                                        Away
                                                    </small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
                                           data-filter-tags="ali amdaney online">
                                            <div class="d-table-cell align-middle status status-success status-sm ">
                                                <span class="profile-image-md rounded-circle d-block"
                                                      style="background-image:url('img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
                                            </div>
                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                <div class="text-truncate text-truncate-md">
                                                    Ali Amdaney
                                                    <small class="d-block font-italic fs-xs text-success">
                                                        Online
                                                    </small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
                                           data-filter-tags="sarah mcbrook online">
                                            <div class="d-table-cell align-middle status status-success status-sm">
                                                <span class="profile-image-md rounded-circle d-block"
                                                      style="background-image:url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
                                            </div>
                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                <div class="text-truncate text-truncate-md">
                                                    Sarah McBrook
                                                    <small class="d-block font-italic fs-xs text-success">
                                                        Online
                                                    </small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
                                           data-filter-tags="ali amdaney offline">
                                            <div class="d-table-cell align-middle status status-sm">
                                                <span class="profile-image-md rounded-circle d-block"
                                                      style="background-image:url('img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
                                            </div>
                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                <div class="text-truncate text-truncate-md">
                                                    oliver.kopyuv@gotbootstrap.com
                                                    <small class="d-block font-italic fs-xs">
                                                        Offline
                                                    </small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
                                           data-filter-tags="ali amdaney busy">
                                            <div class="d-table-cell align-middle status status-danger status-sm">
                                                <span class="profile-image-md rounded-circle d-block"
                                                      style="background-image:url('img/demo/avatars/avatar-j.png'); background-size: cover;"></span>
                                            </div>
                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                <div class="text-truncate text-truncate-md">
                                                    oliver.kopyuv@gotbootstrap.com
                                                    <small class="d-block font-italic fs-xs text-danger">
                                                        Busy
                                                    </small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
                                           data-filter-tags="ali amdaney offline">
                                            <div class="d-table-cell align-middle status status-sm">
                                                <span class="profile-image-md rounded-circle d-block"
                                                      style="background-image:url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
                                            </div>
                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                <div class="text-truncate text-truncate-md">
                                                    oliver.kopyuv@gotbootstrap.com
                                                    <small class="d-block font-italic fs-xs">
                                                        Offline
                                                    </small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
                                           data-filter-tags="ali amdaney inactive">
                                            <div class="d-table-cell align-middle">
                                                <span class="profile-image-md rounded-circle d-block"
                                                      style="background-image:url('img/demo/avatars/avatar-m.png'); background-size: cover;"></span>
                                            </div>
                                            <div class="d-table-cell w-100 align-middle pl-2 pr-2">
                                                <div class="text-truncate text-truncate-md">
                                                    +714651347790
                                                    <small class="d-block font-italic fs-xs opacity-50">
                                                        Missed Call
                                                    </small>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="filter-message js-filter-message"></div>
                            </div>
                        </div>
                        <div>
                            <a class="fs-xl d-flex align-items-center p-3">
                                <i class="fal fa-cogs"></i>
                            </a>
                        </div>
                    </div>
                    <!-- END msgr-list -->
                    <!-- BEGIN msgr -->
                    <div class="msgr d-flex h-100 flex-column bg-white">
                        <!-- BEGIN custom-scroll -->
                        <div class="custom-scroll flex-1 h-100">
                            <div id="chat_container" class="w-100 p-4">
                                <!-- start .chat-segment -->
                                <div class="chat-segment">
                                    <div class="time-stamp text-center mb-2 fw-400">
                                        Jun 19
                                    </div>
                                </div>
                                <!--  end .chat-segment -->
                                <!-- start .chat-segment -->
                                <div class="chat-segment chat-segment-sent">
                                    <div class="chat-message">
                                        <p>
                                            Hey Tracey, did you get my files?
                                        </p>
                                    </div>
                                    <div class="text-right fw-300 text-muted mt-1 fs-xs">
                                        3:00 pm
                                    </div>
                                </div>
                                <!--  end .chat-segment -->
                                <!-- start .chat-segment -->
                                <div class="chat-segment chat-segment-get">
                                    <div class="chat-message">
                                        <p>
                                            Hi
                                        </p>
                                        <p>
                                            Sorry going through a busy time in office. Yes I analyzed the solution.
                                        </p>
                                        <p>
                                            It will require some resource, which I could not manage.
                                        </p>
                                    </div>
                                    <div class="fw-300 text-muted mt-1 fs-xs">
                                        3:24 pm
                                    </div>
                                </div>
                                <!--  end .chat-segment -->
                                <!-- start .chat-segment -->
                                <div class="chat-segment chat-segment-sent chat-start">
                                    <div class="chat-message">
                                        <p>
                                            Okay
                                        </p>
                                    </div>
                                </div>
                                <!--  end .chat-segment -->
                                <!-- start .chat-segment -->
                                <div class="chat-segment chat-segment-sent chat-end">
                                    <div class="chat-message">
                                        <p>
                                            Sending you some dough today, you can allocate the resources to this
                                            project.
                                        </p>
                                    </div>
                                    <div class="text-right fw-300 text-muted mt-1 fs-xs">
                                        3:26 pm
                                    </div>
                                </div>
                                <!--  end .chat-segment -->
                                <!-- start .chat-segment -->
                                <div class="chat-segment chat-segment-get chat-start">
                                    <div class="chat-message">
                                        <p>
                                            Perfect. Thanks a lot!
                                        </p>
                                    </div>
                                </div>
                                <!--  end .chat-segment -->
                                <!-- start .chat-segment -->
                                <div class="chat-segment chat-segment-get">
                                    <div class="chat-message">
                                        <p>
                                            I will have them ready by tonight.
                                        </p>
                                    </div>
                                </div>
                                <!--  end .chat-segment -->
                                <!-- start .chat-segment -->
                                <div class="chat-segment chat-segment-get chat-end">
                                    <div class="chat-message">
                                        <p>
                                            Cheers
                                        </p>
                                    </div>
                                </div>
                                <!--  end .chat-segment -->
                                <!-- start .chat-segment for timestamp -->
                                <div class="chat-segment">
                                    <div class="time-stamp text-center mb-2 fw-400">
                                        Jun 20
                                    </div>
                                </div>
                                <!--  end .chat-segment for timestamp -->
                            </div>
                        </div>
                        <!-- END custom-scroll  -->
                        <!-- BEGIN msgr__chatinput -->
                        <div class="d-flex flex-column">
                            <div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
                                <div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
                                    <div id="msgr_input" contenteditable="true"
                                         data-placeholder="Type your message here..."
                                         class="height-10 form-content-editable"></div>
                                </div>
                            </div>
                            <div class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
                                <a href="javascript:void(0);" class="btn btn-icon fs-xl width-1 mr-1"
                                   data-toggle="tooltip" data-original-title="More options" data-placement="top">
                                    <i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
                                </a>
                                <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip"
                                   data-original-title="Attach files" data-placement="top">
                                    <i class="fal fa-paperclip color-fusion-300"></i>
                                </a>
                                <a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip"
                                   data-original-title="Insert photo" data-placement="top">
                                    <i class="fal fa-camera color-fusion-300"></i>
                                </a>
                                <div class="ml-auto">
                                    <a href="javascript:void(0);" class="btn btn-info">Send</a>
                                </div>
                            </div>
                        </div>
                        <!-- END msgr__chatinput -->
                    </div>
                    <!-- END msgr -->
                </div>
            </div>
        </div>
    </div>
    <!-- END Messenger -->
    <!-- BEGIN Page Settings -->
    
    <!-- END Page Settings -->
    <!-- base vendor bundle:
         DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
                    + pace.js (recommended)
                    + jquery.js (core)
                    + jquery-ui-cust.js (core)
                    + popper.js (core)
                    + bootstrap.js (core)
                    + slimscroll.js (extension)
                    + app.navigation.js (core)
                    + ba-throttle-debounce.js (core)
                    + waves.js (extension)
                    + smartpanels.js (extension)
                    + src/../jquery-snippets.js (core) -->
    <!-- verdors.bundle.js 已含有 jquery Library v3.5.1-->
    <script src="lib/vendors.bundle.js"></script>
    <!-- toast 第三方套件 若 require 此套件只能用 define 使用,先暫時 html 引用-->
    <script src="lib/notifications/toastr/toastr.min.js"></script>
    <script src="js/toast.js"></script>
    <script src="lib/echarts.min.js"></script>
    <!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
    <script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>



    <!--Bajascript-->
    <script src="js/bajascript/bscriptReq.js"></script>
    <!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
    <script src='js/bajascript/require.js'></script>

    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
    <script src="js/forge/forgemodel.js"></script>
    <script src="js/yourteam/plugins/yt-alert/ytpop-alert.js"></script>


    <script type='text/javascript'>
        define('niagaraSystemProperties', function () {
            return {
            };
        });
    </script>
    <script src="js/n4js/bajatest.js"></script>
    <script src="js/n4js/electricmeterbaja.js"></script>
    <script src="js/bajascript/require.config.js"></script>
    <script src="js/FileSaver.js"></script>



    <script>

        /*$('#js-page-content').smartPanel();*/
        var jwt = localStorage.getItem("JWT-Authorization");
        var pageAct = {};  //記錄全頁面已選擇項目
        pageAct.AreaTag = "TPE";
        if (location.href.indexOf("ord") != -1) {
            location.href = "/file/index.html"
        }

        // 執行初步 Loading
        var loadEle = pageLoading();

        /**
        * 頁面 Loading 建立
        * */
        function pageLoading(text = null) {
            let background = $(`<div class="loading-bg"></div>`);
            let aleObj = YT.Alert.Tip(text || "讀取中,請稍後", "show");
            $(background)[0]._aleObj = aleObj;
            $("body").css("overflow", "hidden");
            $("body .page-content-wrapper").append(background);
            $(background).animate({ opacity: 1 }, 300);
            return background;
        }

        try {
            $(function () {
                // 二次引用 jquery.js
                // - 在 require 內部程序需要引用 jquery,由於 require 的套件需要依賴 jquery ,就算 HTML 已經引用 jquery, require 也無法參考
                // - 上方 HTML 引用套件若有使用 jquery 內存數據程序 (ex: $(x).data() , $(x).trigger("custom event") , $.fn.custom ...)
                // - 會被清洗,有類似程序需放入 loadPack1 Function rquired 引用
                // (原 datatable.bundle.js require 會出問題,先以 cdn datatable.min.js引用)
                require(["jquery"], loadedBasePack);
            })

            /**
             * jquery.js 二次引用後 Callback,載入第三方套件
             * */
            function loadedBasePack() {
                require(
                    [
                        "lib/app.bundle",
                        "lib/app.menu",
                        "datatables.net.b4",
                        "n4js/alarmbaja",
                        "n4js/historybaja",
                        "lib/statistics/flot/flot.bundle",
                        "lib/statistics/peity/peity.bundle",
                    ], loadedMasterPack);
            }
            /**
             * 第三方套件引用後 Callback,載入額外套件
             * */
            function loadedMasterPack() {
                require(
                    [
                        "yourteam/yourteam.ajax.class",
                        "yourteam/yourteam.utility.class",
                        "yourteam/yourteam.jquery.datatables",
                        "yourteam/plugins/yt-tooltip/yt-tooltip",
                        "yourteam/plugins/yt-tab/yt-tab",
                        "style",

                    ], function () {
                        require(["init", "site"], loadedJsPack)
                    });
            }


            /**
             * 全數套件讀取完成 Callback
             * */
            function loadedJsPack() {
                loadEvent();
                if (!jwt) {
                    myBaja = new MyBaja();
                    myBaja.setMyUserAccount(Login);
                } else {
                    isValidLogin();
                }
                $(loadEle).Loading("close");
            }

            /**
             * 登入驗證完成 Callback
             * */
            function isValidLogin() {
                $("#app").load("_dashboard.html", loadCallback);

                getBuiList();
                getSysMonBtnList();
                checkDevState();

                function getSysMonBtnList() {
                    let url = baseApiUrl + "/api/Device/GetMainSub";
                    let sendData = {
                        building_tag: pageAct.buiTag,
                    };
                    objSendData.Data = sendData;
                    ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
                        if (!res || res.code != "0000" || !res.data) {

                        } else {
                            $("#sysMonBtnList").html()
                            $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
                                $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
                                    let page = "systemMonitor";
                                    if (subSysObj.sub_system_tag == "EL") {
                                        page = "sysElevator";
                                    }
                                    let btn = creBtn(subSysObj.full_name, `subSysBtn${subSysObj.sub_system_tag}`, "topFunBtn", ["dropdown-item"], { page: page });
                                    subSysObj.main_system_tag = mainSysObj.main_system_tag;
                                    btn.data("subSysObj", subSysObj);
                                    $("#sysMonBtnList").append(btn);
                                })
                            })
                        }
                    }, null, "POST").send();
                }

                function getBuiList() {
                    let url = baseApiUrl + "/api/Device/GetBuild";
                    ytAjax = new YourTeam.Ajax(url, null, function (res) {
                        if (!res || res.code != "0000" || !res.data) {

                        } else {
                            let strHtml = ``;
                            $.each(res.data, (index, buiObj) => {
                                strHtml += `<a id="buiBtn${buiObj.building_tag}" class="dropdown-item" href="javascript:;">${buiObj.full_name}</a>`;
                            })
                            $("#buiList").append(strHtml).droSetItem();  //droSetItem 預設第一筆 active
                        }
                    }, null, "POST").send();
                }

                //lily test
                function checkDevState() {
                    //TPE_B1_LT_L1
                    //main_system_tag: pageAct.sysMainTag,
                    //building_tag: pageAct.buiTag,
                    //floor_tag: pageAct.floTag,
                    let systemPath = "TPE_B1";
                    // if (pageAct != undefined && pageAct != null && pageAct.sysMainTag != null && pageAct.buiTag != null) {
                    //     systemPath = "TPE_" + pageAct.buiTag + "_" + pageAct.sysMainTag + "_" + "EL";
                    // }
                    getOneSystemAlarmStateByBaja(systemPath, callbackForCheckDevState);
                    // console.log("systemP: " + systemPath);
                    // console.log("devList: " + deviceList[0].device_guid + ", " + deviceList[3].device_guid + ", " + deviceList[8].device_guid);
                    //callbackForCheckDevState("test");
                }

                function callbackForCheckDevState(result) {
                    console.log("------ " + result);
                    // $.each(deviceList, (index, devObj) => {
                    //     if ((`${devObj.device_guid}`) == '4ed28a93-5025-11ed-b23e-0242ac110002'
                    //         || (`${devObj.device_guid}`) == '5d9fdff0-5343-43fe-86f4-bd73cdb15111') {
                    //         var str = "";
                    //         $(`#${devObj.device_guid}`).empty();
                    //         str = `<span class="status status-danger d-inline-block"><img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="..."></span> ${devObj.full_name}`;
                    //         $(`#${devObj.device_guid}`).append(str);
                    //     }
                    // })

                    console.log(result);
                }
            }

            // page loaded callback
            function loadCallback() {

                initTabsByEle();
                resetYTTooltip();
            }

            // 事件先行讀取
            function loadEvent() {
                onEvent("click", "[name=topFunBtn]", function () {
                    let needLoad = ["sysElevator", "historyData"];
                    _ytTabInited = [];
                    let page = $(this).data("page");

                    if (page != "systemMonitor") {
                        $("#sysMonBtnList .dropdown-item").removeClass("active");
                        pageAct.sysMainTag = null;
                    }
                    $.each(tolSubList, (idx, sub) => {
                        sub.unsubscribeAll();
                        sub.detach();
                    })

                    $("#app").load(`_${page}.html`, loadCallback);

                    // 需要 Loading 的頁面
                    if (needLoad.indexOf(page) != -1) {
                        $(loadEle).Loading("start", "資料讀取中...");
                    }
                })

                onEvent("click", "#logout", function () {
                    localStorage.removeItem("JWT-Authorization");
                    location.href = "/logout";
                })

                onEvent("active:change", "#sysMonBtnList", function (e, actEle) {
                    if (actEle) {
                        pageAct.sysMainTag = $(actEle).data("subSysObj").main_system_tag;
                        pageAct.sysSubTag = $(actEle).data("subSysObj").sub_system_tag;
                        pageAct.sysSubName = $(actEle).data("subSysObj").full_name;
                        pageAct.sysSubObj = $(actEle).data("subSysObj");
                    }

                })

                onEvent("active:change", "#buiList", function (e, actEle) {
                    if (actEle) {
                        pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
                    }

                })

            }

            // 登入驗證
            function Login(account) {
                console.log(account)
                /*if ($("#login-form").valid()) {*/
                var url = baseApiUrl + "/api/Login/";
                var send_data = {
                    account: account,
                    password: "rJ2T5Kkj"
                }
                if (location.href.indexOf("localhost:5966") != -1) {
                    location.href = "login.html";
                }
                $.ajax({
                    method: "post",
                    url: url,
                    data: JSON.stringify(send_data),
                    async: false,
                    contentType: "application/json; charset=UTF-8",
                    dataType: 'json',
                    success: function (rel) {
                        if (rel.code != "0000") {
                            toast_error(rel.msg || "系統內部發生錯誤,請聯絡系統管理員");
                            return;
                        }
                        else {
                            /*toast_ok(rel.msg);*/
                            localStorage.setItem('JWT-Authorization', rel.data.token);
                            isValidLogin();
                        }
                    },
                    error: function (xhr, textStatus, thrownError) {
                        alert(textStatus);
                    }
                });

            }

            //==============================================================================
            //                       ↓  系統監控 - 共用 Function ↓
            //==============================================================================

            // Card - 基本資料 Table
            function drawInfoTabBlo(devGuid) {

                let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
                let tbody = tabEle.append("<tbody>");
                let columnNames = ["設備編號", "設備名稱"];

                $.each(columnNames, (index, colName) => {
                    let tr = $("<tr></tr>");
                    let td = $("<td></td>");
                    td.text(colName);
                    tr.append(td);
                    tbody.append(tr);
                })

                let url = baseApiUrl + "/api/Device/GetBaseDevice";
                let sendData = {
                    device_guid: devGuid,
                };
                objSendData.Data = sendData;
                ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
                    if (!res || res.code != "0000" || !res.data) {

                    } else {
                        tbody.find("tr").eq(0).append(creEle("td", res.data.device_number));
                        tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
                    }
                }, null, "POST").send();

                return tabEle.prop("outerHTML");
            }

            // Card - 異常紀錄 block
            function drawErrRecTabBlo() {
                let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">

                                </table>`
                return strHtml;
            }

            // Card - 運維紀錄 block
            function drawOpeRecTabBlo() {
                let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">

                                </table>`
                return strHtml;
            }

            // Card 呈現初始化
            function initPopover() {
                $("[name=devItem]").each((index, ele) => {
                    let devNum = $(ele).data("number"); //設備編號
                    let devGuid = $(ele).data("id"); //guid
                    let devName = $(ele).data("name"); //full_name
                    $(ele).YTTooltip({
                        html: `<div class="card m-1 border device-wrap">

                                    <div class="card-header p-3">

                                        <div class="position-absolute w-50" style="word-break: break-all;">
                                            <label class="m-0 mt-2">${devName}</label>
                                        </div>
                                        <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
                                            <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
                                            <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
                                            <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
                                            <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
                                            <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
                                        </div>
                                    </div>
                                    <div class="card-body p-2 tab-content">

                                        <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
                                            ${drawStateTabBlo(devNum)}
                                        </div>
                                        <div id="info" data-tabname="cardTab" data-tabrole="child">
                                            ${drawInfoTabBlo(devGuid)}
                                        </div>
                                        <div id="errRec" data-tabname="cardTab" data-tabrole="child">
                                            ${drawErrRecTabBlo()}
                                        </div>
                                        <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
                                            ${drawOpeRecTabBlo()}
                                        </div>


                                            </div>
                                        </div>`,
                        group: "device",
                        onShow: function (tooltipEle, oriEle) {
                            var tab = new YT.Tab({ tabName: "cardTab" })
                            loadOpeRecTable(devGuid);
                            //loadErrRecTable2($(oriEle).data("number"));
                            //loadErrRecTable();
                            loadErr($(oriEle).data("number"));
                            subDeviceSetTable ? subDeviceSetTable($(oriEle).data("number")) : ""
                        }
                    })
                })
            }

            // Card - 運維紀錄 Table
            function loadOpeRecTable(devGuid) {

                let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
                let tag = "#opeRecTable";

                let column_defs = [
                    { "targets": [0], "width": "8%", "sortable": true },
                    { "targets": [1], "width": "8%", "sortable": true },
                    { "targets": [2], "width": "7%", "sortable": true },
                    { "targets": [3], "width": "7%", "sortable": true },
                ];

                let columns = [
                    {
                        "title": "類型",
                        "data": "work_type_name",
                    },
                    {
                        "title": "項目",
                        "data": "fix_do",
                    },
                    {
                        "title": "處理人員",
                        "data": "work_person_name",
                    },
                    {
                        "title": "發生/完成時間",
                        "data": "finishTime",
                        "render": function (data, type, row) {
                            return row.createdAt + "<br>" + data;
                        },
                    },

                ];

                let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
            }

            // Baja 取得異常紀錄
            function loadErr(allPath) {
                if (allPath != undefined && allPath != null) {
                    let _pathArr = allPath.split("_");//TPE_B1_ELEV_EL_R2F_NA_ELEV1_N1
                    let _devicePath = _pathArr[0] + "_" + _pathArr[1] + "_" + _pathArr[2] + "_" + _pathArr[3] + "_" + _pathArr[4] + "_" + _pathArr[5];
                    getOneDeviceAlarmTop10ByBaja(_devicePath, callbackForErr);
                }
                else {
                    console.log("no device");
                }
            }

            // Card - 異常紀錄 Table
            function callbackForErr(result) {
                let tag = "#errRecTable";
                let datas;

                let column_defs = [
                    { "targets": [0], "width": "15%", "sortable": true },
                    { "targets": [1], "width": "25%", "sortable": true },
                    { "targets": [2], "width": "25%", "sortable": true },
                    { "targets": [3], "width": "35%", "sortable": true },
                ];

                let columns = [
                    {
                        "title": "異常ID",
                        "data": "uuid",

                    },
                    {
                        "title": "異常原因",
                        "data": "msgText",
                    },
                    {
                        "title": "ACK確認",
                        "data": "ackState",
                    },
                    {
                        "title": "發生/完成時間",
                        "data": "normalTime",
                        "render": function (data, type, row) {
                            return row.timestamp + "<br>" + data;
                        },
                    },

                ];

                let json_object = JSON.parse(result);
                datas = json_object['data'];
                errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");

            }

            //根據 data-type 設置顏色 (判斷後台是否有設定,若無則帶預設)
            function setLightColor() {
                $(".dev-card").each((index, ele) => {
                    let type = $(ele).find("[data-light-type]").data("light-type");
                    let isFlashing = false;
                    let color = "#000";
                    switch (type) {
                        case "normal":
                            color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
                            isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
                            break;
                        case "close":
                            color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
                            isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
                            break;
                        case "error":
                            color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
                            isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
                            break;
                    }
                    $(ele).find("[data-light-type]").css("background-color", color);
                    //是否閃爍
                    if (isFlashing) {
                        $(ele).addClass("light-flash");
                    }
                })
            }

            //==============================================================================
            //                       ↑  系統監控 - 共用 Function ↑
            //==============================================================================

        } catch(e) {
            $(loadEle).Loading("close");
        }

        
    </script>

</body>
<!-- END Body -->

</html>