{% extends 'SoCEA/layouts/base.html' %}
  {% load static %}
  {% block title %}  {% endblock title %}
  {% block extrastyle %}
  <!-- jsGrid -->
  <link rel="stylesheet" href="{% static 'table.css' %}">
    
  <link rel="stylesheet" href="{% static 'plugins/bs-stepper/css/bs-stepper.min.css' %}">
   <!-- summernote -->
   <link rel="stylesheet" href="{% static 'plugins/summernote/summernote-bs4.min.css' %}">
  
  
  {% endblock extrastyle %}
  {% block bodyclass %} hold-transition sidebar-mini {% endblock bodyclass %}
  {% block content %}
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper text-sm">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1>Approved Staff Background</h1>
            </div>
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                <li class="breadcrumb-item active"> Staff Background</li>
              </ol>
            </div>
          </div>
        </div><!-- /.container-fluid -->
      </section>
  
      <!-- Main content -->
      <section class="content">
          <div class="container">
              <div class="row">
               <div class="col-12">
                  <div class="card border-primary ">
                      <div class="card-header bg-secondary text-white">
                          <h4 class="card-title float-left"> <i class="livicon" data-name="list-ul" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>
                            Staff Background
                          </h4>
                       
                  </div>
                  <div id="new_user_field">
                      <div class="card-body table-responsive">
                        
<div class="col-md-12">
    <div class="row" style="background-color: lightcyan;">
        <div class="col-md-2">
            Full Name
        </div>
        <div class="col-md-2">
            Reviewed By
        </div>
        <div class="col-md-6">
            Request Details
        </div>
        <div class="col-md-2">
            status
        </div>
    </div>
    <hr>
    {% for i in aboutme %}
    <div class="row">
        <div class="col-md-2">
             {{ i.person_id.full_name }}
        </div>
        <div class="col-md-2">
            {{ i.approved_by.first_name }}  {{ i.approved_by.last_name }}
        </div>
       
        <div class="col-md-6" style="text-align: justify;">
            {{ i.about_me|safe }}
        </div>
        <div class="col-md-2">
            {% if i.status == '1' %}
            <span style="color: green;">Approved</span>
            {% endif %}
        </div>
        
        
    </div>
    <hr>
    {% endfor %}
</div>
<div class="pagination float-right">
    <span class="step-links">
        {% if aboutme.has_previous %}
            <a href="?page=1">&laquo; Start</a>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
            <a href="?page={{ aboutme.previous_page_number }}">Previous</a>&nbsp;&nbsp;&nbsp;&nbsp;
        {% endif %}
  
        <span class="current">
            Page {{ aboutme.number }} of {{ aboutme.paginator.num_pages }}.
        </span>&nbsp;&nbsp;&nbsp;&nbsp;
  
        {% if aboutme.has_next %}
            <a href="?page={{ aboutme.next_page_number }}">Next</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="?page={{ aboutme.paginator.num_pages }}">End &raquo;</a>
        {% endif %}
    </span>
  </div>
                      </div>
                  </div>
                  </div>
           </div>
          
           </div>
          </section>
  
      <!-- /.content -->
    </div>

   
    
  {% endblock content %}