{% extends 'base_index.html' %}
{% block title %}Все доступные достижения{% endblock %}
{% block head %}
    <link rel="stylesheet" href="/static/css/pie_chart.css" type="text/css" />
    <script>
    window.courses = [];
    </script>
{% endblock %}
{% block content %}
  <div class="col" style="width: 100%;">
    <!-- main header -->
      <div class="wrapper-md col-md-9 col-sm-12 col-xs-12 col-lg-9" style="text-align: center;">
            <h3 style="margin-top: 0;font-weight: bold;text-align: left;
    margin-bottom: 20px;
        margin-left: 30px;    border-bottom: 1px dotted #ccc;
    padding-bottom: 10px;"><i class="glyphicon glyphicon-star" style="color: #fcb813;margin-right: 5px;"></i> Все доступные достижения системы</h3>

                       {% for achievement in achievements %}
                                          <div class="thumb-xl" style="text-align: center;
    margin: 10px;">
                                            <img src="{{ achievement.icon.url }}" alt="..." class="m-b-xs" style="    width: 125px;">
                                            <small class="block">{{ achievement.title }}</small>
                                          </div>
                           {% empty %}
                           <h3 style="text-align: center; font-weight: bold">Достижений еще нет</h3>
                       {% endfor %}

      </div>

      <div class="wrapper-md col-md-3 col-sm-12 col-xs-12 col-lg-3">
            <h3 style="margin-top: 0;font-weight: bold;
    margin-bottom: 20px;
        margin-left: 30px;    border-bottom: 1px dotted #ccc;
    padding-bottom: 10px;"><i class="glyphicon glyphicon-ok-sign" style="color: #fcb813;margin-right: 5px;"></i> Получаемые навыки</h3>
                       {% for course, points in skills.items %}
                           <script>
                               {% if points %}
                                    window.courses.push({{ course.0 }})
                               {% endif %}
                           </script>
<div class="panel panel-default">
                          <div class="panel-heading font-bold">{{ course.1 }} <span style="float: right; color: #666;"><i class="glyphicon glyphicon-ok-sign"></i></span></div>

                          <div class="text-center wrapper m-b-sm" style="width: 100%">
                              {% if points %}
                            <div id="pieChart{{ course.0 }}" class="chart" style="width: 100%;height: 250px;"></div>
                              {% else %}
                              <h3 style="font-weight: bold;text-align: center;margin: 10px 0;">Навыков не назначено</h3>
                              {% endif %}
                          </div>

                          <ul class="list-group no-radius">
                              {% for key, value in points.items %}
                                <li class="list-group-item" name="skill_row{{ course.0 }}" skill_title="{{ key }}" skill_color="{{ value.color }}" skill_value={{ value.size }}>
                                  <span class="pull-right"><b>{{ value.size }}</b> очков</span>
                                <span class="label font-normal text-white" style="background: {{ value.color }};font-size: 14px;">{% if value.icon %}<img src="{{ value.icon.url }}" style="margin-top: -1px;width: 15px;
    height: 15px;
    margin-right: 5px;">{% endif %}{{ key }}</span>

                                </li>
                              {% endfor %}
                          </ul>
</div>
                       {% endfor %}

      </div>
    <!-- / main header -->
</div>
{% endblock %}
{% block js %}
    <script src="/static/js/pie_chart.js"></script>
    <script src="/static/js/clipboard.min.js"></script>
    <script>
$(function(){
    for (var c in courses){
        var result = [];
        var skills = $('li[name=skill_row'+courses[c]+']');
        for(var i=0;i<skills.length;i++){result.push({'title': $(skills[i]).attr('skill_title'), 'value': parseInt($(skills[i]).attr('skill_value'), 10), 'color':$(skills[i]).attr('skill_color')})}
      $("#pieChart"+courses[c]).drawPieChart(result);
    }

});
</script>
{% endblock %}