{% extends "trainings/trainingactivity_base_detail.html" %}

{% load i18n template_tools %}

{% block head %}
    {{ block.super }}
    {% include "cms/includes/orderable-head.html" %}
{% endblock %}

{% block activity_details %}
    <p>{% get_verbose_field_name evaluation 'evaluation_type' %} <b>{{ evaluation.get_evaluation_type_display }}</b></p>
    {% if evaluation.non_deleted_exercises %}
        <a href="" class="btn my-btn btn-default" data-toggle="modal" data-target="#evaluation-preview">
            <i class="fa fa-eye"></i>
            {% trans 'Preview the evaluation' %}
        </a>
    {% endif %}
{% endblock %}

{% block activity_contents %}
    <div class="clearfix">
        <div class="pull-left">
            <h2 class="content-title">{% trans 'Exercises' %}</h2>
        </div>
        {% if evaluation.is_editable_by_user %}
        <div class="pull-right">
            <span id="sort-order-save-confirmation"></span>
            <a href="" class="btn my-btn btn-default exercises-delete-button disabled">
                <i class="fa fa-trash"></i>
                {% trans 'Delete the selected exercises' %}
            </a>
            <a href="{{ evaluation.get_exercise_create_url }}" class="btn my-btn my-btn-red dialog-box" >
                <i class="fa fa-plus"></i>
                {% trans 'New exercise' %}
            </a>
        </div>
        {% endif %}
    </div>
    {% if evaluation.non_deleted_exercises %}
        <form action="{{ evaluation.get_exercises_delete_url }}" id="exercises-delete-form" method="post">{% csrf_token %}
            <div class="panel panel-default">
                <table class="table table-hover exercises-list orderable" data-orderable-post-url="{{ evaluation.get_exercises_sort_url }}" data-orderable-message-holder="#sort-order-save-confirmation">
                    {% for exercise in evaluation.non_deleted_exercises %}
                        <tr class="exercise-row {% if evaluation.is_editable_by_user %}dialog-box{% endif %}" data-href="{{ exercise.get_edit_url }}" >
                            {% if evaluation.is_editable_by_user %}
                                <td>
                                    {{ exercise.sort_order_display|safe }}
                                </td>
                                <td class="exercise-delete">
                                    <input type="checkbox" name="exercises" value="{{ exercise.id }}" class="exercise-delete-checkbox">
                                </td>
                            {% endif %}
                            <td width="65%">
                                {{ exercise.name }}
                            </td>
                            <td align="right">
                                {% blocktrans with cirteria_nb=exercise.non_deleted_criteria|length %}
                                {{ cirteria_nb }} criteria
                                {% endblocktrans %}
                            </td>
                            <td align="right">
                                {% blocktrans with start_range=exercise.start_range end_range=exercise.end_range %}
                                Score: {{ start_range }} to {{ end_range }}
                                {% endblocktrans %}
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
            {% if evaluation.is_editable_by_user %}
                <ul class="nav add-item">
                    <li>
                        <a href="{{ evaluation.get_exercise_create_url }}" class="a-default dialog-box" data-modal-classes="modal-lg">
                            <i class="fa fa-plus"></i>
                            {% trans 'New exercise' %}
                        </a>
                    </li>
                    <li class="exercises-delete-button disabled">
                        <a href="" class="a-default">
                            <i class="fa fa-trash"></i>
                            {% trans 'Delete the selected exercises' %}
                        </a>
                    </li>
                </ul>
            {% endif %}
        </form>
        <div class="modal fade" id="evaluation-preview">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">{{ object.verbose_activity_name }} ({{ evaluation.non_deleted_exercises|length }} {% trans 'exercises' %})</h4>
                    </div>
                    <div class="modal-body clearfix">
                        <ol class="media-list media-list-numbered">
                            {% for exercise in evaluation.non_deleted_exercises %}
                                <li class="media">
                                    <div class="media-body clearfix">
                                        <div class="pull-left">
                                            <h4 class="media-heading">
                                                {{ exercise.name }}
                                            </h4>
                                            <ul class="list-unstyled">
                                                {% for criterion in exercise.non_deleted_criteria %}
                                                    <li class="answer">
                                                        <i class="fa
                                                        fa-{% if criterion.criterion_type == criterion.CRITERION_TYPES.QUANTITATIVE %}bar-chart{% else %}comment-o{% endif %}"></i>
                                                        {{ criterion.description }}
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            {% endfor %}
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    <script type="text/javascript">
        $(document).ready(function(){
            var $deleteCheckboxes = $('.exercise-delete-checkbox'),
                $deleteButtons = $('.exercises-delete-button'),
                $deleteForm = $('#exercises-delete-form'),
                $questionRows = $('.exercise-row');

            $deleteCheckboxes.change(function(){
                if ($deleteCheckboxes.filter(':checked').length) {
                    $deleteButtons.removeClass('disabled')
                } else {
                    $deleteButtons.addClass('disabled')
                }
            });

            $deleteButtons.click(function(){
                $deleteForm.submit();
                return false;
            });

            {% if evaluation.is_editable_by_user %}
                $questionRows.css({cursor: 'pointer'});
                $questionRows.find('.exercise-delete, .sorthandletd').hover(function(){
                    $(this).parent('tr').removeClass('dialog-box');
                }, function(){
                    $(this).parent('tr').addClass('dialog-box');
                });
            {% endif %}
        });
    </script>
{% endblock %}