{% extends "base.html" %}
{% load compress %}
{% load static %}
{% load i18n %}

{% block js %}
    {{block.super}}
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/ui-select@0.19/dist/select.min.css" />

    <script src="https://unpkg.com/tinymce@4.5.10/tinymce.min.js"></script>
    <script src="https://unpkg.com/angular-ui-tinymce@0.0.19/dist/tinymce.min.js"></script>
    <script src="{% static 'js/ui.tinymce.courses-legacy.config.js' %}"></script>

    <script src="https://unpkg.com/ui-select@0.19.8/dist/select.min.js"></script>
    <script src="https://unpkg.com/ng-file-upload@12.0.4/dist/ng-file-upload.min.js"></script>
    <script src="https://unpkg.com/angular-filter@0.5.17/dist/angular-filter.min.js"></script>
    <script src="https://unpkg.com/checklist-model@1.0.0/checklist-model.js"></script>

    {% compress js %}
    <script type="text/javascript" src="{% static 'js/messages/app.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/messages/controllers.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/messages/services.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/factories/timtec-models.js' %}"></script>

    <script type="text/javascript" src="{% static 'js/discussion-services.js' %}"></script>
    
    
    {% endcompress %}
{% endblock %}

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

{% block content %}

<div class="messages messages-list">
    <section class="page container-fluid">
        <header class="page-header" ng-controller="NewGlobalMessageController">
            <h2>Avisos</h2>
            {% if user.is_staff %}
            <div class="">
                <a class="btn btn-primary edit" ng-click="new_message()">Novo aviso</a>
            </div>
            {% endif %}
                <script type="text/ng-template" id="newMessageModal.html">
                    <div class="modal-header">
                        <button type="button" class="close" ng-click="cancel()" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Novo aviso</h4>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-danger" role="alert" ng-show="empty_msg_subject_error || empty_msg_body_error ">
                            <ul>
                                <li ng-show="empty_msg_subject_error"><a href="#id-title">Assunto do aviso</a></li>
                                <li ng-show="empty_msg_body_error"><a href="#wmd-input">Texto do aviso</a></li>
                            </ul>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" ng-model="new_message.subject" placeholder="{% trans 'Subject' %}"/>
                        </div>
                        <div class="form-group">
                            <textarea ui-tinymce
                                      ng-model="new_message.message" class="form-control" rows="10"
                                      placeholder="Mensagem" name="content" required></textarea>
                        </div>
                        <div class="form-group row">
                            <div class="students col-lg-12">
                                <p><label><input type="radio" ng-model="modal.selected_mode" ng-value="modal.modes.ALL_STUDENTS"> Enviar para todos os alunos da plataforma</label></p>
                                {% verbatim %}
                                <p><label><input type="radio" ng-model="modal.selected_mode" ng-value="modal.modes.SOME_GROUPS"> Especificar grupos</label></p>
                                <ui-select multiple theme="bootstrap" class="form-control" ng-model="groups.checked" ng-show="modal.selected_mode == modal.modes.SOME_GROUPS"  close-on-select="false">
                                    <ui-select-match placeholder="Escolha um ou mais grupos">{{ group_label($item) }}</ui-select-match>
                                    <ui-select-choices repeat="group.id as group in groups | filter: {name: $select.search}" group-by="contract_name">
                                        <div ng-bind-html="get_as_safe_html((group.name | highlight: $select.search))"></div>
                                    </ui-select-choices>
                                </ui-select>
                                {% endverbatim %}
                                <p><label><input type="radio" ng-model="modal.selected_mode" ng-value="modal.modes.SOME_STUDENTS"> Especificar usuários individualmente</label></p>
                                <p class="autocomplete" ng-show="modal.selected_mode == modal.modes.SOME_STUDENTS">
                                    <input type="text" id="search-user" class="form-control" ng-model="asyncSelected"
                                                    placeholder="Digite o nome ou email do usuário..."
                                                    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>
                                </p>
                                <table class="table table-list" ng-show="modal.selected_mode == modal.modes.SOME_STUDENTS && recipient_list.length">
                                    <tr>
                                        <th class="fullname">Nome completo</th>
                                        <th class="email">Email</th>
                                        <th class="username">Usuário</th>
                                        <th class="actions">Ações</th>
                                    </tr>
                                    <tr ng-repeat="student in recipient_list">
                                        {% verbatim %}
                                        <td>{{student.name}}</td>
                                        <td>{{student.email}}</td>
                                        <td>{{student.username}}</td>
                                        {% endverbatim %}
                                        <td class="textcenter"><button class="btn btn-warning" ng-click="remove_student($index)"><i class="fa fa-trash-o"></i></button></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" ng-click="cancel()">Fechar</button>
                            <button type="button" class="btn btn-success" ng-click="send()">Enviar</button>
                        </div>
                    </div>
                </script>


        </header>
        {% block messages_content %}
        <div ng-controller="MessagesOverviewController" ng-init="open_messages = {}">
            <div class="course_messages_group" ng-if="messages.length > 0" ng-repeat="(key, value) in messages | groupBy: 'course_name'">
                {% verbatim %}
                <div class="title-header">
                    <h3>{{key || 'Avisos gerais'}}</h3>
                    <button class="btn btn-link btn-sm"
                            ng-init="open_messages[key]=true"
                            ng-class="open_messages[key] ? 'hide-all': 'show-all'"
                            ng-click="open_messages[key]=!open_messages[key]">
                        <span ng-show="!open_messages[key]">ver</span>

                        <span ng-show="open_messages[key]">ocultar</span>
                    </button>
                </div>
                <div ng-show="open_messages[key]">
                    <div class="message" ng-repeat="message in value" ng-class="{'unread': !message.is_read}">
                        <div class="message-body">
                            <div class="message-header">
                                <h4 class="message-subject">{{ message.subject }}</h4>
                                <span class="message-date">{{ message.date|date:"dd/MM/yy" }}</span>
                            </div>
                            <div class="message-text">
                                <span ng-bind-html="strip_html(message.message | limitTo : 300)"></span>
                                <a ng-if="message.course_slug" class="btn btn-default see-more" ng-href="legacy/course/{{message.course_slug}}/message/{{message.id}}">
                                    ver aviso completo
                                </a>
                                <a ng-if="!message.course_slug" class="btn btn-default see-more" ng-href="legacy/message/{{message.id}}">
                                    ver aviso completo
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endverbatim %}
            </div>
            <div class="message" style="margin-bottom: 20px;" ng-if="messages.length == 0 || !messages">
                <div class="row">
                    <div class="col-lg-11">
                        <div class="body">
                          <span>
                              Não há avisos importantes para você no momento.
                          </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endblock %}
    </section>
    <!--  END COURSE CONTENT  -->






</div>
<!--  END COURSE CONTENT  -->

{% endblock %}