{% extends 'assessments/base.html' %}
{% load i18n %}

{% block head %}
    {{ block.super }}
    <script src="{{ STATIC_URL }}common/js/ajax-modal.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}stats/js/lib/Chart.js"></script>
    <script type="text/javascript">

        var chart_options = {
            scaleOverlay : false,
            scaleOverride : false,
            scaleSteps : null,
            scaleStepWidth : null,
            scaleStartValue : null,
            scaleShowLine : true,
            scaleLineColor : "rgba(0,0,0,.1)",
            scaleLineWidth : 1,
            scaleShowLabels : false,
            scaleLabel : "<%=value%>",
            scaleFontFamily : "'Arial'",
            scaleFontSize : 12,
            scaleFontStyle : "normal",
            scaleFontColor : "#666",
            scaleShowLabelBackdrop : true,
            scaleBackdropColor : "rgba(255,255,255,0.75)",
            scaleBackdropPaddingY : 2,
            scaleBackdropPaddingX : 2,
            angleShowLineOut : true,
            angleLineColor : "rgba(0,0,0,.1)",
            angleLineWidth : 1,
            pointLabelFontFamily : "'Arial'",
            pointLabelFontStyle : "normal",
            pointLabelFontSize : 12,
            pointLabelFontColor : "#666",
            pointDot : true,
            pointDotRadius : 3,
            pointDotStrokeWidth : 1,
            datasetStroke : true,
            datasetStrokeWidth : 2,
            datasetFill : true,
            animation : true,
            animationSteps : 60,
            animationEasing : "easeOutQuart",
            onAnimationComplete : null
        };

        var chart_data = {
            labels : [{% for point in spidergraph %}"{{ point.label }}",{% endfor %}],
            datasets : [{
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                data : [{% for point in spidergraph %}{{ point.score }},{% endfor %}]
            }]
        };

        $(document).ready(function() {
            var chart_context = document.getElementById('spidergraph').getContext("2d"),
                chart = new Chart(chart_context).Radar(chart_data, chart_options);
        });

    </script>
{% endblock %}

{% block section_title %}
    {% trans 'Certification validation' %} &mdash; {{ object.user.get_full_name }}
{% endblock %}

{% block section_content %}

    <div>
    <div class="row">
        <div class="col-md-6" id="scores">
            <h2>Scores</h2>
            <ul class="competencies">
                <li><strong>{% trans 'Global score' %}<span class="score">{{ object.score }}</span></strong></li>

                {% for cs in competency_scores %}
                    <li>{{ forloop.counter }} &ndash; {{ cs.competency.name }} <span class="score">{{ cs.score }}</span></li>
                {% endfor %}

            </ul>
        </div>
        <div class="col-md-6">
            <div id="result">
                <h2>{{ object.status.name }}</h2>
            </div>
            <div id="chart">
                <canvas id="spidergraph" width="480" height="360"></canvas>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" id="recommendations">
                <h2>{% trans 'Recommended courses' %}</h2>
                <table class="table table-hover certification-results">
                    <thead>
                        <tr>
                            <th>{% trans 'Course' %}</th>
                            <th>{% trans 'Training type' %}</th>
                            <th>{% trans 'Recommendation level' %}</th>
                        </tr>
                    </thead>
                    <tbody>

                        {% for recommendation in recommendations %}
                            <tr>
                                <td>{{ recommendation.lesson.name }}</td>
                                <td>{{ recommendation.lesson.get_type_display }}</td>
                                <td>{{ recommendation.level.name }}</td>
                            </tr>
                        {% endfor %}

                    </tbody>
                </table>
            </div>
        </div>
    </div>

{% endblock %}