{% extends 'base_with_nav.html' %}

{% load static %}

{% block head %}
    <link rel='stylesheet' href="{% static 'css/overview.css' %}">
    <script>
        $(document).ready(function() {
            giveRibbons();
            $("#hoco-scores").fadeIn();
        });
        function giveRibbons() {
            var arr = [];
            $("#hoco-scores .score-box").each(function() {
                var score = parseFloat($(this).find(".score").text());
                arr.push([$(this), score]);
            });
            arr.sort(function(a, b) {
                return b[1] - a[1];
            });
            var place = 0;
            $.each(arr, function(k, v) {
                if (k > 0 && arr[k - 1][1] != v[1]) {
                    place += 1;
                }
                if (place == 0) {
                    v[0].find(".corner-ribbon").addClass("gold").text("1st");
                }
                else if (place == 1) {
                    v[0].find(".corner-ribbon").addClass("silver").text("2nd");
                }
                else if (place == 2) {
                    v[0].find(".corner-ribbon").addClass("bronze").text("3rd");
                }
            });
        }
    </script>  
{% endblock %}

{% block main %}
<div id="hoco-scores">
    <div class="score-box">
        <div class="class">{{ data.0.0 }}</div>
        <div class="corner-ribbon"></div>
        <div class="score" id="score-senior">{{ data.0.1 }}</div>
        points
    </div>
    <div class="score-box">
        <div class="class">{{ data.1.0 }}</div>
        <div class="corner-ribbon"></div>
        <div class="score" id="score-junior">{{ data.1.1 }}</div>
        points
    </div>
    <div class="score-box">
        <div class="class">{{ data.2.0 }}</div>
        <div class="corner-ribbon"></div>
        <div class="score" id="score-sophomore">{{ data.2.1 }}</div>
        points
    </div>
    <div class="score-box">
        <div class="class">{{ data.3.0 }}</div>
        <div class="corner-ribbon"></div>
        <div class="score" id="score-freshman">{{ data.3.1 }}</div>
        points
    </div>
</div>
{% endblock %}