{% extends 'base_index.html' %}
{% load static %}
{% block page_title %}Доступные курсы «{{ NAME }}»{% endblock %}
{% block title %}Доступные курсы «{{ NAME }}»{% endblock %}
{% block head %}
    <script>
        window.by = true;
        $(document).on('change', '[name="by_radio"]', function(){
            if (window.by){
                $('.no_bought').fadeIn('slow');
                window.by = false;
            } else {
                $('.no_bought').fadeOut('slow');
                window.by = true;
            }
        });
    </script>
    {% if bought %}
    <style>
        .no_bought{
            display: none;
        }
    </style>
    {% endif %}
{% endblock %}
{% block content %}
    <div class="col">
    <div class="wrapper-md">

              {% if bought %}
              <div style="    font-size: 12px;
    color: #666;
    position: fixed;
    right: 250px;
    top: 10px;
    z-index: 10000;" class="hidden-xs">
                  <span>Все курсы</span>
                <label class="i-switch bg-success" style="top: 5px;
    position: relative;    margin: 0 5px;">
                    <input type="checkbox" checked="" name="by_radio">
                    <i></i>
                </label><span>Мои курсы</span>
              </div>
              <div style="    font-size: 12px;
    color: #fff;
    position: absolute;
    right: 100px;
    top: 10px;
    z-index: 13000;" class="visible-xs">
                  <span class="hidden-xs">Все курсы</span>
                <label class="i-switch bg-success" style="top: 5px;
    position: relative;    margin: 0 5px;">
                    <input type="checkbox" checked="" name="by_radio">
                    <i></i>
                </label><span class="hidden-xs">Мои курсы</span>
              </div>
              {% endif %}
    {% for i in courses %}

      <div class="col-lg-4 {% if i.by %}bought{% else %}no_bought{% endif %}">
        <a href="/courses/{{ i.slug }}">
                <div class="panel b-a course_cart " style="overflow: hidden;">
                  <div class="panel-heading no-border index" style="background: {{ i.level.background }};color:{{ i.level.color }};">
                    <span class="text-lt ">{{ i.level.title }}</span>
                  </div>
                  <div class="item m-l-n-xxs m-r-n-xxs" style="height: 290px;">
                    <div style="width: 100%;height: 195px;background:url({{ i.img }}) no-repeat top right;background-size: cover;"></div>
                    <div class="bottom wrapper bg-gd-dk text-white" style="width: 100%;padding: 0;">
                        <div style="color: #fff;margin-bottom: 10px;margin-left: 10px;">
                            {% for skill in i.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="background: #fff;padding: 15px;">
                          <div class="text-u-c h4 m-b-none" style="text-align: left;color: #666;">{{ i.title }}</div>
                            <p style="color: #999;border-bottom: 1px solid #f1f1f1;margin: 5px 0 10px;padding-bottom: 10px;">{{ i.lessons }} урока(-ов)</p>
                            <div style="margin: 5px 5px 0;">
                                {{ i.material.get_html_direction|safe }}
                                {% if i.progress == 100 %}
                                <span style="    font-weight: bold;
        float: right;
        color: green;"><i class="glyphicon glyphicon-ok" style="margin-right: 5px;"></i> Пройдено</span>
                                {% endif %}
                                {% if i.progress != 0 and i.progress < 100 %}
                                    <span style="    font-weight: bold;
        float: right;
        color: #999;"> Пройдено: {{ i.progress }}%</span>
                                    <div class="chart" data-percent="{{ i.progress }}" data-scale-color="#000" style="float: right;margin-right: 5px;">
                                  </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                  </div>
                </div>
        </a>
      </div>
    {% endfor %}

    </div>
    </div>
    {% include 'right_site.html' %}




    <!--
    <div class="panel-body">
                      <div class="m-b m-t text-md" style="margin-top: 0;">Новости Школы</div>
                        <div id="news_block"></div>
            </div>
            -->
  <!-- aside right -->
  <!-- / aside right -->



{% endblock %}

{% block js %}
<script>
    $(function() {
        $('.chart').easyPieChart({
                          rotate: 0,
                          lineWidth: 10,
                          trackColor: 'rgb(222, 229, 231)',
                          barColor: 'rgb(96, 179, 111)',
                          size: 20,
                          lineCap: 'butt',
                          animate: 3000,
                          scaleLength: 0
        });
    });
</script>
{% endblock %}