{% extends "main/layout.html" %}
{% load static %}
{% block content %}
<div class="breadcrumb-holder">
	<div class="container-fluid">
		<ul class="breadcrumb">
			<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 border-info rounded">
                <div class="card-header border-primary">
                    <center>
                        <h2 class="mb-0">{{legend|upper}}</h2>
                    </center>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-bordered" id="example" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>NU.</th>
                                <th>NARAN FUNSIONARIO/A</th>
                                <th class="text-center">GENERU</th>
                                <th>KOLOKASAUN</th>
                            </tr>
                        </thead>
                        <tbody>


                    <tr style="background-color: rgb(223, 223, 223);"><th colspan="4" ><h5 class="  text-center mb-0">PRESIDENTE & VICE - PRESIDENTE
                        <a href="{% url 'man-de-list' %}"><i class="fa fa-file-text"></i></a></h5></th></tr>
                    {% if des %}
                        {% for dg in des %}
                        <tr>
                            <td data-title="Nu.">{{ forloop.counter }}</td>
                            <td data-title="Naran"><a href="{% url 'emp-detail' dg.employee.hashed %}" target="_blank">{{ dg.employee }}</a></td>
                            <td data-title="Sexu" align="center">{{ dg.employee.sex }}</td>
                            <td data-title="Diresaun Geral">{{ dg.de }}</td>
                        </tr>
                        {% endfor %}
                    {% endif %}


                    <tr style="background-color: rgb(223, 223, 223);"><th colspan="4"><h5 class="mb-0 text-center">CHEFE DIVIZAUN
                        <a href="{% url 'man-unit-list' %}"><i class="fa fa-file-text"></i></a></h5></th></tr>
                {% if units %}
                    {% for unit in units %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td><a href="{% url 'emp-detail' unit.employee.hashed %}" target="_blank">{{ unit.employee }}</a></td>
                        <td align="center">{{ unit.employee.sex }}</td>
                        <td>{{ unit.unit }}</td>
                    </tr>
                    {% endfor %}
                {% endif %}


                    
                        <tr style="background-color: rgb(223, 223, 223);"><th colspan="4"><h5 class="mb-0 text-center" >CHEFE EKIPA
                            <a href="{% url 'man-dep-list' %}"><i class="fa fa-file-text"></i></a></h5></th></tr>
                    {% if deps %}
                        {% for dep in deps %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td><a href="{% url 'emp-detail' dep.employee.hashed %}" target="_blank">{{ dep.employee }}</a></td>
                            <td align="center">{{ dep.employee.sex }}</td>
                            <td>{{ dep.department }}</td>
                        </tr>
                        {% endfor %}
                    {% endif %}



                        



                            
                        </tbody>
                    </table>
                </div> <!--end card-body-->
            </div> <!--end card-->
        </div> <!--end col-->
        <div class="col-md-12">
            <iframe src="{% url 'organogram_file' organograma.pk %}#toolbar=0&navpanes=0" frameborder="0" width="100%" height="750"></iframe>
        </div>
    </div> <!--end row-->
</div>
{% endblock %}
{% block scripts %}
	<script type="text/javascript">
		$(document).ready(function() {
			$('#example').DataTable();
		} );
	</script>
{% endblock %}