{% extends 'assessments/base.html' %}
{% load i18n template_tools %}

{% block head %}
    {{ block.super }}

    <link rel="stylesheet" href="{{ STATIC_URL }}css/jquery.datetimepicker.css" type="text/css" media="screen" charset="utf-8" />

    <script src="{{ STATIC_URL }}common/js/ajax-modal.js"></script>
    <script src="{{ STATIC_URL }}common/js/crsf_cookie.js"></script>
    <script src="{{ STATIC_URL }}common/js/modernizr.min.js"></script>
   <script type="text/javascript" src="{{ STATIC_URL }}trainings/js/jquery.datetimepicker.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            // Checking support for <input type="date"> using Modernizr:
            // http://modernizr.com/
            if (!Modernizr.inputtypes.date) {
                var options = {
                    format: '{{ DATE_INPUT_FORMAT }}',
                    lang:'{{ LANGUAGE_CODE }}',
                    timepicker: false
                };
                $( "#session__start_date_0" ).datetimepicker(options);
                $( "#session__start_date_1" ).datetimepicker(options);
            }
        });
    </script>
{% endblock %}

{% block section_title %}
    {% trans 'Certification validation' %}
{% endblock %}

{% block section_content %}
    <form action="" method="get" class="form-inline form-filter">
        {% for fieldset in filter.form.fieldsets %}
            <fieldset>
                {% if fieldset.legend %}
                    <legend>{{ fieldset.legend }}</legend>
                {% endif %}
                {% include 'extras/form.html' with form=fieldset display='inline' %}
            </fieldset>
        {% endfor %}
        <input type="submit" class="btn btn-primary" value="{% trans 'Apply' %}" />
        <a href="{{ competency_tree.get_certification_results_url }}" class="btn btn-secondary">{% trans 'Reset' %}</a>
    </form>
    <hr>
    {% block section_table %}
        <table class="table table-hover certification-results">
            <thead>
                <tr>
                    <th width="200px">{% trans 'Business unit' %}</th>
                    <th>{% trans 'Name' %}</th>
                    <th>{% trans 'Score' %}</th>
                    <th>{% trans 'Session Date' %}</th>
                    <th>{% trans 'Status' %}</th>
                    {% if is_job_profile_manager %}
                        <th>{% trans 'Force status' %}</th>
                    {% endif %}
                    <th>{% trans 'Adressed' %}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>

                {% for user_certification in certificationprogramuserstatus_list %}

                    <tr>
                        <td>{{ user_certification.session.training.business_unit.name }}</td>
                        <td>{{ user_certification.user.get_full_name }}</td>
                        <td>{{ user_certification.score }}%</td>
                        <td>{{ user_certification.session.start_date|date:'SHORT_DATE_FORMAT' }}</td>
                        <td>
                            {{ user_certification.status.name }}
                            {% if user_certification.is_forced %}<i class="fa fa-level-up"></i>{% endif %}
                        </td>
                        {% if is_job_profile_manager %}
                            <td>
                                <form method="post" action="{{ user_certification.get_update_url }}">{% csrf_token %}
                                    <input type="hidden" name="id" value="{{ user_certification.id }}">
                                    <select name="status">
                                        <option>{% trans 'Set new level' %}</option>
                                        {% for status in available_certification_statuses %}
                                            <option value="{{ status.id }}">
                                                {{ status.name }} ({{ status.global_threshold }}%)
                                            </option>
                                        {% endfor %}
                                    </select>
                                    <input class="btn btn-primary btn-xs" type="submit" value="{% trans 'OK' %}">
                                </form>
                            </td>
                        {% endif %}
                        <td>
                            {% if user_certification.is_validated %}
                                <a href="{{ user_certification.get_validate_url }}" class="btn btn-xs btn-success is_validated">
                                    <i class="fa fa-check"></i>
                                    <span>{% trans 'Yes' %}</span>
                                </a>
                            {% else %}
                                <a href="{{ user_certification.get_validate_url }}" class="btn btn-xs btn-warning is_validated">
                                    <i class="fa fa-times"></i>
                                    <span>{% trans 'No' %}</span>
                                </a>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{{ user_certification.get_detail_url }}" class="btn btn-primary btn-xs">
                                <i class="fa fa-eye"></i> {% trans 'View results' %}
                            </a>
                            <a href="{{ user_certification.get_pdf_url }}" class="btn btn-info btn-xs">
                                <i class="fa fa-download"></i> {% trans 'Download' %}
                            </a>
                        </td>
                    </tr>

                {% endfor %}

            </tbody>
        </table>
    {% endblock section_table %}

    {% pagination %}

    {% block section_table_javascript %}
        <script type="text/javascript">
            $(document).ready(function(){
                $('.is_validated').click(function(){
                    var self = this;
                    $.post($(this).prop('href'), function(){
                        // Update the classes
                        $(self).toggleClass('btn-success btn-warning');
                        $(self).children('i').toggleClass('fa-check fa-times');
                        // Change the label
                        var text = $(self).children('span').text();
                        $(self).children('span').text(
                            text == "{% trans 'Yes' %}" ? "{% trans 'No' %}" : "{% trans 'Yes' %}"
                        );
                    });
                    return false;
                });
            });
        </script>
    {% endblock section_table_javascript %}
{% endblock %}