{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% load is_enrolled %}

{% block js %} {{block.super}}
<script type="text/javascript" src="{% static 'js/my-courses/app.js' %}"></script>
<script type="text/javascript" src="{% static 'js/my-courses/controllers.js' %}"></script>
<script type="text/javascript" src="{% static 'js/my-courses/services.js' %}"></script>
<script type="text/javascript" src="{% static 'js/my-courses/filters.js' %}"></script>
<script type="text/javascript" src="{% static 'js/factories/timtec-models.js' %}"></script>
<script type="text/javascript" src="{% static 'js/directives/fixedBar.js' %}"></script>
<script type="text/javascript" src="{% static 'js/directives/file.js' %}"></script>
<script>window.user_id = {{ user.pk }};</script>
{% endblock %}

{% block wrapper_classes %}
wrapper-courses
{% endblock %}

{% block body_attrs %}
ng-app="my-courses"
{% endblock %}


{% block content %}
        <!-- CONTAINER -->
        <div class="courses-page page container-fluid" ng-controller="CourseListController">
            <header class="page-header">
                <h2><i class="fa fa-angle-double-right"></i> Cursos</h2>
            </header>
            {% verbatim %}
            <section class="courses-list" ng-cloak>

                <!-- COURSE -->
                <div class="course-box course-widget" ng-repeat="course in courses">
                    <div ng-if="course.course_student" class="row">
                        <div class="course-progress col-sm-5 col-md-4">
                            <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 col-sm-7 col-md-8">{{course.course_student.percent_progress}}% completo</div>
                    </div>
                    <div class="row">
                        <div class="course-thumb col-sm-5 col-md-4">
                            <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 col-sm-7 col-md-8">
                            <h3 class="course-title">
                                <a ng-if="course.course_student===undefined"
                                   ng-href="/course/{{ course.slug }}/intro"
                                   class="course-link">{{ course.name }}</a>
                                <a ng-if="course.course_student"
                                   ng-href="/course/{{ course.slug }}/resume"
                                   class="course-link">{{ course.name }}</a>
                            </h3>
                            <div  class="course-info">
                                <a ng-href="/course/{{ course.slug }}/resume" class="course-link">
                                    <p ng-if="course.course_student"><b>Iniciado em:</b> {{course.course_student.start_date | date: "dd/MM/yyyy"}}</p>
                                    <!--<p>você parou em <span class="unit-title">número e nome da aula</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 class="col-md-4 col-lg-3">-->
                    <!--<div class="course-filters">-->
                        <!--&lt;!&ndash;  FORM INLINE &ndash;&gt;-->
                        <!--<div class="form-inline">-->
                            <!--<ul>-->
                                <!--<li class="selected">todas</li>-->
                                <!--<li>em andamento</li>-->
                                <!--<li>formações fixas</li>-->
                                <!--<li>mini formações</li>-->
                                <!--<li>tic's e tac's</option>-->
                            <!--</ul>-->
                        <!--</div>-->
                        <!--&lt;!&ndash; END FORM INLINE &ndash;&gt;-->
                    <!--</div>-->
                <!--</div>-->
                {% endverbatim %}
            </section>
        </div>
        <!-- CONTAINER -->
{% endblock %}