{% extends 'staff/base.html' %}
<title>Admin | Dashboard</title>
{% block body_block %}
{% load staticfiles %}
<!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
  <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Daftar Staff 
      </h1>
    </section>
    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">Daftar Staff</h3>              
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
              <table id="example2" class="table table-hover">
              <thead>
                <tr>                  
                  <th>Username</th>
                  <th>Full Name</th>
                  <th>Peran</th>
                  <th>Foto</th>                  
                  <th>Aksi</th>
                </tr>         
              </thead>  
                {% for staff in daftar_staff %}
                <tr>                  
                  <td>{{ staff.username }} </td>
                  <td>{{ staff.full_name }} </td>
                  <td>{% if staff.role == 'admin' %}
                      <span class="label label-primary" style="font-size: 15px">Admin</span>
                      {% elif staff.role == 'surveyer' %}
                      <span class="label label-success" style="font-size: 15px">Surveyer</span>
                      {% else %}
                      <span class="label label-info" style="font-size: 15px">Quality Control</span>
                      {% endif %}
                  </td>
                  <td><div class="user-panel"><div class="pull-left image">
                      <img src="{% static staff.photo %}" class="img-circle" alt="User Image">
                      </div></div>
                  </td>                  
                  <td><a href="" class="btn btn-danger ">Hapus</a></td>
                </tr>
                {% endfor %}
              </table>

            </div>
            <!-- /.box-body -->
            <!-- /.box-body -->
            <div class="box-footer clearfix">
              <ul class="pagination pagination-sm no-margin pull-right">
              {% if daftar_staff.has_previous %}
                <li><a href="?page={{ daftar_staff.previous_page_number }}">&laquo;</a></li>
              {% else %}
                <li><a disabled>&laquo;</a></li>
              {% endif %}                
              {% for pg in daftar_staff.paginator.page_range %}
                {% if daftar_staff.number == pg %}
                    <li class="active"><a href="?page={{ pg }}">{{ pg }}</a></li>
                {% else %}
                    <li><a href="?page={{ pg }}">{{ pg }}</a></li>
                {% endif %}
              {% endfor %}
              {% if daftar_staff.has_next %}
                <li><a href="?page={{ daftar_staff.next_page_number }}">&raquo;</a></li>
                {% else %}
                <li><a disabled>&raquo;</a></li>
              {% endif %}                              
              </ul>
            </div>
          </div>
          <!-- /.box -->
        </div>
      </div>      
    </section>
{% endblock %}