{% extends "base.html" %}

{% load staticfiles %}
{% load i18n %}
{% load compress %}
{% load is_course_coordinator %}

{% block js %}
    {{ block.super }}
    {% compress css %}
        <link rel="stylesheet" type="text/css" href="{% static 'angular-ui-select/dist/select.css' %}">
    {% endcompress %}

    <script type="text/javascript" src="{% url 'courses_legacy:djangular' %}"></script>
    {% compress js %}
    <script type="text/javascript" src="{% static 'js/directives/alertPopup.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/directives/fixedBar.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/core-services.js' %}"></script>

    <!-- Edit Class -->
    <script type="text/javascript" src="{% static 'js/directives/waiting-screen.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/edit-class/app.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/edit-class/controllers.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/edit-class/services.js' %}"></script>
    <script type="text/javascript" src="{% static 'checklist-model/checklist-model.js' %}"></script>
    <script type="text/javascript" src="{% static 'angular-ui-select/dist/select.js' %}"></script>
    {% endcompress %}

    <script>
        window.course_id = {{ class.course.pk }};
        window.class_id = {{ class.pk }};
    </script>
{% endblock %}

{% block wrapper_classes %}
wrapper-course-lesson
{% endblock %}

{% block body_attrs %}
  ng-app="edit_class"
{% endblock %}

{% block content %}
<!-- class-modal -->
<div class="modal fade" id="class-modal" tabindex="-1" role="dialog" aria-labelledby="class-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form role="form" method="post" action="{% url 'courses_legacy:class-add-users' pk=class.id %}">
                {% csrf_token %}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span></button>
                    <h4 class="modal-title" id="class-modal-label">{{ object.name }}</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="class-users-list">Usuários</label>
                        <textarea id="class-users-list" class="form-control" rows="10" placeholder="Copie a lista de usuários aqui. Apenas um usuário por linha." name="students_text"></textarea>
                        <input type="checkbox" name="auto_enroll" value="True"> Matricular usuários?
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-primary">Adicionar usuários</button>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="course course-classes" ng-controller="EditClassController">
    <!-- ACTIONS -->
    <div class="actions-menu" fixed-bar>
        <div class="container-fluid">
            <div class="pull-right">
                <i ng-hide="classe.$resolved" class="loading fa fa-refresh fa-spin"></i>
                <button class="btn btn-primary btn-sm save" ng-click="save()">
                    {% trans 'Save' %}
                </button>
            </div>

            {% include 'administration/_alert.html' %}

        </div>
    </div>
    <!-- END ACTIONS -->

    {% include "_course-header-inline.html"  with course=object.course %}
    <section class="classes-content page container-fluid">
        <div class="help-text"><i class="fa fa-caret-down" aria-hidden="true"></i> Edite o nome da turma</div>
        <div class="editable-title"><input type="text" ng-model="classe.name" placeholder="{% trans 'Class name' %}"></div>

        <div class="professor-assistant">
            <label for="{{ form.assistant.id_for_label }}">{% trans 'Assistant Professor' %}:</label>
            {% if user|is_course_coordinator:object.course %}
                {% verbatim %}
                <span class="help-text"><i class="fa fa-caret-down" aria-hidden="true"></i> Escolha o professor assistente</span>
                <ui-select multiple ng-model="classe.assistants" theme="bootstrap" title="Escolha os professores...">
                    <ui-select-match placeholder="Escolha os professores...">{{$item.first_name + " " + $item.last_name}}</ui-select-match>
                    <ui-select-choices repeat="professor in classe.course.professors" group-by="">
                        <div ng-bind-html="professor.first_name+' '+professor.last_name | highlight: $select.search"></div>
                    </ui-select-choices>
                </ui-select>
                {% endverbatim %}
            {% else %}
                {% for assistant in object.assistants.all %}
                    <label>
                      {% if forloop.counter0 > 0%}
                          |
                      {% endif %}
                      {{ assistant }}
                    </label>
                {% endfor %}
            {% endif %}
        </div>

        <div class="alert" role="alert"
             ng-class="{'alert-success': classe.user_can_certificate, 'alert-danger': !classe.user_can_certificate}">
            <div class="row">
                <div class="col-xs-8">
                    Selecione à direita se esta turma pode emitir ou não certificados.
                </div>
                <div class="col-xs-4">
                    <div class="user-can-certificate text-right">
                        <label for="can-certificate">
                            <input
                                ng-model="classe.user_can_certificate"
                                ng-change="save()"
                                type="checkbox"
                                id="can-certificate" />
                            Permite certificação
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="alert" role="alert" ng-show="classe.user_can_certificate"
             ng-class="{'alert-success': classe.user_can_certificate_even_without_progress, 'alert-danger': !classe.user_can_certificate_even_without_progress}">
            <div class="row">
                <div class="col-xs-8">
                    Marque se esta classe pode emitir certificados mesmo que o estudante não tenha atingido o progresso mínimo requerido.
                </div>
                <div class="col-xs-4">
                    <div class="user-can-certificate text-right">
                        <label for="can-certificate-progress">
                            <input
                                ng-model="classe.user_can_certificate_even_without_progress"
                                ng-change="save()"
                                type="checkbox"
                                id="can-certificate-progress" />
                            Permite certificação
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <form class="add-users">
            <div class="form-row">
                <label for="select-contract">Selecionar contrato: </label>
                <div class="autocomplete">
                    <select id="select-contract" class="form-control" ng-model="classe.contract" ng-options="contract.name for contract in contracts track by contract.id">
                        <option value="">Nenhum contrato</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                    <label for="search-user">Adicionar alunos: </label>
                    <div class="autocomplete">
                    <input type="text" id="search-user" class="form-control" ng-model="asyncSelected"
                        placeholder="{% trans 'Type the name, email or user name of the professor to search...' %}"
                        uib-typeahead="user as user.formated_name for user in getUsers($viewValue)"
                        typeahead-loading="loadingLocations"
                        typeahead-on-select="on_select_student($model); asyncSelected = '';"
                        typeahead-min-length="2"
                        typeahead-wait-ms="500">
                    <i ng-show="loadingLocations" class="loading fa fa-refresh fa-spin"></i>
                </div>
                <a class="btn btn-sm btn-primary add" data-toggle="modal" data-target="#class-modal">Adicionar vários usuários</a>
            </div>
        </form>

        <table class="table table-striped">
            <thead>
                <tr>
                    <th class="classname">Nome de usuário</th>
                    <th class="email">Email</th>
                    <th class="fullname">Nome completo (ordem alfabética)</th>
                    <th class="certificate" ng-show="classe.user_can_certificate">Certificado</th>
                    {% if object.course.default_class != object %}
                        <th class="actions">Ações</th>
                    {% endif %}
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="student in classe.students_details">
                    {% verbatim %}
                    <td>{{ student.user.username }}</td>
                    <td>{{ student.user.email }}</td>
                    <td>{{ student.user.name }}</td>
                    <td ng-show="classe.user_can_certificate">
                        <input type='checkbox' ng-disabled='!student.certificate || !classe.user_can_certificate_even_without_progress && !student.can_emmit_receipt' ng-click="toggle_certificate($index)" ng-checked="student.certificate.type == 'certificate'">
                    </td>
                    {% endverbatim %}

                    <td class="actions">
                        {% verbatim %}
                        <a ng-click="remove_item($index)" class="btn btn-warning"><i class="fa fa-trash-o"></i></a>
                        <a ng-hide="!student.certificate || !classe.user_can_certificate" ng-disabled='!student.can_emmit_receipt' ng-href="{{ student.certificate.url }}" class="btn btn-default" target="_blank" ng-class="{'btn-primary': student.certificate.type == 'certificate', 'disabled': !student.can_emmit_receipt }">
                            <span ng-show="student.can_emmit_receipt && student.certificate.type == 'receipt'" title="Clique aqui para ver a declaração deste estudante"><i class="fa fa-certificate"></i></span>
                            <span ng-show="student.can_emmit_receipt && student.certificate.type == 'certificate'" title="Clique aqui para ver o certificado deste estudante"><i class="fa fa-certificate"></i></span>
                            <span ng-show="!student.can_emmit_receipt" title="Não há certificados disponíveis"><i class="fa fa-certificate"></i></span>
                        </a>
                        {% endverbatim %}
                    </td>

                </tr>

                <tr ng-hide="classe.students.length > 0">
                    <td colspan="4">Nenhum aluno encontrado</td>
                </tr>
            </tbody>
        </table>

    </section>
</div>
{% endblock %}