{% extends 'base_index.html' %}
{% load course_filter %}
{% block title %}Курс {{ course.head.title }}{% endblock %}
{% block content %}

  <div class="col">
      <div class="course_progress_bar" style="    width: 100%;
    background: #ffc;
    position: fixed;
    z-index: 2000;left: 0;"></div>
    <!-- main header -->
      <div style="background:url({{ course.head.big_img }}) top right; background-size:cover">
      <div class="visible-sm visible-xs" style="background-color: rgba(0, 0, 0, 0.5);">
            <div class="wrapper-lg">
              <div class="row m-t">
                <div class="col-sm-7">
                  <div class="clear m-b">
                         <div class="panel-heading no-border" style="background: {{ course.head.level.background }};color:{{ course.head.level.color }};">
                            <span class="text-lt ">{{ course.head.level.title }} уровень</span>
                          </div>
                    <div class="m-b m-t-sm">
                      <span class="h1 text-u-c" style="font-weight: bold;color: #fff;   ">
                          {{ course.head.title }}
                      </span>
                    </div>
                        {% if course.head.skills %}
                        <div style="color: #fff;margin-bottom: 5px;">
                            <b style="margin-right: 5px;">Приобретаемые навыки:</b>
                            {% for skill in course.head.skills %}
                                <span class="label font-normal text-white" style="background: {{ skill.color }}">{% if skill.mini_icon %}<img src="{{ skill.mini_icon.url }}" style="margin-top: -1px;width: 10px;
    height: 10px;
    margin-right: 5px;">{% endif %}{{ skill }}</span>
                            {% endfor %}
                        </div>
                  {% endif %}
                  <div style="color: #fff;">
                      {{ course.head.lessons }} урока(-ов)
                  </div>
                  </div>
                </div>
              <div class="col-sm-5" style="text-align: center;">
                        {% if course.head.progress != 0 %}
                              <div class="chart" data-percent="{{ course.head.progress }}" data-scale-color="#fff"
                                   style="text-align: center;color: #fff;">
                                  <span id="canvas_length">{{ course.head.progress }}%</span>
                              </div>
                        {% endif %}
              </div>
              </div>
            </div>
      </div>
      <div class="hidden-sm hidden-xs wrapper-lg">
              <div class="row m-t">
                <div class="col-sm-7">
                  <div class="clear m-b">
                         <div class="panel-heading no-border" style="background: {{ course.head.level.background }};color:{{ course.head.level.color }};">
                            <span class="text-lt ">{{ course.head.level.title }} уровень</span>
                          </div>
                    <div class="m-b m-t-sm">
                      <span class="h1 text-u-c" style="font-weight: bold;color: #fff;   ">
                          {{ course.head.title }}
                      </span>
                    </div>
                        {% if course.head.skills %}
                        <div style="color: #fff;margin-bottom: 5px;">
                            <b style="margin-right: 5px;">Приобретаемые навыки:</b>
                            {% for skill in course.head.skills %}
                                <span class="label font-normal text-white" style="background: {{ skill.color }}">{% if skill.mini_icon %}<img src="{{ skill.mini_icon.url }}" style="margin-top: -1px;width: 10px;
    height: 10px;
    margin-right: 5px;">{% endif %}{{ skill }}</span>
                            {% endfor %}
                        </div>
                  {% endif %}
                  <div style="color: #fff;">
                      {{ course.head.lessons }} урока(-ов)
                  </div>
                  </div>
                </div>
              <div class="col-sm-5" style="text-align: center;">
                        {% if course.head.progress != 0 %}
                              <div class="chart" data-percent="{{ course.head.progress }}" data-scale-color="#fff"
                                   style="text-align: center;color: #fff;">
                                  <span id="canvas_length">{{ course.head.progress }}%</span>
                              </div>
                        {% endif %}
              </div>
              </div>
            </div>
      </div>
      <div class="wrapper-md">
        <div class="row">

          <ul class="timeline">
                  <p style="float: right;margin-right: 10px;text-align: center;">
                    <i class="glyphicon glyphicon-ok"></i>  &nbsp;Просмотрено  &nbsp;
                    <i class="glyphicon glyphicon-time"></i>  &nbsp;Доступно  &nbsp;
                    <i class="glyphicon glyphicon-remove"></i>  &nbsp;Не доступно  &nbsp;
                </p>
                  <li class="tl-header">
                    <div class="btn btn-success disabled">Старт</div>
                  </li>
                <script>
                    window.e = 100/{{ course.length }};
                </script>
              {% for i in course.themes %}

                  {% if i.head.status.flag == 'A' %}
                      <script>
                        window.current = {{ i.head.mid }}
                      </script>
                  {% endif %}

                  <script>
                  $('.course_progress_bar').append('<div class="label label-progress label-{% if i.head.type.flag == 'Ex' %}warning{% else %}{{ i.head.status.color }}{% endif %}" onclick="$(\'html,body\').stop().animate({ scrollTop: $(\'[name=theme{{ i.head.mid }}]\').offset().top }, 1000);" data-toggle="tooltip" data-placement="bottom" title="{{ i.head.title|safe }}" style="cursor:pointer;height: 5px;width:'+window.e+'%;float:left;padding: 0;margin: 0;border-radius: 0;border-left: 1px solid #fff;"> </div>');
                  </script>

                  <li class="tl-item tl-left">
                    <div class="tl-wrap b-{{ i.head.status.color }}">
                        {% if i.head.lessons_length > 0 %}
                            {% if i.head.button %}
                          <a href="{{ i.head.button.link }}{{ i.head.button.id }}" by_type="{{ i.head.button.by_type }}" self_id="{{ i.head.button.id }}" course_id="{{ i.head.button.course }}">
                                {% else %}
                                    <a href="#">
                                {% endif %}
                        {% else %}
                            {% for h in i.homework %}
                            <a href="{{ h.button.link }}{{ h.button.id }}" by_type="{{ h.button.by_type }}" self_id="{{ h.button.id }}" course_id="{{ h.button.course }}"
                                                       style="border-bottom: 1px dotted #999; padding-bottom: 5px;">
                            {% endfor %}
                        {% endif %}

                      <span class="tl-date" style="font-weight: bold;">
                        Тема {{ i.head.sort }}<br>
                        <img src="{{ i.head.icon }}" style="margin-top: 5px;max-height: 48px;max-width: 48px;border-radius: 10px;">
                      </span>
                      </a>

                      <div class="tl-content panel padder b-a col-lg-11" style="width: 100%;">
                        <span class="arrow left pull-up hidden-left visible-lg visible-md visible-sm"></span>
                        <span class="arrow right pull-up visible-left visible-lg visible-md visible-sm"></span>

                        <div class="text-lt m-b-sm" style="font-weight: bold; font-size: 16px;margin-bottom: 5px;float: left;width: 100%;padding: 0 3% 0 2%;">
                            <span style="float: left;    margin: 5px 7px 0 0;">
                            {% if i.head.lessons_length > 0 %}
                                {% if i.head.button %}
                                <a name="theme{{ i.head.mid }}" href="{{ i.head.button.link }}{{ i.head.button.id }}"
                                   by_type="{{ i.head.button.by_type }}"
                                   self_id="{{ i.head.button.id }}"
                                   course_id="{{ i.head.button.course }}">
                                {% else %}
                                    <a style="cursor: default;border-bottom: 0;">
                                {% endif %}
                            {% else %}
                                <!-- Ссылка на ДЗ -->
                                {% for h in i.homework %}
                                    <a href="{{ h.button.link }}{{ h.button.id }}"
                                       by_type="{{ h.button.by_type }}"
                                       self_id="{{ h.button.id }}"
                                       course_id="{{ h.button.course }}"
                                                       style="border-bottom: 1px dotted #999; padding-bottom: 5px;">
                                {% endfor %}
                            {% endif %}
                                    {{ i.head.title|safe }}
                                </a>

                            {% if i.head.status.flag != 'N' %}
                                <span class="label font-normal text-white bg-{{ i.head.status.color }}" style="margin-left: 10px;">
                                    {{ i.head.status.title }}<i class="{{ i.head.status.icon }}" style="margin-right: 5px; margin-left: 10px;"></i>
                                </span>
                            {% endif %}

                            </span>

                            {% if i.head.lessons_length > 1 %}
                                <div class="label label-info" style="float: right;    margin: 5px 0 0 0;">Уроков: {{ i.head.lessons_length }}</div>
                            {% endif %}
                        </div>

                        <div class="panel-body p-b-none pull-in b-t b-light" style="margin-left: 2px;padding-bottom: 20px !important;clear: both;">
                            {% if i.head.skills %}
                                <div style="margin-bottom: 10px;background-color: #ffc;padding: 10px;margin-right: 20px;border-radius: 5px;">
                                    <b style="margin-right: 5px;">Приобретаемые навыки:</b>
                                    {% for n in i.head.skills %}
                                        <span class="label font-normal text-default" style="background: {{ n.color }}">{% if n.mini_icon %}<img src="{{ n.mini_icon.url }}" style="margin-top: -1px;width: 10px;
            height: 10px;
            margin-right: 5px;">{% endif %}{{ n }}</span>
                                    {% endfor %}
                                </div>
                            {% endif %}

                            {% if i.head.lessons_length > 1 %}
                                <ul style="padding: 0 0 0 15px;">
                                    {% for lesson in i.lessons %}
                                        <li style="    padding-bottom: 3px;">
                                            <a href="{{ lesson.button.link }}{{ lesson.button.id }}" by_type="{{ lesson.button.by_type }}"
                                               self_id="{{ lesson.button.id }}" course_id="{{ lesson.button.course }}"
                                               style="border-bottom: 1px dotted #333;color: #333;">
                                                {{ lesson.title|safe }}
                                                <span class="label font-normal text-white bg-{{ lesson.status.color }}"><i class="{{ lesson.status.icon }}"></i></span>
                                            </a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% else %}
                                {% if i.head.lessons_length == 1 %}
                                {% for les in i.lessons %}
                                    {% if les.status.flag != 'N' %}
                                        <blockquote class="m-t m-b-none col-lg-8" style="clear: both;width: 100%;margin-bottom: 20px !important;margin-top:10px;">
                                            <p>
                                                <b>Статус урока: </b>
                                                <span class="tags l-h-2x">
                                                    <span class="label font-normal text-white bg-{{ les.status.color }}" style="margin-left: 10px;{{ les.status.styles }}">{{ les.status.title|safe }}<i class="{{ les.status.icon }}" style="margin-left: 10px;"></i></span>
                                                </span>
                                            </p>
                                        </blockquote>
                                    {% endif %}
                                {% endfor %}

                                {% if i.head.description %}
                                    <p><b>Описание:</b></p>
                                    <div style="clear: both;    padding-left: 10px;">
                                        <a href="{{ i.head.button.link }}{{ i.head.button.id }}" by_type="{{ i.head.button.by_type }}" self_id="{{ i.head.button.id }}" course_id="{{ i.head.button.course }}">
                                            <div>{{ i.head.description|safe }}</div>
                                        </a>
                                    </div>
                                {% endif %}
                             {% else %}
                                {% if i.head.description %}
                                    <p><b>Описание:</b></p>
                                    <div style="clear: both;    padding-left: 10px;">
                                        <a href="{{ i.head.button.link }}{{ i.head.button.id }}" by_type="{{ i.head.button.by_type }}" self_id="{{ i.head.button.id }}" course_id="{{ i.head.button.course }}">
                                            <div>{{ i.head.description|safe }}</div>
                                        </a>
                                    </div>
                                {% endif %}
                             {% endif %}

                            {% endif %}

                            {% if i.homeworks_length != 0 %}

                                {% for h in i.homework %}
                                    {% if i.head.lessons_length == 0 %}
                                        <blockquote class="m-t m-b-none col-lg-8">
                                        <p><a href="{{ h.button.link }}{{ h.button.id }}" by_type="{{ h.button.by_type }}" self_id="{{ h.button.id }}" course_id="{{ h.button.course }}"
                                                   style="border-bottom: 0; padding-bottom: 5px;">
                                                    {{ h.description|safe }}
                                                </a>
                                            <span class="tags l-h-2x">
                                                <span class="label font-normal text-white bg-{{ h.status.color }}" style="margin-left: 10px;{{ h.status.styles }}">{{ h.status.title|safe }}<i class="{{ h.status.icon }}" style="margin-left: 10px;"></i></span>
                                                {% if h.status.flag == 'T' or h.status.flag == 'A' %}
                                                    {% if h.delay.status %}
                                                        <br><i class="glyphicon glyphicon-info-sign" style="color: red"></i> Могут быть незначительные задержки с проверкой{% if h.delay.description %}: <b>"{{ h.delay.description|safe }}"</b>{% endif %}
                                                    {% endif %}
                                                {% endif %}
                                            </span>
                                        </p>
                                        </blockquote>
                                    {% else %}
                                      <blockquote class="m-t m-b-none col-lg-8">
                                        <p><a href="{{ h.button.link }}{{ h.button.id }}" by_type="{{ h.button.by_type }}" self_id="{{ h.button.id }}" course_id="{{ h.button.course }}"
                                                   style="border-bottom: 1px dotted #999; padding-bottom: 5px;">
                                                    <span class="icon icon-graduation "></span>&nbsp;&nbsp;<b style="margin-left: 5px;">Домашнее задание:</b>
                                                </a>
                                            <span class="tags l-h-2x">
                                                <span class="label font-normal text-white bg-{{ h.status.color }}" style="margin-left: 10px;{{ h.status.styles }}">{{ h.status.title|safe }}<i class="{{ h.status.icon }}" style="margin-left: 10px;"></i></span>
                                                {% if h.status.flag == 'T' or h.status.flag == 'A' %}
                                                    {% if h.delay.status %}
                                                        <br><i class="glyphicon glyphicon-info-sign" style="color: red"></i> Могут быть незначительные задержки с проверкой{% if h.delay.description %}: <b>"{{ h.delay.description|safe }}"</b>{% endif %}
                                                    {% endif %}
                                                {% endif %}
                                            </span>
                                        </p>
                                      </blockquote>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}

                            {% if i.head.status.flag != 'N' %}
                                {% if i.head.button %}
                                    <div style="clear: both; width: 100%; margin-top: 10px;">
                                    {% if flow or flow == None %}
                                    <a type="button" href="{{ i.head.button.link }}{{ i.head.button.id }}">
                                        <button class="btn pull-right btn-lg m-b-xs m-r-xs m-t-lg course_button"
                                                style="background: {{ i.head.button.background }}; color: {{ i.head.button.color }}"
                                                by_type="{{ i.head.button.by_type }}"
                                                self_id="{{ i.head.button.id }}"
                                                course_id="{{ i.head.button.course }}">
                                            {{ i.head.button.title }}
                                        </button>
                                    </a>
                                    {% endif %}
                                    </div>
                                {% endif %}
                            {% endif %}

                        </div>
                      </div>
                    </div>
                  </li>
              {% endfor %}
                   <li class="tl-header">
                    <div class="btn btn-success disabled">Финиш</div>
                  </li>
                </ul>
        </div>
      </div>
    <!-- / main header -->

  </div>
  <!-- / main -->
  <!-- right col -->
{% include 'right_site.html' %}

{% endblock %}
{% block js %}
    <script>
        $('html,body').stop().animate({ scrollTop: $('[name=theme'+{% if request.GET.no_current %}{{ request.GET.no_current }}{% else %}window.current{% endif %}+']').offset().top }, 1000);
    </script>
    <script>
    var flow = "{{ flow }}";
    $(function() {
        $('.chart').easyPieChart({
                          rotate: 0,
                          lineWidth: 60,
                          trackColor: 'rgba(255,255,255,0)',
                          barColor: 'rgba(35,183,229,0.7)',
                          size: 120,
                          lineCap: 'butt',
                          animate: 1000,
                          scaleLength: 0
        });
        $('[data-toggle="tooltip"]').tooltip()

        if(flow == 'False'){
            $('#flowAccess').modal('show');
        }
    });
</script>
{% endblock %}