{% extends 'base_index.html' %}
{% load static %}
{% load course_filter %}
{% block page_title %}Доступные курсы{% endblock %}
{% block head %}
{% endblock %}
{% block content %}
    <div class="col">
        <div class="bg-light lter b-b wrapper-md">
      <div class="row">
        <div class="col-lg-12 col-xs-12">
          <h1 class="m-n font-thin h3">
              Доступные курсы
          </h1>
        </div>
      </div>
    </div>
    <div class="wrapper-md">

    {% for i in courses %}
              <div class="col-lg-6">

                <div class="panel b-a" style="overflow: hidden;">
                {% if i.level == 'B' %}
                  <div class="panel-heading no-border bg-success">
                    <span class="text-lt ">{{ i.get_level_display }} уровень</span>
                  </div>
                {% else %}
                    {% if i.level == 'A' %}
                      <div class="panel-heading no-border bg-warning">
                        <span class="text-lt ">{{ i.get_level_display }} уровень</span>
                      </div>
                    {% else %}
                        {% if i.level == 'E' %}
                          <div class="panel-heading no-border bg-danger">
                            <span class="text-lt ">{{ i.get_level_display }} уровень</span>
                          </div>
                        {% endif %}
                    {% endif %}
                {% endif %}
                  <div class="item m-l-n-xxs m-r-n-xxs" style="height: 290px;background:url({{ i.get_image }}) no-repeat center center;    background-size: cover;">
                    <div class="bottom wrapper bg-gd-dk text-white" style="width: 100%;">
                        {% if i.id|get_progress_persent:request.user.id != 0 %}
                              <div class="chart" data-percent="{{ i.id|get_progress_persent:request.user.id }}" data-scale-color="#fff"
                                   style="text-align: center;">
                                  <span id="canvas_length">{{ i.id|get_progress_persent:request.user.id }}%</span>
                              </div>
                        {% endif %}
                      <div class="text-u-c h3 m-b-none text-primary-lter">{{ i.title }}</div>
                        {{ i.lessons_length }} урока(-ов)
                        <div style="color: #fff;margin-bottom: 5px;">
                            {% for skill in i.get_skills %}
                                <span class="label font-normal text-white" style="background: {{ skill.skill.color }}">{{ skill.skill }}</span>
                            {% endfor %}
                        </div>
                    </div>
                      <div class="tags l-h-2x">
                        {% for n in i.skills %}
                            <span class="label font-normal text-white" style="background: {{ i.background }}">{{ i.skill }}</span>
                        {% endfor %}
                      </div>
                  </div>

                  <div class="hbox text-center text-sm">
                      <a href="/courses/{{ i.id }}" class="col-md-8 col-xs-8 bg-warning padder-v  b-light" style="width: 100%;">
                        <i class="icon-rocket block m-b-xs fa-2x text-black"></i>
                        <span class="text-black">Приступить</span>
                      </a>
                  </div>

                </div>

              </div>
    {% endfor %}

    </div>
    </div>
    <div class="col w-md bg-white-only b-l bg-auto no-border-xs aside-col">

{% if request.user.is_authenticated %}
    {% if actions %}
        <div class="padder-md">
          <!-- streamline -->
          <div class="m-b m-t text-md" style="margin-bottom: 0;">Последняя активность<p style="margin-bottom: 10px;"><a href="/access/all_actions/" style="    font-size: 12px;
        color: blue;
        border-bottom: 1px dotted">ВСЯ ИСТОРИЯ</a></p></div>
          <div class="streamline b-l m-b">
              {% for i in actions %}
                <div class="sl-item {{ i.get_a_type_display }} b-l">
                  <div class="m-l">
                    <div class="text-muted label-small">{{ i.date }}<br>{{ i.place }}</div>
                    <p>{{ i.text|safe }}</p>
                  </div>
                </div>
              {% endfor %}
          </div>
          <!-- / streamline -->
        </div>
        {% endif %}
        {% endif %}
    <!--
    <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 -->
  <div class="app-aside-right pos-fix no-padder w-md w-auto-xs bg-white b-l animated fadeInRight hide">
    <div class="vbox">
      <div class="wrapper b-b b-t b-light m-b">
        <a href class="pull-right text-muted text-md" ui-toggle-class="show" target=".app-aside-right"><i class="icon-close"></i></a>
        Chat
      </div>
      <div class="row-row">
        <div class="cell">
          <div class="cell-inner padder">
            <!-- chat list -->
            <div class="m-b">
              <a href class="pull-left thumb-xs avatar"><img src="/static/img/a2.jpg" alt="..."></a>
              <div class="clear">
                <div class="pos-rlt wrapper-sm b b-light r m-l-sm">
                  <span class="arrow left pull-up"></span>
                  <p class="m-b-none">Hi John, What's up...</p>
                </div>
                <small class="text-muted m-l-sm"><i class="fa fa-ok text-success"></i> 2 minutes ago</small>
              </div>
            </div>
            <div class="m-b">
              <a href class="pull-right thumb-xs avatar"><img src="/static/img/a3.jpg" class="img-circle" alt="..."></a>
              <div class="clear">
                <div class="pos-rlt wrapper-sm bg-light r m-r-sm">
                  <span class="arrow right pull-up arrow-light"></span>
                  <p class="m-b-none">Lorem ipsum dolor :)</p>
                </div>
                <small class="text-muted">1 minutes ago</small>
              </div>
            </div>
            <div class="m-b">
              <a href class="pull-left thumb-xs avatar"><img src="/static/img/a2.jpg" alt="..."></a>
              <div class="clear">
                <div class="pos-rlt wrapper-sm b b-light r m-l-sm">
                  <span class="arrow left pull-up"></span>
                  <p class="m-b-none">Great!</p>
                </div>
                <small class="text-muted m-l-sm"><i class="fa fa-ok text-success"></i>Just Now</small>
              </div>
            </div>
            <!-- / chat list -->
          </div>
        </div>
      </div>
      <div class="wrapper m-t b-t b-light">
        <form class="m-b-none">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Say something">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">SEND</button>
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- / aside right -->

  </div>
{% endblock %}

{% block js %}
<script type="text/javascript" src='/static/js/index.js'></script>
    <script>
    $(function() {
        $('.chart').easyPieChart({
                          rotate: 0,
                          lineWidth: 57,
                          trackColor: 'rgba(255,255,255,0)',
                          barColor: 'rgba(35,183,229,0.7)',
                          size: 120,
                          lineCap: 'butt',
                          animate: 1000,
                          scaleLength: 0
        });
    });
</script>
{% endblock %}