{% extends "main/layout.html" %}
{% load static %}
{% block content %}
<div class="breadcrumb-holder">
	<div class="container-fluid">
		<ul class="breadcrumb">
		    <li class="breadcrumb-item"><a href="{% url 'train-c-dash' %}">PAINEL TREINAMENTO</a></li>
			<li class="breadcrumb-item active">{{ legend|upper }}</li>
		</ul>
	</div>
</div>
<div class="container-fluid"><br/>
	<div class="row">
		<div class="col-sm-12">
			<div class="card shadow-lg pt-1 border-primary rounded">
				<div class="card-header border-primary">
					<center>
						<h2>{{ legend|upper }}</h2>
						<h4>{{ unit.name|upper }}</h4>
					</center>
				</div>
				<div class="card-body">
                    
					<section id='no-more-tables'>
						<table class="table table-sm table-bordered" id="example" width="100%" cellspacing="0">
							<thead>
								<tr align="center">
									<th>Nu.</th>
									<th class="text-left">Naran</th>
                                    <th>Pojisaun</th>
                                    <th class="text-center">#</th>
							</thead>
							<tbody>
							{% for obj in staffs %}
								<tr align="center">
									<td>{{ forloop.counter }}</td>
									<td class="text-left">
                                        {{ obj.employee.first_name }} {{ obj.employee.last_name|upper }}
									</td>
									<td>{{ obj.employee.contract.all.0.category }}</td>
                                    <td>
                                        <a href="{% url 'train-unit-gap-emp-list' obj.employee.hashed unit.pk %}" class="btn btn-sm btn-info">Detalha GAP Analysis</a>
                                    </td>
								</tr>
							{% endfor %}
							</tbody>
						</table>
					</section>
				</div> <!--end card-body-->
			</div> <!--end card-->
		</div> <!--end col-->
	</div> <!--end row-->
</div><!--end container-->
{% endblock %}
{% block scripts %}
	<script type="text/javascript">
		$(document).ready(function() {
			$('#example').DataTable();
		} );
	</script>
	<style>
		table td {
			border: none;
		}
	</style>
{% endblock %}