{% extends 'base.html' %}
{% load i18n %}
{% load is_coordinator %}
{% load static %}
{% load compress %}
{% load has_group %}

{% block js %}
    {{ block.super }}

    <script type="text/javascript" src="{% static 'tinymce-dist/tinymce.js' %}"></script>
    {% compress js %}
    <!-- Dashboard -->
    <script type="text/javascript" src="{% static 'js/dashboard/dashboard-app.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/dashboard/dashboard-controllers.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/core-services.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/discussion-services.js' %}"></script>

    <!-- Messages -->
    <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 'angular-filter/dist/angular-filter.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'checklist-model/checklist-model.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/factories/timtec-models.js' %}"></script>
    <script type="text/javascript" src="{% static 'angular-ui-select/dist/select.js' %}"></script>
    <script type="text/javascript" src="{% static 'angular-ui-tinymce/src/tinymce.js' %}"></script>

    <!-- Cards -->
    <script type="text/javascript" src="{% static 'js/cards-app.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/filters/he.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/cards-services.js' %}"></script>
    <script type="text/javascript" src="{% static 'angular-sanitize/angular-sanitize.js' %}"></script>

    <!-- Image upload dependencies for TinyMCE editors -->
    <script type="text/javascript" src="{% static 'js/discussion-services.js' %}"></script>
    <script type="text/javascript" src="{% static 'ng-file-upload/ng-file-upload.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/ui.tinymce.courses-legacy.config.js' %}"></script>
    {% endcompress %}
    <script type="text/javascript">
        tinyMCE.baseURL = '/static/tinymce-dist/';
    </script>

{% endblock %}

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

{% block content %}

<div ng-controller="DashboardCtrl" ng-cloak>

    <div ng-controller="MessagesDashboardController">
        <div ng-if="messages.length > 0">
            <section class="widget messages-widget container-fluid">
                <header class="widget-topbar line one-column">
                    <div class="column">
                        <div class="pull-left">
                            <h2 class="title">
                              {% verbatim %}
                                Você tem <span class="notification-bubble">{{messages.length}}</span>
                                <span ng-show="messages.length>1">avisos não lidos</span>
                                <span ng-show="messages.length==1">aviso não lido</span>
                              {% endverbatim %}
                            </h2>
                        </div>
                        <div class="pull-right"><a href="/messages/" class="btn btn-default list-all">todos os avisos</a></div>
                    </div>
                </header>

                {% verbatim %}
                <div class="messages">
                    <div class="message" ng-repeat="message in messages | limitTo:2">
                        <h3 class="message-course">{{ message.course_name || "Aviso Geral" }}</h3>
                        <h4 class="message-subject">{{ message.subject }}</h4>
                        <div class="message-body">
                            <span ng-bind-html="strip_html(message.message | limitTo : 400)"></span>
                        </div>
                        <a ng-if="message.course_slug" class="btn btn-default see-more" ng-href="/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="/message/{{message.id}}">
                            ver aviso completo
                        </a>
                    </div>
                </div>
                {% endverbatim %}
            </section>
        </div>
    </div>

    <section class="widget courses-widget container-fluid">

        <header class="widget-header line one-column">
            <div class="column">
                <div class="pull-left"><h2 class="widget-title">Meus cursos</h2></div>

                <div class="pull-right"><a href="/courses/" class="btn btn-success list-all">todos os cursos</a></div>

                <!-- visto apenas por assessoras
                    <a class="btn btn-success see-stats" href="#">ver estatísticas</a>
                -->

                <!--<form class="widget-filter form-inline">-->
                    <!--<label>mostrando:</label>-->
                    <!--<select class="form-control">-->
                        <!--<option>formações fixas</option>-->
                        <!--<option>formações fixas</option>-->
                        <!--<option>formações fixas</option>-->
                    <!--</select>-->
                <!--</form>-->
            </div>
        </header>

        {% verbatim %}
        <div class="courses line two-column fifty-fifty">
            <div class="course-box column" ng-repeat="course in courses">
                <div ng-if="course.course_student" class="line two-column">
                    <div class="course-progress column">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar"
                                 aria-valuenow="{{course.course_student.percent_progress}}" aria-valuemin="0" aria-valuemax="100"
                                 style="width: {{course.course_student.percent_progress}}%;">
                            </div>
                        </div>
                    </div>
                    <div class="progress-label column">{{course.course_student.percent_progress}}% completo</div>
                </div>

                <div class="line two-column">
                    <div class="course-thumb column">
                            <div ng-if="course.course_student">
                                <a ng-href="/course/{{ course.slug }}/resume" class="course-link">
                                    <div class="course-thumb-bg" ng-style="{'background-image':'url('+course.thumbnail_url+')'}"></div>
                                </a>
                                <a ng-href="/course/{{ course.slug }}/resume"
                                   class="continue">continuar curso</a>
                            </div>
                            <div ng-if="course.course_student===undefined">
                                <a ng-href="/course/{{ course.slug }}/intro" class="course-link">
                                   <div class="course-thumb-bg" ng-style="{'background-image':'url('+course.thumbnail_url+')'}"></div>
                                </a>
                                <a ng-href="/course/{{ course.slug }}/intro"
                                   class="start">começar curso</a>
                            </div>
                    </div>
                    <div class="course-description column">
                        <h3 class="course-title"><a href="/course/{{ course.slug }}/resume" class="course-link">{{ course.name }}</a></h3>
                        <div class="course-info">
                            <a href="/course/{{ course.course.slug }}/resume" class="course-link">
                            <p><b>Iniciado em:</b> {{course.course_student.start_date | date: "dd/MM/yyyy"}}</p>
                            <!--|<p><b>Cidade:</b> Camaçari</p>-->
                            <!--<p>você parou em <span class="unit-title">{{course.current_class.name}}</span></p>-->
                            </a>
                            <p ng-if="course.is_assistant_or_coordinator"><a ng-href="/course/{{ course.slug }}/reports" class="see-report">Ver relatório</a></p>
                            <p ng-if="!course.course_student">Você ainda não começou este curso</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endverbatim %}

    </section>
    {% if not request.user|has_group:"Espaço Aberto" %}
    <section class="widget forums forums-widget container-fluid">

        <header class="widget-header line one-column">
            <div class="column">
                <div class="pull-left">
                    <h2 class="widget-title">Fóruns</h2>
                </div>
                <div class="pull-right hidden-xs">
                    <a class="btn btn-success list-all" href="/discussion/">mostrar todos</a>
                    <a class="btn btn-success new-topic" href="/discussion/topic/new/#!/topic/new/">criar novo tópico</a>
                </div>
                <div class="pull-right dropdown visible-xs">
                    <button class="btn btn-default list-all dropdown-toggle" type="button" id="dropdownOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        opções
                    </button>
                    <ul class="dropdown-menu dropdown-options" aria-labelledby="dropdownOptions">
                        <li><a href="/discussion/">mostrar todos</a></li>
                        <li><a href="/discussion/topic/new/#!/topic/new/">criar novo tópico</a></li>
                    </ul>
                </div>

            </div>
        </header>

        <div class="line one-column">
            <div class="column">
                <h3 class="section-title">últimas postagens</h3>
            </div>
        </div>

        <div class="line two-column fifty-fifty">

            {% verbatim %}
            <div class="user-update column" ng-repeat="topic in latest_topics">
                <div class="user-icon">
                    <img ng-src="{{topic.author.picture}}" alt="{{topic.author.first_name}}" />
                </div>
                <div class="info">
                    <a ng-href="/profile/{{ topic.author.username }}"><b>{{topic.author.first_name}}</b></a> comentou no tópico <a ng-href="/discussion/topic/#!/topic/{{topic.id}}/" class="thread-name">{{topic.title | charLimiter:50}}</a>
                    no fórum <a ng-href="/discussion/#!/forum/{{ topic.forum }}">{{topic.forum_info.title}}</a></span>
                </div>
                <div class="actions">
                    <span class="action last-update">Última atividade <b>{{ topic.last_activity_at | dateFilter }}</b></span>
                    <span class="action liked"
                          ng-class="{ 'active': topic.count_likes }">{{topic.count_likes}} {{topic.count_likes > 1 || topic.count_likes == 0? 'gostaram':'gostou'}}</span>
                    <span class="action replies"
                          ng-class="{ 'active': topic.count_replies }">{{topic.count_replies}} {{topic.count_replies > 1 || topic.count_replies == 0? 'comentários':'comentário'}}</span>
                </div>
            </div>
            {% endverbatim %}
            </div>
        </div>
    </section>
    {% endif %}
    {% if request.user|has_group:"Espaço Aberto" %}
    <section class="widget cards container-fluid cards-widget" ng-if="cards.length > 0">
        <h2 class="widget-title">Assim se Faz</h2>
        <div class="presentation">
            <p><b>Assim se Faz</b> é um repositório de práticas culturais e pedagógicas que traz ideias que apoiam os
              profissionais da Educação Infantil nas suas interações com as crianças e a comunidade.</p>
        </div>
        {% verbatim %}
        <div class="cards-list">
            <div class="row">
                <div class="col-xs-12 col-md-6 col-lg-4" ng-repeat="card in cards">
                    <article class="card" ng-class="{'praticas-certificadas': card.is_certified, 'praticas-independentes': !card.is_certified}">
                        <header>
                            <a href="/cards/#!/{{card.id}}"><div class="card-image" style="background-image: url('{{card_image(card)}}')"></div></a>
                            <a class="category" ng-click="card_filter.audience = card.audience.name">{{ card.audience.name }}</a>

                            <a class="card-axis" ng-click="card_filter.axis = card.axis.name">{{ card.axis.name }}</a>
                            <h4 class="card-title"><a href="/cards/#!/{{ card.id }}">{{ card.title }}</a></h4>
                            <span class="card-author">publicado por <a href="/profile/{{card.author.username}}">
                              {{ card.author.name }}</a> <span class="action liked pull-right">{{ card.likes }}
                            </span></span>
                        </header>

                        <footer>
                            <div class="tags">
                                <a class="tag" ng-click="insert_tag(tag.name)" ng-repeat="tag in card.tags.slice(0,2)">#{{ tag.name }}</a>
                                <a class="tag" ng-show="card.tags.length > 2" href="/cards/#!/{{card.id}}">+{{ card.tags.length - 2 }}</a>
                            </div>
                        </footer>
                    </article>
                </div>
            </div>
        </div>
        {% endverbatim %}
        <a href="/cards/#!/" class="btn btn-primary see-more">conheça mais práticas</a>
    </section>
    {% endif %}
</div>
{% endblock %}