{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>SHMA | Users</title>

    <!-- Google Font: Source Sans Pro -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"
    />
       <!-- DataTables -->
       <link rel="stylesheet" href="{% static 'plugins/datatables-bs4/css/dataTables.bootstrap4.min.css'%}">
       <link rel="stylesheet" href="{% static 'plugins/datatables-responsive/css/responsive.bootstrap4.min.css'%}">
       <link rel="stylesheet" href="{% static 'plugins/datatables-buttons/css/buttons.bootstrap4.min.css'%}">
         <!-- Bootstrap4 Duallistbox -->
      <link rel="stylesheet" href="{% static 'plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css'%}">
       <!-- Font Awesome -->
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="{% static 'plugins/fontawesome-free/css/all.min.css' %}"
    />
    <!-- Theme style -->
    <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}" />
    <link rel="stylesheet" href="{% static 'dist/css/custom.css' %}">
  </head>
  <body class="hold-transition sidebar-mini layout-navbar-fixed">
    <!-- Site wrapper -->
    <div class="wrapper">
      <!-- ========== Nav ==============-->
      {% include 'parts/navbar.html' %}
      <!--========== Nav ==============-->
      <!-- ========== Aside ==============-->
      {% include 'parts/sidemenu.html' %}
      <!--========== Aside ==============-->
      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-6">
                <h1>Users</h1>
              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                  <li class="breadcrumb-item"><a href="#">Home</a></li>
                  <li class="breadcrumb-item active">Users</li>
                </ol>
              </div>
            </div>
          </div>
          <!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
          <!-- Default box -->
          <div class="card">
            <div class="card-header d-flex">
              <h3 class="card-title">Users List</h3>
              <a href="{% url 'add_user' %}" class="btn btn-default btn-sm ml-auto"><i class="fa fa-plus"></i> Add User</a>
            </div>
            <div class="card-body">
            <!--..spinner start-->
            <div class="spinner-container" id="spinner-container">
            <div class="spinner-overlay">
              <div class="spin"></div>
            </div>
          </div>
          <!--spinner end-->
              <table id="user-data-table" class="table table-striped table-hover table-sm">
                <thead>
                  
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
            <!-- /.card-body -->
            <div class="card-footer">Footer</div>
            <!-- /.card-footer-->
          </div>
          <!-- /.card -->
        </section>
        <!-- /.content -->
      </div>
      <!-- /.content-wrapper -->
      <!-- /.content-wrapper -->
      {% include 'parts/footer.html' %}
      <!-- Control Sidebar -->
      <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
      </aside>
      <!-- /.control-sidebar -->
      <!-- /.control-sidebar -->
    </div>
    <!-- ./wrapper -->

    <!-- jQuery -->
    <script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
    <!-- Bootstrap 4 -->
    <script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
    <!-- DataTables  & Plugins -->
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-buttons/js/dataTables.buttons.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-buttons/js/buttons.bootstrap4.min.js' %}"></script>
    <script src="{% static 'plugins/jszip/jszip.min.js' %}"></script>
    <script src="{% static 'plugins/pdfmake/pdfmake.min.js' %}"></script>
    <script src="{% static 'plugins/pdfmake/vfs_fonts.js' %}"></script>
    <script src="{% static 'plugins/datatables-buttons/js/buttons.html5.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-buttons/js/buttons.print.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-buttons/js/buttons.colVis.min.js' %}"></script>
    <!-- AdminLTE App -->
    <script src="{% static 'dist/js/adminlte.min.js' %}"></script>
    <script src="{% static 'api/users.js' %}"></script>
    <!-- AdminLTE for demo purposes -->
    <!--<script src="{% static 'dist/js/demo.js' %}"></script>-->
  </body>
</html>
