{% extends "base.html" %}

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

{% block js %}
    {{ block.super }}
    <script src="https://unpkg.com/checklist-model@1.0.0/checklist-model.js"></script>
    <script src="https://unpkg.com/ui-select@0.19.8/dist/select.min.js"></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>

    {% 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 ng-if="can_edit_this_class">
            <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 }}">Professor Assistente:</label>
                <p>{{$class.course.professors}}</p>
                {% 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}}</ui-select-match>
                        <ui-select-choices repeat="professor in classe.course.professors" group-by="">
                            <div ng-></div>
                            <div ng-bind-html="professor.id+' '+professor.id | 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>
        </div>
        <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.username }}</td>
                    <td>{{ student.email }}</td>
                    <td>{{ student.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.document_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.document_type == 'certificate', 'disabled': !student.can_emmit_receipt }">
                            <span ng-show="student.can_emmit_receipt && student.certificate.document_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.document_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 %}