{% include 'mfire/include/header.html' %}
   {% include 'mfire/include/topbar.html' %}
    {% include 'mfire/include/sidebar.html' %}
    <!-- 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> Operator List</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/mfire/dashboard/">Dashboard</a></li>
                            <li class="breadcrumb-item active">All Operator</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">

            <!-- Default box -->
            <div class="card">
                <div class="card-header">
                    <a href="/mfire/add-Operator/" class="btn btn-primary text-white ml-auto" style="margin-left:auto;">Add Operator</a>
                </div>
                <div class="card-body">
<!--<div class="col-sm-12 col-md-6"><div id="example1_filter" class="dataTables_filter"><label>Search:<input oninput="Searchuser(this,'employee')" id="searchusername" type="search" class="form-control form-control-sm" placeholder="" aria-controls="example1"></label></div></div>-->
                        <table id="example2" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                                    <th>#No.</th>
                                                    <th>Operator Name</th>
                                                    <th>Email</th>
                                                    <th>Mobile Number</th>
                                                    <th>Password</th>
                                                    <th>Action</th>
                                                </tr>
                            </thead>
                            <tbody id="searcheduser">
                                {% for i in employees %}
                                
					            	<tr>
					  <td>#{{forloop.counter}}</td>
					  <td>{{i.first_name}} {{i.last_name}}</td>
					  <td>{{i.email}}</td>
					  <td>{{i.phone}}</td>
					  <td><form method="post" action="/set_password/">
					      {% csrf_token %}
					      <input type="text" name="password" required>
					      <input type="hidden" name="id" value="{{i.id}}">
					       <input type="submit" class="btn btn-sm btn-primary" value="Set">
					  </form></td>
					 
					  <td>{% if i.is_active == 1 %} <a class="btn btn-primary btn-sm" href="/mfire/deleteuser/{{i.id}}/0/"> Active </a> {% else %} <a class="btn btn-danger btn-sm" href="/mfire/deleteuser/{{i.id}}/1/"> Deactive </a>{% endif %}
					  
					  <a class="btn btn-primary btn-sm" href="/mfire/updateemp/?emp={{i.id}}">Edit</a>
					  </td>
					  </tr>
					  {% endfor %}
                                </tbody>
                        </table>
                        
                        <!--start pagination -->
                        <div class="col-sm-12 col-md-12 mt-3">
                            <div class="dataTables_paginate paging_simple_numbers" id="example1_paginate">
                                <ul class="pagination">
                                    {% if employees.has_previous %}
                                    <li class="paginate_button page-item previous" id="example1_previous">
                                        <a href="?page=1" aria-controls="example1" data-dt-idx="0" tabindex="0" class="page-link">First</a>
                                    </li>
                                    <li class="paginate_button page-item previous" id="example1_previous">
                                        <a href="?page={{ employees.previous_page_number }}" aria-controls="example1" data-dt-idx="0" tabindex="0" class="page-link">Previous</a>
                                    </li>
                                    {% endif %}

                                {% for num in employees.paginator.page_range %}
  {% if employees.number == num %}
   <li class="paginate_button page-item ">
                                        <a href="?page={{ num }}" aria-controls="example1" data-dt-idx="1" tabindex="0" class="page-link">{{num}}</a>
                                    </li>
  {% elif num > employees.number|add:'-3' and num < employees.number|add:'3' %}
  <li class="paginate_button page-item ">
                                        <a href="?page={{ num }}" aria-controls="example1" data-dt-idx="1" tabindex="0" class="page-link">{{num}}</a>
                                    </li>
  {% endif %}
{% endfor %}
                                
                                    {% if employees.has_next %}
                                    <li class="paginate_button page-item next" id="example1_next">
                                        <a href="?page={{ employees.next_page_number }}" aria-controls="example1" data-dt-idx="3" tabindex="0" class="page-link">Next</a>
                                    </li>
                                    <li class="paginate_button page-item next" id="example1_next">
                                        <a href="?page={{ employees.paginator.num_pages }}" aria-controls="example1" data-dt-idx="3" tabindex="0" class="page-link">Last</a>
                                    </li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                    <!-- end padination -->

                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <script>
    $(document).ready(function(){
       $('#example2').dataTable({
           "bPaginate":false 
        }); 
    });
    </script>

    {% include 'mfire/include/footer.html' %}