{% extends "main/layout.html" %}
{% block content %}
<div class="breadcrumb-holder">
    <div class="container-fluid">
        <ul class="breadcrumb">
			<li class="breadcrumb-item"><a href="{% url 'staff-perform-list' %}">LISTA AVALIASAUN</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 border-info rounded">
                <div class="card-header border-primary text-center">
                    <h2>PERFORMANCE EVALUATION</h2>
                    <h6>{{ legend|upper }}
                        {% if objects.objective and individual and behavior and objects.is_lock == False %}
                          <i class="fa fa-arrow-right"></i> <a href="{% url 'eval-conf-plan-lock' objects.hashed %}" class="btn btn-danger btn-sm">Chave <i class="fa fa-lock"></i></a>
                        {% endif %}
                        {% if objects.is_lock %}
                          
                          <i class="fa fa-arrow-right"></i> <a href="#" class="btn btn-danger btn-sm disabled">Chave Ona <i class="fa fa-check"></i></a>
                        {% endif %}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <table class="table table-sm "  border="0">
                                <tr >
                                    <td style="border-top: 0;" width="9%">Division</td> <td style="border-top: 0;">: {{objects.unit}}</td>
                                </tr>
                                <tr>
                                    <td style="border-top: 0;">Unit</td> <td style="border-top: 0;">:  {% if objects.department %}   {{objects.department}} {% else %} -  {% endif %}</td>
                                </tr>
                            </table>
                        </div>
                       {% include "perform_staff_components/planning/header.html" %}
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            
                            
                            {% include "perform_staff_components/planning/objectives.html" %}
                            <table class="table table-sm mb-0">
                                <tr>
                                    <th colspan="2" class="pb-0" style="border-top: 0;">2. PARAMETERS OF THE EVALUATIONS</th>
                                </tr>
                                <tr >
                                    <td colspan="2" class="pt-0" style="border-top: 0;"><strong style="font-size: 12px;">2.1 INDIVIDUAL OBJECTIVES</strong>
                                        {% if check_emp %}       
                                            {% if objects.is_lock == False %}                                          
                                                <i class="fa fa-arrow-right"></i> <a href="{% url 'eval-conf-plan-add-a' objects.hashed %}" class="btn btn-sm btn-success">Aumenta <i class="fa fa-plus"></i></a>
                                            {% endif %}                               
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr >
                                    <td width="50%" style="border-top: 0;" class="text-center"><small>(To be completed at the begining of the evaluation period - Initial Guidance Interview - January 08 to 15)</small></td>
                                    <td width="50%" style="border-top: 0;" class="text-center"><small>(To be completed within the follow-up period - June 20 to July 15)</small></td>

                                </tr>
                            </table>
                        </div>
                    </div>

                    {% include "perform_staff_components/planning/individual.html" %}
                    <div class="col-md-12 mt-2">
                        <table class="table table-sm table-bordered">
                            <tr>
                                <td width="20%">Evaluated</td><td>{% if objects.employee %}{{objects.employee}}{% else %}-{% endif %}</td>
                            </tr>
                            <tr>
                                <td width="20%">Individual Objective Date</td><td>{% if objects.obj_date %}{{objects.obj_date|date:"d F Y"}}{% else %}
                                    <a href="{% url 'eval-conf-plan-add-obj-date' objects.hashed %}" class="btn btn-sm btn-info">Aumenta Data <i class="fa fa-plus"></i></a>
                                    {% endif %}</td>
                            </tr>
                        </table>
                    </div>



                    <div class="row">
                        <div class="col-md-12">
                            <table class="table table-sm mb-0">
                                <tr >
                                    <td colspan="2" class="pt-0" style="border-top: 0;"><strong style="font-size: 12px;">2.2 PROFESSIONAL BEHAVIOR</strong>
                                        {% if check_emp %}
                                                {% if not behavior %}
                                                
                                                <i class="fa fa-arrow-right"></i> <a href="{% url 'eval-conf-plan-add-b' objects.hashed %}" class="btn btn-sm btn-success">Importa <i class="fa fa-download"></i></a>
                                                {% endif %}          
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr >
                                    <td width="50%" style="border-top: 0;" class="text-center"><small>(To be completed at the begining of the evaluation period - Initial Guidance Interview - January 08 to 15)</small></td>
                                    <td width="50%" style="border-top: 0;" class="text-center"><small>(To be completed within the follow-up period)</small></td>

                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <table id="table1" class="table table-sm mb-0">
                                <tr align="center" style=" border: 1px solid black;">
                                    <td colspan="2" style="border-top: 0;">Professional behaviors chosen (Provided as attached)</td>
                                </tr>
                                <tr align="center" style=" border: 1px solid black;">
                                    <td width="50%" style=" border: 1px solid black;"><strong>Areas</strong> </td>
                                    <td width="50%" style=" border: 1px solid black;"><strong>Indicators</strong> </td>
                                </tr>
                            </table>
                            
                        </div>
                        <div class="col-md-6">
                            <table id="table2" class="table table-sm mb-0">
                                <tr align="center" style=" border: 1px solid black;">
                                    <td colspan="3" style="border-top: 0;">Monitoring </td>
                                </tr>
                                <tr align="center" style=" border: 1px solid black;">
                                    <td width="30%" style=" border: 1px solid black;"><strong>Progress</strong> </td>
                                    <td width="30%" style=" border: 1px solid black;"><strong>Dificulties</strong> </td>
                                    <td width="40%" style=" border: 1px solid black;"><strong>Need Improvement</strong> </td>
                                </tr>
                            </table>
                            
                        </div>
                    </div>
                    {% for beh in behavior  %}
                        <div class="row">
                            <div class="col-md-6 d-flex flex-column">
                                <table class="table table-sm flex-fill mb-0">
                                    <tr align="center"  heigth="100%">
                                        <td width="50%" style="vertical-align: middle; border: 0.5px solid black;"><strong>{{beh.parameter.area}} </strong>
                                            {% if objects.is_lock == False %}                                          
                                                <a href="{% url 'eval-conf-behavior-delete-b' beh.hashed objects.hashed %}"><i class="fa fa-trash"></i></a>
                                            {% endif %}
                                         </td>
                                        <td width="50%" style=" border: 0.5px solid black; "><i>{{beh.parameter.indicator|safe}}</i> </td>
                                    </tr>

                                </table>
                            </div>
                            <div class="col-md-6 d-flex flex-column">
                                <table class="table table-sm flex-fill mb-0">
                                    <tr align="center" >
                                        <td width="30%" style=" vertical-align: middle; border: 0.5px solid black;">
                                            {% if beh.progress %}
                                              
                                                {{beh.progress|safe}}
                                            {% else %}
                                                -
                                            {% endif %}
                                        </td>
                                        <td width="30%" style="  vertical-align: middle; border: 0.5px solid black;">
                                            {% if beh.dificulties %}
                                              
                                                {{beh.dificulties|safe}}
                                            {% else %}
                                                -
                                            {% endif %}
                                        </td>
                                        <td width="40%" style=" vertical-align: middle;  border: 0.5px solid black;">
                                            {% if beh.need_improv %}
                                              
                                                {{beh.need_improv|safe}}
                                            {% else %}
                                                -
                                            {% endif %}
                                            </td>
                                      </tr>
                                </table>
                            </div>
                        </div>
                    {% endfor %}
                    <div class="col-md-12 mt-2">
                        <table class="table table-sm table-bordered">
                            <tr>
                                <td width="20%">Evaluated</td><td>{% if objects.employee %}{{objects.employee}}{% else %}-{% endif %}</td>
                            </tr>
                            <tr>
                                <td width="20%">Professional Behavior Date</td><td>{% if objects.ind_date %}{{objects.ind_date|date:"d F Y"}}{% else %}
                                    <a href="{% url 'eval-conf-plan-add-beh-date' objects.hashed %}" class="btn btn-sm btn-info">Aumenta Data <i class="fa fa-plus"></i></a>
                                    {% endif %}</td>
                            </tr>
                        </table>
                    </div>
                </div> <!--end card-body-->
            </div> <!--end card-->
        </div> <!--end col-->
    </div> <!--end row-->
</div>
{% endblock %}
{% block scripts %}
	<script type="text/javascript">
		$(document).ready(function() {
			$('#example').DataTable();
		} );
	</script>   
{% endblock %}