{% extends 'board_admin.html' %}
{% load crispy_forms_tags %}
{% load static %}
{% block title %}
  <title>Staff</title>
  <style type="text/css">
  @media print {
      #printbtn {
          display :  none;
      }
  }
  </style>
  <meta name="description" content="">

{% endblock title %}

{% block content %}
{% load home_tags %}

<div class=" app-content">
	<div class="side-app">
    {% include 'partials/_alerts.html' %}
    <br>

  <div class="row">
    <div class="col-xl-12">
      <div class="card">
        <div id="printbtn" class="card-header">
          <div class="card-title text-apu-purple"><strong>Staff</strong></div>
        </div>
        <br>
        <div id="printbtn" class="text-center">
          <h2 class="form-group text-apu-purple">Search By</h2>
        </div>
        <div id="printbtn" class="col-md-12">
          <div class="box-element" id="form-wrapper">
            <form method="get" class="form-inline bg-apu-green text-apu-purple">
              {% for field in filtered_staff.form %}
                <strong>{{field.label}}:</strong>&nbsp{{field}}&nbsp&nbsp
              {% endfor %}
              <input type="submit" class="btn btn-apu-green" value="Find">
            </form>
          </div>
        </div>
        <div class="card-body">
          <div class="text-center">
            {% if total_staff > 1 %}
              <div class="form-group col-md-12">
                <h3 class="form-group text-apu-purple">Total: {{total_staff}}</h3>
              </div>
              {% else %}
              <div class="form-group col-md-12">
                <h3 class="form-group text-apu-purple">Total: {{total_staff}}</h3>
              </div>
              {% endif %}
          </div>

          <div class="table-responsive ">
            <table class="table table-bordered table-hover mb-0 text-nowrap">
              <thead class="text-apu-purple">
                <tr>
                  <th>QR CODE</th>
                  <th>STAFF NO</th>
                  <th>SURNAME</th>
                  <th>OTHER NAMES</th>
                  <th>PHONE NUMBER</th>
                  <th></th>
                </tr>
              </thead>
              <tbody class="">
                {% for member in staff_page_obj %}
                <tr class="">
                  <td class="text-center">
                      {% if member.qr_code %}
                          <img src="{{ member.qr_code.url }}"
                               alt="QR Code"
                               style="width:70px; height:70px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.2);">
                      {% else %}
                          <span class="badge badge-danger">No QR</span>
                      {% endif %}
                  </td>
                  <td>{{member.username}}</td>
                  <td>{{member.first_name}}</td>
                  <td>{{member.last_name}}</td>
                  <td>{{member.phone_number}}</td>
                  <td>
                    <div class="card-options">
                      <span class="dropdown-toggle fs-16" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"><i class="fa fa-ellipsis-v" ></i></span>
                      <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        <li><a href="admin-staff/update/{{member.id}}">View/Edit</a></li>
                      </ul>
                    </div>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
            <br>
            <nav id="printbtn" aria-label="...">
              <ul class="pagination justify-content-center">
                <li class="page-item"><a class="text-apu-green page-link" href="{% my_url 1 'page' request.GET.urlencode %}" tabindex="-1" aria-disabled="true">First</a></li>
                {% if staff_page_obj.has_previous %}
                  <li class="page-item"><a class="text-apu-green page-link" href="{% my_url staff_page_obj.previous_page_number 'page' request.GET.urlencode %}">{{staff_page_obj.previous_page_number}}</a></li>
                {% endif %}
                <li class="page-item active" aria-current="page"><a class="bg-apu-green page-link" href="{% my_url staff_page_obj.number 'page' request.GET.urlencode %}">{{staff_page_obj.number}}<span class="sr-only">(current)</span></a></li>
                {% if staff_page_obj.has_next %}
                  <li class="page-item"><a class="text-apu-green page-link" href="{% my_url staff_page_obj.next_page_number 'page' request.GET.urlencode %}">{{staff_page_obj.next_page_number}}</a></li>
                {% endif %}
                <li class="page-item"><a class="text-apu-green page-link" href="{% my_url staff_page_obj.paginator.num_pages 'page' request.GET.urlencode %}">Last</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock content%}