{% extends 'base.html' %}

{% block body %}

<!-- .app -->
<div class="app">
  <!--[if lt IE 10]>
  <div class="page-message" role="alert">You are using an <strong>outdated</strong> browser. Please <a class="alert-link" href="http://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</div>
  <![endif]-->
  <!-- .app-header -->
  <header class="app-header app-header-dark">
    <!-- .top-bar -->
    <div class="top-bar">
      <!-- .top-bar-brand -->
      <div class="top-bar-brand">
        <!-- toggle aside menu -->
        <button class="hamburger hamburger-squeeze mr-2" type="button" data-toggle="aside-menu" aria-label="toggle aside menu"><span class="hamburger-box"><span class="hamburger-inner"></span></span></button> <!-- /toggle aside menu -->
        <a href="/"><img src="/assets/images/logo-yellow.png" height="35px"></a>
      </div><!-- /.top-bar-brand -->
      <!-- .top-bar-list -->
      <div class="top-bar-list">
        <!-- .top-bar-item -->
        <div class="top-bar-item px-2 d-md-none d-lg-none d-xl-none">
          <!-- toggle menu -->
          <button class="hamburger hamburger-squeeze" type="button" data-toggle="aside" aria-label="toggle menu"><span class="hamburger-box"><span class="hamburger-inner"></span></span></button> <!-- /toggle menu -->
        </div><!-- /.top-bar-item -->

        <!-- .top-bar-item -->
        <div class="top-bar-item top-bar-item-right px-0 d-none d-sm-flex">
          <!-- .nav -->
          <ul class="header-nav nav">

          </ul><!-- /.nav -->
          <!-- .btn-account -->
          <div class="dropdown d-flex">
            <button class="btn-account d-none d-md-flex" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="user-avatar user-avatar-md"><img src="/assets/images/avatars/unknown-profile.jpg" alt=""></span> <span class="account-summary pr-lg-4 d-none d-lg-block"><span class="account-name">{{ current_user.name }}</span> <span class="account-description">{{ current_user.email }}</span></span></button> <!-- .dropdown-menu -->
            <div class="dropdown-menu">
              <div class="dropdown-arrow ml-3"></div>
              <h6 class="dropdown-header d-none d-md-block d-lg-none"> {{ current_user.name }} </h6><a class="dropdown-item" href="/profile/edit"><span class="dropdown-icon oi oi-person"></span> My Profile</a> <a class="dropdown-item" href="/logout"><span class="dropdown-icon oi oi-account-logout"></span> Logout</a>
            </div><!-- /.dropdown-menu -->
          </div><!-- /.btn-account -->
        </div><!-- /.top-bar-item -->
      </div><!-- /.top-bar-list -->
    </div><!-- /.top-bar -->
  </header><!-- /.app-header -->
  <!-- .app-aside -->
  <aside class="app-aside app-aside-expand-md app-aside-light">
    <!-- .aside-content -->
    <div class="aside-content">
      <!-- .aside-header -->
      <header class="aside-header d-block d-md-none">
        <!-- .btn-account -->
        <button class="btn-account" type="button" data-toggle="collapse" data-target="#dropdown-aside"><span class="user-avatar user-avatar-lg"><img src="/assets/images/avatars/unknown-profile.jpg" alt=""></span> <span class="account-icon"><span class="fa fa-caret-down fa-lg"></span></span> <span class="account-summary"><span class="account-name">{{ current_user.name }}</span> <span class="account-description">{{ current_user.email }}</span></span></button> <!-- /.btn-account -->
        <!-- .dropdown-aside -->
        <div id="dropdown-aside" class="dropdown-aside collapse">
          <!-- dropdown-items -->
          <div class="pb-3">
            <a class="dropdown-item" href="/profile/edit"><span class="dropdown-icon oi oi-person"></span> Profili</a> <a class="dropdown-item" href="/logout"><span class="dropdown-icon oi oi-account-logout"></span> Dil</a>
          </div><!-- /dropdown-items -->
        </div><!-- /.dropdown-aside -->
      </header><!-- /.aside-header -->
      <!-- .aside-menu -->
      <div class="aside-menu overflow-hidden">
        <!-- .stacked-menu -->
        <nav id="stacked-menu" class="stacked-menu">
          <!-- .menu -->
          <ul class="menu">
            <!-- .menu-item -->
            <li class="menu-item {% if controller == 'Home' %}has-active{% endif %}">
              <a href="/" class="menu-link"><span class="menu-icon fas fa-home"></span> <span class="menu-text">Dashboard</span></a>
            </li><!-- /.menu-item -->
            {% if {module: 'jobs', action: 'index'} in privileges %}
            <!-- .menu-item -->
            <li class="menu-item {% if controller == 'jobs' or controller == 'rooms' %}has-active{% endif %}">
              <a href="/jobs/index" class="menu-link"><span class="menu-icon fas fa-hard-hat"></span> <span class="menu-text">Jobs</span></a>
            </li><!-- /.menu-item -->
            {% endif %}
            {% if {module: 'job_files', action: 'index'} in privileges %}
            <!-- .menu-item -->
            <li class="menu-item {% if controller == 'job-files' %}has-active{% endif %}">
              <a href="/job-files/index" class="menu-link"><span class="menu-icon fas fa-file-archive"></span> <span class="menu-text">Job Files</span></a>
            </li><!-- /.menu-item -->
            {% endif %}
            {% if {module: 'clients', action: 'index'} in privileges %}
            <!-- .menu-item -->
            <li class="menu-item {% if controller == 'clients' %}has-active{% endif %}">
              <a href="/clients/index" class="menu-link"><span class="menu-icon fas fa-users"></span> <span class="menu-text">Clients</span></a>
            </li><!-- /.menu-item -->
            {% endif %}
            {% if {module: 'users', action: 'index'} in privileges %}
            <!-- .menu-item -->
            <li class="menu-item {% if controller == 'users' %}has-active{% endif %}">
              <a href="/users/index" class="menu-link"><span class="menu-icon fas fa-user-lock"></span> <span class="menu-text">Users</span></a>
            </li><!-- /.menu-item -->
            {% endif %}
            {%
              if {module: 'content_categories', action: 'index'} in privileges or
              {module: 'content_conditions', action: 'index'} in privileges or
              {module: 'content_units', action: 'index'} in privileges
            %}
            <!-- .menu-item -->
            <li class="menu-item has-child {% if controller in ['content-categories', 'content-conditions', 'content-units'] %}has-active{% endif %}">
              <a href="#" class="menu-link"><span class="menu-icon oi oi-wrench"></span> <span class="menu-text">Settings</span></a> <!-- child menu -->
              <ul class="menu">
                {% if {module: 'content_categories', action: 'index'} in privileges %}
                <li class="menu-item {% if controller == 'content-categories' %}has-active{% endif %}">
                  <a href="/content-categories/index" class="menu-link">Content Categories</a>
                </li>
                {% endif %}
                {% if {module: 'content_conditions', action: 'index'} in privileges %}
                <li class="menu-item {% if controller == 'content-conditions' %}has-active{% endif %}">
                  <a href="/content-conditions/index" class="menu-link">Content Conditions</a>
                </li>
                {% endif %}
                {% if {module: 'content_units', action: 'index'} in privileges %}
                <li class="menu-item {% if controller == 'content-units' %}has-active{% endif %}">
                  <a href="/content-units/index" class="menu-link">Content Units</a>
                </li>
                {% endif %}
              </ul><!-- /child menu -->
            </li><!-- /.menu-item -->
            {% endif %}
          </ul><!-- /.menu -->
        </nav><!-- /.stacked-menu -->
      </div><!-- /.aside-menu -->
    </div><!-- /.aside-content -->
  </aside><!-- /.app-aside -->

  <!-- .app-main -->
  <main class="app-main">
    <!-- .wrapper -->
    <div class="wrapper">
      <!-- .page -->
      <div class="page {% block page_css_class %}{% endblock %}">

        {% block page_nav %}
        {% endblock %}

        <!-- .page-inner -->
        <div class="page-inner">

          {% for message in flash_messages %}
              <div class="alert alert-{{ message.type }} alert-dismissible fade show">
                <button type="button" class="close" data-dismiss="alert">×</button>  {{ message.body }}
              </div>
          {% endfor %}

          <!-- .page-title-bar -->
          <header class="page-title-bar">
            <div class="d-flex justify-content-between">
              <!-- page title stuff goes here -->
              <h1 class="page-title"> {% block before_title %}{% endblock %} {% block title %}{% endblock %} {% block after_title %}{% endblock %}</h1>
              {% block button_toolbar %}{% endblock %}
            </div>
            {% block subtitle %}{% endblock %}
          </header><!-- /.page-title-bar -->
          <!-- .page-section -->
          <div class="page-section">
            <!-- .section-block -->
            <div class="section-block">
              <!-- page content goes here -->

              {% block page_content %}
              {% endblock %}

              <!-- Alert Danger Modal -->
              <div class="modal modal-alert fade" id="alerdDelete" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="alerdDeleteLabel" aria-hidden="true">
                <!-- .modal-dialog -->
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <!-- .modal-content -->
                  <div class="modal-content">
                    <!-- .modal-header -->
                    <div class="modal-header">
                      <h5 id="alerdDeleteLabel" class="modal-title">
                        <i class="fa fa-exclamation-triangle text-red mr-1"></i> Are you sure you want to delete this record? </h5>
                    </div><!-- /.modal-header -->
                    <!-- .modal-footer -->
                    <div class="modal-footer">
                      <a class="btn btn-danger btn-lg btn-ok">Delete <i class="far fa-trash-alt"></i></a>
                      <button type="button" class="btn btn-lg btn-subtle-dark" data-dismiss="modal">Cancel</button>
                    </div><!-- /.modal-footer -->
                  </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
              </div><!-- /.modal -->

            </div><!-- /.section-block -->
          </div><!-- /.page-section -->
        </div><!-- /.page-inner -->
        {% block page_sidebar %}
        {% endblock %}
      </div><!-- /.page -->
    </div><!-- /.wrapper -->
  </main><!-- /.app-main -->
</div><!-- /.app -->

{% endblock %}

{% block inner_pages_includes %}
<!-- BEGIN PLUGINS JS -->
<script src="/assets/vendor/pace/pace.min.js"></script>
<script src="/assets/vendor/stacked-menu/stacked-menu.min.js"></script>
<script src="/assets/vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!-- END PLUGINS JS -->

  {% block page_includes %}
  {% endblock %}

<script type="text/javascript">
  $('#alerdDelete').on('show.bs.modal', function(e) {
      $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
  });
</script>
{% endblock %}