{% extends 'base_index.html' %}
{% block title %}{{ course.head.title }} / {{ lesson.head.title }}{% endblock %}
  <!-- content -->
{% block content %}
  <!-- main -->
  <div class="col">
      <!-- Голова -->
      <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" style="padding: 0 20px;">
                  <div class="row m-t" style="margin-top: 0;padding-top: 20px;    padding-bottom: 20px;">
                    <div class="col-sm-7">
                      <div class="clear m-b">
                        <div class="m-b m-t-sm">
                          <span class="h1 text-warning text-u-c" style="font-weight: bold;">
                              {{ course.head.title }}
                          </span>
                        </div>
                            <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>
                      <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-lg hidden-xs hidden-sm" style="padding: 0 20px;">
                  <div class="row m-t" style="margin-top: 0;padding-top: 20px;    padding-bottom: 20px;">
                    <div class="col-sm-7">
                      <div class="clear m-b">
                        <div class="m-b m-t-sm">
                          <span class="h1 text-warning text-u-c" style="font-weight: bold;">
                              {{ course.head.title }}
                          </span>
                        </div>
                            <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>
                      <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 bg-white b-b">
                <ul class="nav nav-pills nav-sm">
                    <li>
                        <a type="button" style="width: 100%;" class="col-lg-10 btn btn-default dropdown-toggle" href="/courses/{{ course.head.course_id }}">
                              <i class="glyphicon glyphicon-chevron-left"></i>  &nbsp;Страница курса
                          </a>
                    </li>
                    <!-- Кнопка нового урока -->
                    <li name="next_button" {% if lesson.head.status.flag != 'F' %}style="display: none;"{% endif %}>
                        <a type="button" href="{{ lesson.next.button.link }}{{ lesson.next.obj.id }}" style="background: {{ lesson.next.button.background }}; color: {{ lesson.next.button.color }}"
                                    by_type="{{ lesson.next.button.by_type }}"
                                    self_id="{{ lesson.next.obj.id }}"
                                    course_id="{{ lesson.next.obj.course.id }}">
                                {{ lesson.next.button.title }} <i class="glyphicon glyphicon-chevron-right"></i>
                        </a>
                    </li>
                    <!-- Статус -->
                    <li style="float: right; padding: 6px 12px;">
                        <span style="padding: 6px 12px;font-weight: bold;">
                            <span class="label font-normal text-white bg-{{ lesson.head.status.color }}" style="margin-left: 10px;font-size: 19px;{{ lesson.head.status.styles }}">{{ lesson.head.status.title }}<i class="{{ lesson.head.status.icon }}" style="margin-right: 5px; margin-left: 10px;    top: 3px;"></i></span>
                        </span>
                    </li>

                </ul>
          </div>
      <div class="tab-content">
        <div class="wrapper-md tab-pane active" role="tabpanel" id="lesson">

            <div class="row">
              <div style="clear: both;" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
              <div class="panel-heading bg-primary" style="text-align: center;max-width: 1500px;margin: 0 auto;">
                  <span class="text-lt">Видео к занятию: {{ lesson.head.title }}</span>
              </div>

                <div class="panel b-a"  style="max-width: 1500px;margin: auto;border: 0">
                    <div style="padding: 0;clear: both;{% if lesson.head.status.flag == 'F' %}display: none;{% endif %}" name="current_button"  class="panel-heading no-border">
                        <button type="button" class="btn btn-success" onclick="read_lesson({{ lesson.head.mid }})" style="width: 100%; font-weight: bold; font-size: 22px;    height: 70px">
                            <i class="glyphicon glyphicon-ok"></i>  &nbsp;Пометить как просмотренное
                        </button>

                    </div>
                    <div style="padding: 0;{% if lesson.head.status.flag != 'F' %}display: none;{% endif %}" name="next_button" class="panel-heading no-border">
                            <a type="button" href="{{ lesson.next.button.link }}{{ lesson.next.obj.id }}">
                                <button class="btn" style="width: 100%; font-weight: bold; font-size: 22px;height: 70px;background: {{ lesson.next.button.background }}; color: {{ lesson.next.button.color }}"
                                        by_type="{{ lesson.next.button.by_type }}"
                                        self_id="{{ lesson.next.obj.id }}"
                                        course_id="{{ lesson.next.obj.course.id }}">
                                    {{ lesson.next.button.title }}
                                </button>
                            </a>
                    </div>
                  <div class="item m-l-n-xxs m-r-n-xxs embed-responsive embed-responsive-16by9" name="video_frame">
                    {{ lesson.video|safe }}
                  </div>
                <div style="padding: 0;clear: both;{% if lesson.head.status.flag == 'F' %}display: none;{% endif %}" name="current_button"  class="col-md-12 col-sm-12 col-xs-12">
                    <button type="button" class="btn btn-success" onclick="read_lesson({{ lesson.head.mid }})" style="width: 100%; font-weight: bold; font-size: 22px;    height: 70px">
                        <i class="glyphicon glyphicon-ok"></i>  &nbsp;Пометить как просмотренное
                    </button>
                </div>
                <div style="padding: 0;{% if lesson.head.status.flag != 'F' %}display: none;{% endif %}" name="next_button" class="col-md-12 col-sm-12 col-xs-12">
                    <a type="button" href="{{ lesson.next.button.link }}{{ lesson.next.obj.id }}">
                        <button class="btn" style="width: 100%; font-weight: bold; font-size: 22px;height: 70px;background: {{ lesson.next.button.background }}; color: {{ lesson.next.button.color }}"
                                by_type="{{ lesson.next.button.by_type }}"
                                self_id="{{ lesson.next.obj.id }}"
                                course_id="{{ lesson.next.obj.course.id }}">
                            {{ lesson.next.button.title }}
                        </button>
                    </a>
                </div>
                </div>
              </div>

                {% if lesson.description %}
                  <div class="{% if lesson.materials.all %}col-lg-6 {% else %}col-lg-12 {% endif %}col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px;">
                      <div class="panel panel-info">
                          <div class="panel-heading">
                              <h2 class="m-t-none text-black" style="margin-bottom: 5px;">Описание урока</h2>
                          </div>
                        <div class="wrapper-lg">
                          <div>
                            {{ lesson.description|safe }}
                          </div>
                        </div>
                      </div>
                  </div>
            {% endif %}
                      {% if lesson.materials %}
                      <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px;">
                        <div draggable="true" class="panel panel-info">
                          <div class="panel-heading">
                            Материалы к уроку
                          </div>
                            {% for i in lesson.materials %}
                      <div class="list-group bg-white">
                      {% if i.format == 'I' %}
                        <a href="{{ i.url }}" class="list-group-item" target="_blank" id="single_image">
                        {% else %}
                          <a href="{{ i.url }}" class="list-group-item" target="_blank">
                        {% endif %}
                            {% if i.icon_type != 'class' %}
                                <img src="{{ i.icon }}">
                            {% else %}
                                <i class="{{ i.icon }} text-lg inline text-primary"></i>
                            {% endif %}
                          <span class="clear inline">
                            <span>{{ i.title }}</span>
                            <small class="text-muted clear text-ellipsis">{{ i.name }}</small>
                          </span>
                        </a>
                      </div>
                        {% endfor %}
                        </div>
                      </div>
                      {% endif %}

            </div>
        {% if lesson.head.on_comment %}
            <span name="old_comments_show" style="color: #ccc;
    border-bottom: 1px dotted #ccc; display: none;
    cursor: pointer;" onclick="$(this).fadeOut('fast', function(){$('[name=old_comments]').fadeIn()})">Показать старые комментарии</span>
            <div class="row" name="old_comments" style="display: none;    margin-top: 20px;">
            <!-- Старые комментарии -->
            <a name="comment_list_place"></a>
                      <div class="col-lg-12">
                            <div class="m-b b-l m-l-md streamline" name="lesson_comments_block" lesson_id="{{ lesson.head.mid }}">

                            </div>
                          </div>
                    </div>
            <!---->

            {% include 'comments_block.html' %}

        {% endif %}
        </div>
      </div>
    <!-- / main header -->
    
  </div>
  <!-- / main -->
{% include 'right_site.html' %}
    <input name="LESSON_ID" value="{{ lesson.head.mid }}" style="display: none;">
{% endblock %}
  <!-- / content -->
{% block js %}
    <script type="text/javascript" src='/static/js/lesson.js'></script>
    <!--<script type="text/javascript" src='/static/js/video_reloader.js'></script>-->
    {% if 'to_comment' in request.GET %}
        <script>
        $(function () {
            setTimeout(function() {
                $('html,body').stop().animate({ scrollTop: $('div[name=comment_{{ request.GET.to_comment }}]').offset().top }, 1000);
                $('div[name=comment_{{ request.GET.to_comment }}]').css('background', 'red');
            }, 4000);
        })
        </script>
    {% endif %}
    <script>
    $(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
        });
    });
</script>
{% endblock %}