{% extends "base.html" %}
{% load i18n static compress iclock_tags common %}
{% block extrahead %}
  <!--suppress JSUnresolvedVariable -->
  {% compress css file admin_site_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/rtl.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}"/>
    <link rel="stylesheet" type="text/css" media="screen" href="{% static 'layui/css/layui.css' %}?v=2.4.5"/>
    <link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/layui.widgets.min.css' %}?v=2.4.5"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/model.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/xadmin.main.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'multi-switch/multi-switch.min.css' %}?v=1.1.1"/>
    <link rel="stylesheet" type="text/css" href="{% static 'noty/noty.css' %}?v=3.1.4"/>
    <link rel="stylesheet" type="text/css" href="{% static 'spectrum/spectrum.min.css' %}?v=1.8.0"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/extension.css' %}?v=11.019"/>
    <!-- {#<link rel="stylesheet" type="text/css" href="{% static "css/zTreeStyle/zTreeStyle.css" %}" />#} -->
    <!-- Use Awesome Style for zTree -->
    <link rel="stylesheet" type="text/css" href="{% static 'css/awesomeStyle/awesome.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/awesomeStyle/awesome.extended.min.css' %}"/>
    <!-- Font-Awesome -->
    <link rel="stylesheet" type="text/css" href="{% static 'font-awesome/css/font-awesome.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/layui.admin.css' %}?v=1.3"/>
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap-datepicker/css/datepicker.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap-clockpicker/bootstrap-clockpicker.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/filters.css' %}?v=1.1.1"/>
  {% endcompress %}

{% endblock %}
{% block title %}{{ title|escape }} {% endblock %}

{% block extrastyle %}

{% endblock %}

{% block content %}
  {% autoescape off %}
    {% block north %}
      <div class="layui-layout layui-layout-admin">
        <div class="layui-header header">
          <ul class="layui-nav layui-layout-left layui-nav-menu" lay-filter="nav-menu" id="top_module_menu_nav">
            <li class="layui-nav-item layui-menu-logo-wdms" style="background: none;">
              <div class="layui-nav-logo top_logo{% if 'worktable' == current_app %}_focus{% endif %}">
                <div id="id_worktable" style="line-height: 55px;">
                </div>
              </div>
            </li>
          </ul>

          <ul class="layui-nav layui-layout-right" lay-filter="system-menu">
            {% if ''|thailand %}
              <li class="layui-nav-item">
                <a href="javascript:" ref="{% url 'biotime:emergency_button' %}" event="emergency_button"
                   title="{% trans 'convenient export' %}">
                  <i class="fa fa-warning (alias) fa-2x" style="vertical-align:middle;color: red"></i>
                  <!-- <img src="{{ MEDIA_URL }}images/emergency.gif" alt="" height="40" width="40"> -->
                </a>
              </li>
            {% endif %}
            <li class="layui-nav-item">{% trans 'system_welcome' %} {{ request.user|separate_username_length }}</li>
            <li class="layui-nav-item">
              <a href="javascript:void(0);">
                <img border="0" align="top" alt="me" src="{{ MEDIA_URL }}img/att/me.png"
                     onmouseout="$(this).attr('src','{{ MEDIA_URL }}img/att/me.png')"
                     onmouseover="$(this).attr('src','{{ MEDIA_URL }}img/att/me1.png')"/>
              </a>
              <dl class="layui-nav-child system-user-menu">
                <dt class="user-popup-layer level-2">
                  <i class="desc-inner-arrow"></i>
                  <i class="desc-outer-arrow"></i>
                  <i class="desc-layer"></i> <span class="desc-header">
                  </span>
                </dt>
                {% if user.is_employee %}
                  <dd><a href="/files/help/intelligentTimeHelpforEmployee.pdf" target="_blank"><i
                    class="fa fa-fw fa-question"></i> {% trans 'system_userMenu_op_help' %}</a></dd>
                  <dd><a href="javascript:void(0);" ref='/staff/setLanguage/' event="changeLanguage"><i
                    class="fa fa-fw fa-globe"></i> {% trans 'system_userMenu_op_language' %}</a></dd>
                  <dd><a href="javascript:void(0);" ref='/staff/changePassword/' event="changePassword"><i
                    class="fa fa-fw fa-pencil-square-o"></i> {% trans 'system_userMenu_op_changePassword' %}</a></dd>
                {% else %}
                  <dd><a href="javascript:void(0);" ref="{% url 'biotime:license' %}" event="license">
                    <i class="fa fa-fw fa-info-circle"></i>
                    {% trans 'system_userMenu_op_about' %}</a>
                    <hr>
                  </dd>
                  <dd><a href="javascript:void(0);" ref="{% url 'biotime:language_change' %}" event="changeLanguage"><i
                    class="fa fa-fw fa-globe"></i> {% trans 'system_userMenu_op_language' %}</a></dd>
                  <dd><a href="javascript:void(0);" ref="{% url 'biotime:password_change' %}" event="changePassword"><i
                    class="fa fa-fw fa-pencil-square-o"></i> {% trans 'system_userMenu_op_changePassword' %}</a></dd>
                {% endif %}
                <dd><a href="javascript:void(0);" ref="{% url 'biotime:logout' %}" event="logout"><i
                    class="fa fa-fw fa-sign-out"></i> {% trans 'system_userMenu_op_logout' %}</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:void(0);" event="skin">
                <img border="0" align="top" alt="me" style="height: 25px; width: 25px;"
                     src="{{ MEDIA_URL }}img/att/skin_0.png" class="layui-hide"
                     onmouseout="$(this).attr('src','{{ MEDIA_URL }}img/att/skin_0.png')"
                     onmouseover="$(this).attr('src','{{ MEDIA_URL }}img/att/skin_1.png')"/>
              </a>
            </li>
          </ul>
          <div class="header-popup-layer level-2 layui-hide">
            <i class="desc-inner-arrow"></i>
            <i class="desc-outer-arrow"></i>
          </div>
        </div>
        {% block west %}
          <div class="layui-side layui-bg-black layui-hide" id="side_menu">
            <a href="javascript:void(0);" class="layui-hide-xs">
              <div class="zk-switch-menu align-right">
                <input type="text" style="display: none;" placeholder="...">
              </div>
            </a>
            <div class="layui-side-scroll">
              <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="admin-nav" id="side_menu_nav"></ul>
            </div>
          </div>
        {% endblock west %}
        <div id="main_body" class="layui-body layui-hide">
          <div class="layui-progress" lay-filter="pace">
            <div class="layui-progress-bar layui-bg-orange" style="width: 0%;"></div>
          </div>
          <div class="layui-tab layui-tab-card" lay-allowclose="true" lay-filter="zkTab" id="zk-layui-tab">
            <ul class="layui-tab-title" id="zk-layui-tab-ul"></ul>
            <div class="layui-tab-content"></div>
          </div>
        </div>
        <div id="dashboard">{% block center %}{% endblock %}</div>
      </div>
    {% endblock %}

    {% block init_menu %}
      <script>
        $(function () {
          window['set_session_storage']({
            'cached_actions_url': "{% url 'biotime:cached_actions' %}",
            'request_user': '{{ request.user }}',
            'request_user_id': '{{ request.user.pk }}'
          });
          $('body').adminSite({
            base_path: '{% static 'extends' %}/',
            menu: {{ menus|py_dict_to_js }},
            logout_url: "{% url 'biotime:logout' %}",
            pin_tab_url: "{% url 'biotime:pinned_tabs' %}",
            appearance_themes_url: "{% url 'biotime:appearance_themes' %}",
            column_order_url: "{% url 'biotime:column_order' %}"
          });
        });
      </script>
    {% endblock init_menu %}
    {% block extend_script %}
    {% endblock %}
  {% endautoescape %}

{% endblock content %}

{% block extrajs %}
  {{ block.super }}
  <script src="{% static 'layui/layui.js' %}?v=2.4.5" type="text/javascript"></script>
  {% compress js file admin_site_js %}
    <script src="{% static 'js/core.min.js' %}?v=0.5"></script>
    <script src="{% static 'js/base.js' %}?v=0.5"></script>
    <script src="{% static 'js/jquery/jquery.ztree.all-3.5.min.js' %}"></script>
    <script src="{% static 'js/jquery/jquery.ztree.exhide.min.js' %}"></script>
    <script src="{% static 'js/ztree.common.min.js' %}"></script>
    <script src="{% static 'noty/noty.min.js' %}?v3.1.4" type='text/javascript'></script>
    <script src="{% static 'spectrum/spectrum.min.js' %}?v1.8.0" type='text/javascript'></script>
    <script src="{% static 'multi-switch/multi-switch.min.js' %}" type='text/javascript'></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}" type='text/javascript'></script>
    <script src="{% static 'bootstrap-clockpicker/bootstrap-clockpicker.min.js' %}" type='text/javascript'></script>
    <script src="{% static 'bootstrap-menu/BootstrapMenu.min.js' %}?v=1.1" type='text/javascript'></script>
    <script src="{% static 'bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}" type='text/javascript'></script>
    <script src="{% static 'js/xadmin.plugin.filters_standalone.js' %}?v=1.8"></script>
    <script src="{% static 'js/actions.js' %}?v=1.7.4"></script>
    <script src="{% static 'js/data_grid.js' %}?v=1.7.5"></script>
    <script src="{% static 'js/admin_site.js' %}?v=1.5"></script>
    <script src="{% static 'js/ztree_select.js' %}?v=1.3"></script>
    <script src="{% static 'js/ztree_filter.js' %}?v=1.1"></script>
    <script src="{% static 'js/business_logic.js' %}?v=1.1"></script>
  {% endcompress %}
  {% block extension_js %}
    <script>
      //# sourceURL=dash_board_script.js
      var skin_css_background = window['get_local_storage']($.fn.adminSite.const.SKIN_CSS_BACKGROUND);
      if (skin_css_background) {
        $('.layui-layout-admin .layui-header').css({
          background: [skin_css_background]
        });
      } else {
        $('.layui-layout-admin .layui-header').css({
          // background: ["#7ac142"]
            background: ['#474b4f']
        });
        //{% if banner_url %}
        //  $('.layui-layout-admin .layui-header').css({
        //    background: interpolate('url(%s)', ['{{ MEDIA_URL }}img/banner/' + '{{ banner_url }}'])
        //  });
        //{% endif %}
      }
      {% if software_type == 9 %}
          $.fn.intelligenttimeFillHead();
      {% elif software_type == 10 %}
          $.fn.easytimeproFillHead();
      {% endif %}
      function redirect(module_name) {
        $(interpolate('a[app=%s]', [module_name]), '#top_module_menu_nav').data('is_auto_triggered', true).trigger('click');
      }

      function stuff_index() {
        per_lable = $('#top_module_menu_nav > li:nth-child(3) > div > a');  // device
        if (per_lable[0] === undefined){
            setTimeout(stuff_index, 100);
        }else {
            per_lable.trigger('click');
            // $('#id_worktable').attr('onclick', redirect('iclock'))
        }
      }

      $(document).ready(function () {
          stuff_index()
      });
    </script>
  {% endblock extension_js %}
{% endblock extrajs %}
