<%
    var details = JSON.parse($user.details)
%>
<% include blocks/header %>
<script>var $user = <%- JSON.stringify($user) %>;</script>
<script>var lang = <%- JSON.stringify(lang) %>;</script>
<script>var addStorage = <%- JSON.stringify(addStorage) %>;</script>
<link rel="stylesheet" href="<%-window.libURL%>libs/css/material-design-iconic-font.min.css" type="text/css" />
<link rel="stylesheet" href="<%-window.libURL%>libs/css/pnotify.custom.min.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/vbox.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/daterangepicker.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/circles.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/bootstrap.min.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/font-awesome.min.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/fullcalendar.min.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/gridstack.min.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/gridstack-extra.min.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/bootstrap-table.min.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/bootstrap-slider.min.css">

<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.basic.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.misc.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.monitors.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.monitorStates.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.forms.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.modal.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.ptzcontrols.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.regioneditor.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.righttoleft.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.sidemenu.css">
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.darktheme.css">
<% customAutoLoad.LibsCss.forEach(function(lib){ %>
    <link rel="stylesheet" href="<%-window.libURL%>libs/css/<%-lib%>">
<% }) %>
<style id="theme">
<% if(details.theme&&details.theme!==''){ %><%- include(__dirname+'/web/libs/themes/'+details.theme+'/style.css'); %><% } %>
</style>
<style id="custom_css">
<%= details.css %>
</style>
<style>
<% if(details.video_delete&&details.video_delete!==''){
    details.video_delete.forEach(function(v,n){ %>
        [mid="<%= v %>"] .permission_video_delete{display:inline-block}
<%
    })
}else{ %>
    th.permission_video_delete,td.permission_video_delete{display:table-cell}
<% } %>
</style>
<html lang="en">
  <body>
    <div class="demo-layout demo-blog mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
      <header id="main_header" class="demo-header mdl-layout__header">
        <div class="mdl-layout__header-row">
        <ul class="nav navbar-nav">
            <li title="<%-lang['Toggle Sidebar']%>" class_toggle="hide-side" data-target=".mdl-js-layout"><a>&nbsp;<i class="fa fa-bars"></i>&nbsp;</a></li>
            <li title="<%-lang['Add Monitor']%>" mid="" ke="" class="hidden-xs permission_monitor_create"><a monitor="edit">&nbsp;<i class="fa fa-plus"></i>&nbsp;</a></li>
            <li title="<%-lang['Power Video Viewer']%>" class="hidden-xs" data-toggle="modal" data-target="#powerVideo"><a>&nbsp;<i class="fa fa-map-marker"></i>&nbsp;</a></li>
            <li>
                <a title="<%-lang['Monitor Groups']%>" id="group_list_button" class="mdl-js-button">&nbsp;<i class="fa fa-video-camera"></i>&nbsp;</a>
                <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="group_list_button" id="group_list"></ul>
            </li>
            <li class="os_bars hidden-xs">
                <div class="display-table">
                    <div class="cpu_load display-table-cell">
                        <span class="pull-right percent"></span>
                        <label><span class="os_cpuCount"></span> <%-lang.CPU%><span class="os_cpuCount_trailer"></span> <%-lang.on%> <span class="os_platform" style="text-transform:capitalize"></span></label>
                      <div class="progress">
                        <div class="progress-bar progress-bar-warning" role="progressbar" style="width:0%"></div>
                      </div>
                    </div>
                    <div class="ram_load display-table-cell">
                        <span class="pull-right percent"></span>
                       <label><span class="os_totalmem" style="letter-spacing:2px;font-weight:100"></span> <%-lang.MB%> <%-lang.RAM%></label>
                      <div class="progress">
                        <div class="progress-bar progress-bar-warning" role="progressbar" style="width:0%"></div>
                      </div>
                    </div>
                    <div class="diskUsed display-table-cell">
                        <span class="pull-right percent"></span>
                       <label><span class="value" style="letter-spacing:2px;font-weight:100"></span></label>
                      <div class="progress">
                        <div class="progress-bar progress-bar-warning" role="progressbar" style="width:0%"></div>
                      </div>
                    </div>
                </div>
            </li>
        </ul>
          <div class="mdl-layout-spacer"></div>
            <ul class="nav navbar-nav navbar-right">
                <li role="presentation" class="dropdown">
                <div id="clock" class_toggle="twentyfour" data-target="#time-hours">
                    <div id="time-date"></div>
                    <ul>
                        <li id="time-hours"></li>
                        <li class="point">:</li>
                        <li id="time-min"></li>
                        <li class="point">:</li>
                        <li id="time-sec"></li>
                    </ul>
                </div>
                </li>
                <li role="presentation" class="dropdown hidden-xs">
                  <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="true">&nbsp;<i class="fa fa-group"></i>&nbsp;</a>
                  <ul id="users_online" class="dropdown-menu list-unstyled msg_list scrollable" role="menu"></ul>
                </li>

                <li role="presentation" class="dropdown">
                  <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="true">&nbsp;<i class="fa fa-hdd-o"></i>&nbsp;</a>
                  <ul id="diskUsedList" class="dropdown-menu list-unstyled msg_list scrollable" role="menu">
                      <% addStorage.forEach(function(storage){ %>
                          <li class="log-item" storage="<%- storage.name %>">
                              <span>
                                  <div class="title"><%- storage.name %></div>
                                  <span class="pull-right percent"></span>
                                  <label><span class="value"></span></label>
                              </span>
                              <div class="message">
                                  <div class="progress">
                                      <div class="progress-bar progress-bar-warning" role="progressbar"></div>
                                  </div>
                              </div>
                          </li>
                      <% }) %>
                  </ul>
                </li>

                <li role="presentation" class="dropdown">
                  <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="true">&nbsp;<i class="fa fa-exclamation-triangle"></i>&nbsp;</a>
                  <ul id="logs" class="dropdown-menu list-unstyled msg_list scrollable" role="menu">
                  </ul>
                </li>
              </ul>
        </div>
      </header>
      <div class="demo-drawer mdl-layout__drawer">
        <header class="demo-drawer-header">
          <div class="demo-avatar-dropdown">
            <button id="accbtn" style="color:#fff" class="mdl-button mdl-js-button mdl-js-ripple-effect"><i class="fa fa-caret-down"></i> &nbsp;<span class="usermail"></span></button>
            <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="accbtn">
                <li class="mdl-menu__item" data-toggle="modal" data-target="#multi_mon"><div><i class="fa fa-clone"></i><div><%- lang['Monitors'] %></div></div></li>
                <li class="mdl-menu__item" data-toggle="modal" data-target="#powerVideo"><div><i class="fa fa-map-marker"></i><div><%- lang['Power Viewer'] %></div></div></li>
                <li class="mdl-menu__item" mid="" ke=""><div class="flex" monitor="timelapseJpeg"><i class="fa fa-angle-double-right"></i><div><%- lang['Timelapse'] %></div></div></li>
                <li class="mdl-menu__item permission_user_change" data-toggle="modal" data-target="#settings"><div><i class="fa fa-gears"></i><div><%- lang.Settings %></div></div></li>
                <li class="mdl-menu__item" data-toggle="modal" data-target="#apis"><div><i class="fa fa-code"></i><div><%- lang.API %></div></div></li>
                <% if(!details.sub){ %>
                <li class="mdl-menu__item" data-toggle="modal" data-target="#onvif_probe"><div><i class="fa fa-rss"></i><div><%- lang.ONVIF %></div></div></li>
                <li class="mdl-menu__item" data-toggle="modal" data-target="#probe"><div><i class="fa fa-search"></i><div><%- lang.FFprobe %></div></div></li>
                <li class="mdl-menu__item" data-toggle="modal" data-target="#monitorStates"><div><i class="fa fa-align-right"></i><div><%- lang['Monitor States'] %></div></div></li>
                <li class="mdl-menu__item" data-toggle="modal" data-target="#schedules"><div><i class="fa fa-clock-o"></i><div><%- lang['Schedules'] %></div></div></li>
                <li class="mdl-menu__item" data-toggle="modal" data-target="#filters"><div><i class="fa fa-filter"></i><div><%- lang.Filters %></div></div></li>
                <% } %>
                <li class="mdl-menu__item permission_view_logs" data-toggle="modal" data-target="#logs_modal"><div><i class="fa fa-exclamation-triangle"></i><div><%- lang.Logs %></div></div></li>
                <li class="mdl-menu__item" class_toggle="list-blocks" data-target="#left_menu"><div><i class="fa fa-camera"></i><div><%- lang['List Toggle'] %></div></div></li>
                <li class="mdl-menu__item" class_toggle="hide-side" data-target=".mdl-js-layout"><div><i class="fa fa-bars"></i><div><%- lang['Hide List'] %></div></div></li>
                <li class="mdl-menu__item shinobi-detector-motion shinobi-detector-opencv shinobi-detector_plug" class_toggle="hide_indifference" data-target="body" style="display:none"><div><i class="fa fa-bolt"></i><div><%- lang['Motion GUI'] %></div></div></li>
                <li class="mdl-menu__item" system="jpegToggle"><div><i class="fa fa-file-image-o"></i><div><%- lang['JPEG Mode'] %></div></div></li>
                <li class="mdl-menu__item" system="switch" switch="monitorMuteAudio" type="text"><div><i class="fa fa-volume-down"></i><div><%- lang['Mute Audio'] %></div></div></li>
                <li class="mdl-menu__item" system="switch" switch="monitorOrder" type="text"><div><i class="fa fa-sort"></i><div><%- lang['Order Streams'] %></div></div></li>
                <li class="mdl-menu__item" system="switch" switch="notifyHide" type="text"><div><i class="fa fa-exclamation-circle"></i><div><%- lang['Hide Notes'] %></div></div></li>
                <li class="mdl-menu__item logout"><div><i class="fa fa-sign-out"></i><div><%- lang.Logout %></div></div></li>
            </ul>
            <div class="mdl-layout-spacer"></div>
            <button class_toggle="list-blocks" data-target="#left_menu" class="mdl-button mdl-button--icon">
              <i class="fa fa-camera"></i>
            </button>
          </div>
        </header>
        <nav class="demo-navigation mdl-navigation side-menu" id="left_menu">
            <div class="form-group col-md-12">
                <input class="form-control dark" placeholder="<%- lang.Search %> <%- lang.Monitors %>" id="monitors_list_search">
            </div>
            <div id="monitors_list" class="display-table"></div>
            <div class="mdl-layout-spacer"></div>
        </nav>
      </div>
      <main class="mdl-layout__content selected" id="main_canvas">
          <div class="grid-stack" id="monitors_live"></div>
      </main>
    </div>
  </body>
</html>
<!---->
<div class="hidden" id="temp"></div>
<% include blocks/multimon.ejs %>
<% include blocks/api.ejs %>
<% include blocks/logs.ejs %>
<% include blocks/settings.ejs %>
<% include blocks/filters.ejs %>
<% include blocks/timelapse.ejs %>
<% include blocks/videoview.ejs %>
<% include blocks/monitoredit.ejs %>
<% include blocks/probe.ejs %>
<% include blocks/region.ejs %>
<% include blocks/detectorfilters.ejs %>
<% include blocks/monitorStates.ejs %>
<% include blocks/schedules.ejs %>
<% include blocks/confirm.ejs %>
<% customAutoLoad.PageBlocks.forEach(function(block){ %>
    <%- include(block) %>
<% }) %>
<% if(config.DropboxAppKey){ %>
<!--Dropbox Library, Change data-app-key to your app key. -->
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="<%= config.DropboxAppKey %>"></script>
<!--Dropbox End-->
<% } %>
<script src="<%-window.libURL%>libs/js/material.min.js"></script>
<script src="<%-window.libURL%>libs/js/pnotify.custom.min.js"></script>
<script><% include ../libs/js/moment.js %></script>
<script><% include ../libs/js/livestamp.min.js %></script>
<script src="<%-window.libURL%>libs/js/placeholder.js"></script>
<script src="<%-window.libURL%>libs/js/bootstrap.min.js"></script>
<script src="<%-window.libURL%>libs/js/bootstrap-table.min.js"></script>
<script src="<%-window.libURL%>libs/js/socket.io.js"></script>
<script src="<%-window.libURL%>libs/js/fullcalendar.min.js"></script>
<script src="<%-window.libURL%>libs/js/locale-all.js"></script>
<script src="<%-window.libURL%>libs/js/hls.min.js"></script>
<script src="<%-window.libURL%>libs/js/libde265.min.js"></script>
<script src="<%-window.libURL%>libs/js/bootstrap-slider.min.js"></script>
<script type="text/javascript" src="<%-window.libURL%>libs/js/flv.shinobi.js">;</script>
<script src="<%-window.libURL%>libs/js/jszip.min.js"></script>
<script src="<%-window.libURL%>libs/js/dash2.downloadAndZip.js"></script>
<script src="<%-window.libURL%>libs/js/menu.js"></script>
<script src="<%-window.libURL%>libs/js/clock.js"></script>
<script src="<%-window.libURL%>libs/js/poseidon.js"></script>
<script src="<%-window.libURL%>libs/js/clusterPoints.js"></script>
<script src="<%-window.libURL%>libs/js/daterangepicker.js"></script>
<script src="<%-window.libURL%>libs/js/jquery.canvasAreaDraw.js"></script>
<script src="<%-window.libURL%>libs/js/jquery-ui.min.js"></script>
<!--<script src="<%-window.libURL%>libs/js/jquery.ui.touch.js"></script>-->
<script src="<%-window.libURL%>libs/js/lodash.min.js"></script>
<script src="<%-window.libURL%>libs/js/gridstack.min.js"></script>
<script src="<%-window.libURL%>libs/js/gridstack.jQueryUI.min.js"></script>
<script src="<%-window.libURL%>libs/js/basic.js"></script>
<script><% include ../libs/js/dash2.config.js %></script>
<script src="<%-window.libURL%>libs/js/dash2.basic.js"></script>
<script src="<%-window.libURL%>libs/js/dash2.confirm.js"></script>
<script src="<%-window.libURL%>libs/js/dash2.socketio.js"></script>
<script src="<%-window.libURL%>libs/js/dash2.gridstack.js"></script>
<script src="<%-window.libURL%>libs/js/dash2.elements.js"></script>
<script src="<%-window.libURL%>libs/js/dash2.elementbuilder.js"></script>
<script src="<%-window.libURL%>libs/js/dash2.init.js"></script>
<script src="<%-window.libURL%>libs/js/dash2.confirm.js"></script>
<% customAutoLoad.LibsJs.forEach(function(lib){ %>
    <script src="<%-window.libURL%>libs/js/<%-lib%>"></script>
<% }) %>
<% include blocks/help.ejs %>
<% include blocks/powerVideo2.ejs %>
