{% load i18n static djello_template_tags %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}

<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title %}{% endblock %}</title>
<meta name="description" content="Ela Admin - HTML5 Admin Template">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="apple-touch-icon" href="images/favicon.png">
<link rel="shortcut icon" href="images/favicon.png">

<link rel="stylesheet" href="{% static 'djello/assets/css/normalize.css' %}">
<link rel="stylesheet" href="{% static 'djello/assets/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'djello/assets/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'djello/assets/css/themify-icons.css' %}">
<link rel="stylesheet" href="{% static 'djello/assets/css/pe-icon-7-filled.css' %}">


<link href="{% static 'djello/assets/weather/css/weather-icons.css' %}" rel="stylesheet" />
<link href="{% static 'djello/assets/calendar/fullcalendar.css' %}" rel="stylesheet" />

<link rel="stylesheet" href="{% static 'djello/assets/css/style.css' %}">
<link href="{% static 'djello/assets/css/charts/chartist.min.css' %}" rel="stylesheet">
<link href="{% static 'djello/assets/css/lib/vector-map/jqvmap.min.css' %}" rel="stylesheet">

<link href="{% static 'djello/custom.css' %}" rel="stylesheet">

<style>
  #weatherWidget .currentDesc {
      color: #ffffff!important;
  }
  .traffic-chart { 
      min-height: 335px; 
  }
  #flotPie1  {
      height: 150px;
  } 
  #flotPie1 td {
      padding:3px;
  }
  #flotPie1 table {
      top: 20px!important;
      right: -10px!important;
  }
  .chart-container {
      display: table;
      min-width: 270px ;
      text-align: left;
      padding-top: 10px;
      padding-bottom: 10px;
  }
  #flotLine5  {
       height: 105px;
  } 

  #flotBarChart {
      height: 150px;
  }
  #cellPaiChart{
      height: 160px;
  }
</style>

{% block extrastyle %}{% endblock %}
{% block extrahead %}{% endblock %}
{% block responsive %}{% endblock %}
{% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE" />{% endblock %}
</head>

<script type="text/javascript">
  var initWidgets = [];
</script>


{% load i18n %}

<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
  data-admin-utc-offset="{% now "Z" %}">


<!-- Left Panel --> 
{% block nav-global %}
  <aside id="left-panel" class="left-panel">
    <nav class="navbar navbar-expand-sm navbar-default">
      <div id="main-menu" class="main-menu collapse navbar-collapse">
        <ul class="nav navbar-nav">
          {% render_menu_app_list %}
          {% block app_menu %}{% endblock %}
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </nav>
  </aside>
  <!-- /#left-panel --> 
  <!-- Left Panel -->
{% endblock %}

<!-- Right Panel --> 
<div id="right-panel" class="right-panel">

  {% if not is_popup %}
    <!-- Header-->
    <header id="header" class="header">
      <div class="top-left">
        <div class="navbar-header">
          {% djello_setting 'header_logo' as logo %}
          <a class="navbar-brand" href="/admin/"><img src="{% static logo|default:'djello/images/logo.png' %}" alt="Logo"></a>
          {# {% block branding %}{% endblock %} FIX THIS!!! #}
          <a id="menuToggle" class="menutoggle"><i class="fa fa-bars"></i></a> 
        </div>
      </div>
      <div class="top-right">
        <div class="header-menu">
          <div class="header-left">
            {% block search %}{% endblock %}
            {% block welcome-msg %}
                {% trans 'Welcome,' %}
                <strong>{% firstof user.get_short_name user.get_username %}</strong>.
            {% endblock %}
            {% if site_url %}
              <a href="{{ site_url }}" style="padding: 5px;"><i class="fa fa-globe"></i></a>
            {% endif %}
            {% djello_setting 'header_links' as header_links %}
            {% for link in header_links %}
              <a href="{{ link.0 }}" style="padding: 5px;"><i class="fa {{ link.1 }}"></i></a>
            {% endfor %}
            <div class="dropdown for-notification">
              <button class="btn btn-secondary dropdown-toggle" type="button" id="notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-bell"></i>
              <span class="count bg-danger">3</span>
              </button>
              <div class="dropdown-menu" aria-labelledby="notification">
                <p class="red">You have 3 Notification</p>
                <a class="dropdown-item media" href="#">
                  <i class="fa fa-check"></i>
                  <p>Server #1 overloaded.</p>
                </a>
                <a class="dropdown-item media" href="#">
                  <i class="fa fa-info"></i>
                  <p>Server #2 overloaded.</p>
                </a>
                <a class="dropdown-item media" href="#">
                  <i class="fa fa-warning"></i>
                  <p>Server #3 overloaded.</p>
                </a>
              </div>
            </div>
            <div class="dropdown for-message">
              <button class="btn btn-secondary dropdown-toggle" type="button" id="message" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-envelope"></i>
              <span class="count bg-primary">4</span>
              </button>
              <div class="dropdown-menu" aria-labelledby="message">
                <p class="red">You have 4 Mails</p>
                <a class="dropdown-item media" href="#">
                  <span class="photo media-left"><img alt="avatar" src="{% static 'djello/images/avatar/1.jpg' %}"></span>
                  <div class="message media-body">
                    <span class="name float-left">Jonathan Smith</span>
                    <span class="time float-right">Just now</span>
                    <p>Hello, this is an example msg</p>
                  </div>
                </a>
                <a class="dropdown-item media" href="#">
                  <span class="photo media-left"><img alt="avatar" src="{% static 'djello/images/avatar/2.jpg' %}"></span>
                  <div class="message media-body">
                    <span class="name float-left">Jack Sanders</span>
                    <span class="time float-right">5 minutes ago</span>
                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                  </div>
                </a>
                <a class="dropdown-item media" href="#">
                  <span class="photo media-left"><img alt="avatar" src="{% static 'djello/images/avatar/3.jpg' %}"></span>
                  <div class="message media-body">
                    <span class="name float-left">Cheryl Wheeler</span>
                    <span class="time float-right">10 minutes ago</span>
                    <p>Hello, this is an example msg</p>
                  </div>
                </a>
                <a class="dropdown-item media" href="#">
                  <span class="photo media-left"><img alt="avatar" src="{% static 'djello/images/avatar/4.jpg' %}"></span>
                  <div class="message media-body">
                    <span class="name float-left">Rachel Santos</span>
                    <span class="time float-right">15 minutes ago</span>
                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                  </div>
                </a>
              </div>
            </div>
          </div>
          <div class="user-area dropdown float-right">
            <a href="#" class="dropdown-toggle active" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img class="user-avatar rounded-circle" src="{% static 'djello/images/admin.jpg' %}" alt="User Avatar">
            </a>
            <div class="user-menu dropdown-menu" style="min-width: max-content;">
              {% block usertools %}
              {% if has_permission %}
                {% block userlinks %}
                  {% if user.is_active and user.is_staff %}
                    {% url 'django-admindocs-docroot' as docsroot %}
                    {% if docsroot %}
                      <a class="nav-link" href="{{ docsroot }}"><i class="fa fa-book"></i>{% trans 'Documentation' %}</a>
                    {% endif %}
                  {% endif %}
                  {% if user.has_usable_password %}
                    <a class="nav-link" href="{% url 'admin:password_change' %}"><i class="fa fa-asterisk"></i>{% trans 'Change password' %}</a>
                  {% endif %}
                  <a class="nav-link" href="{% url 'admin:logout' %}"><i class="fa fa-power-off"></i>{% trans 'Log out' %}</a>
                {% endblock %}
              {% endif %}
              {% endblock %}
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- /header -->
    <!-- Header-->


    {% block breadcrumbs %}
    <div class="breadcrumbs">
      <div class="breadcrumbs-inner">
        <div class="row m-0">
          <div class="col-sm-4">
            <div class="page-header float-left">
              <div class="page-title">
                <h1>{% if title %}{{ title }}{% endif %}</h1>
              </div>
            </div>
          </div>
          <div class="col-sm-8">
            <div class="page-header float-right">
              <div class="page-title">
                <ol class="breadcrumb text-right">
                  <li><a href="{% url 'admin:index' %}">{% trans 'Home' %}</a></li>
                </ol>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endblock %}
  {% endif %}

  {% block messages %}
    {% if messages %}
      {% for message in messages %}
        <div class="col-md-4 offset-md-6" style="bottom: 5px; position: fixed; z-index: 999">
          {% if message.tags == 'error' %}
          <div class="sufee-alert alert with-close alert-danger alert-dismissible fade show">
          {% else %}
          <div class="sufee-alert alert with-close alert-{{ message.tags|default:"info" }} alert-dismissible fade show">
          {% endif %}
            {{ message|capfirst }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
        </div>
      {% endfor %}
    {% endif %}
  {% endblock messages %}

  <!-- Content -->
  {% block pretitle %}{% endblock %}
  {% block content %}
    {% block object-tools %}{% endblock %}
    {{ content }}
  {% endblock %}
  {% block sidebar %}{% endblock %}
  <!-- END Content -->

  <div class="clearfix"></div>

  {% block footer %}
  <footer class="site-footer">
    <div class="footer-inner bg-white">
      <div class="row">
        <div class="col-sm-6">
          Copyright &copy; {% block branding %}{% endblock %}
        </div>
      </div>
    </div>
  </footer>
  {% endblock %}
</div>
<!-- /#right-panel -->



<script src="{% static 'djello/assets/js/vendor/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'djello/assets/js/popper.min.js' %}"></script>
<script src="{% static 'djello/assets/js/plugins.js' %}"></script>
<script src="{% static 'djello/assets/js/main.js' %}"></script>

<script src="{% static 'djello/assets/js/lib/chart-js/Chart.bundle.js' %}"></script>
<!--Chartist Chart-->
<script src="{% static 'djello/assets/js/lib/chartist/chartist.min.js' %}"></script>
<script src="{% static 'djello/assets/js/lib/chartist/chartist-plugin-legend.js' %}"></script> 
<script src="{% static 'djello/assets/js/lib/flot-chart/jquery.flot.js' %}"></script>
<script src="{% static 'djello/assets/js/lib/flot-chart/jquery.flot.pie.js' %}"></script>
<script src="{% static 'djello/assets/js/lib/flot-chart/jquery.flot.spline.js' %}"></script>
<script src="{% static 'djello/assets/weather/js/jquery.simpleWeather.min.js' %}"></script>
<script src="{% static 'djello/assets/weather/js/weather-init.js' %}"></script>
<script src="{% static 'djello/assets/js/lib/moment/moment.js' %}"></script>
<script src="{% static 'djello/assets/calendar/fullcalendar.min.js' %}"></script>
<script src="{% static 'djello/assets/calendar/fullcalendar-init.js' %}"></script>
<script>
  jQuery(document).ready(function($) {
    function get_with_csrf(url, success, error) {
      $.ajax({
        url : url,
        type : "GET",
        beforeSend: function(xhr, settings) {
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
        },
        success : success,
        error : error
      });
    };

    function getCookie(name) {
      var cookieValue = null;
      if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
          var cookie = jQuery.trim(cookies[i]);
          // Does this cookie string begin with the name we want?
          if (cookie.substring(0, name.length + 1) == (name + '=')) {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
          }
        }
      }
      return cookieValue;
    };

    for(i=0; i<initWidgets.length; i++) {
      get_with_csrf(
        initWidgets[i].dataUrl,
        initWidgets[i].successFunc,
        initWidgets[i].errorFunc);
    };
  });  // End of Document Ready 
</script>
{% block script %}{% endblock %}

</body>
</html>
