{% extends "global/Page.html" %}
{% load static %}

{% block app_styles %}

    <style>
        .column-left {
            float: left;
            width: 60%;
            padding: 0px;
        }

        .column-right {
            float: left;
            width: 40%;
            padding: 0px;
        }

        .column-full {
            float: left;
            width: 100%;
        }

        .otree-btn-next {
            background-color: #84fab0;
            border-color: #84fab0;
            border-radius: 0px;
            color: black;
        }

        .page-header {
            padding: 0px;
        }

        .container {
            margin-left: inherit;
            width: auto;
            position: relative;
        }

        .otree-body {
            max-width: none;
        }

        .inputWrapper > input {
            position: absolute;
            visibility: hidden;
        }

        .inputWrapper > input + span {
            background-color: white;
            color: black;
            cursor: pointer;
        {#border-radius: 10px;#} padding: 10px 25px;
            margin: 5px;
        }

        .inputWrapper > span:hover {
            background-color: #8fd3f4;
            color: white;
        }

        .inputWrapper > span:active {
            background-color: #8fd3f4;
            color: white;
        }

        .inputWrapper > input:checked + span {
            background-color: #8fd3f4;
            color: white;
        }
    </style>

{% endblock %}

{% block title %}
    Performance summary
{% endblock %}

{% block content %}

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <div class="column-left">
        {% include Constants.summary_information_template %}
    </div>

    <div class="column-right">
        <h6 style="text-align: left">Please allocate the resources for the next round <br>by choosing the corresponding
            buttons <br>(Number of resources to distribute: <b style="color: #8fd3f4">{{ resources }}</b>)</h6>
        <div id="inputContainer"></div>
        <button class="otree-btn-next btn btn-primary btnStyle"><i class="material-icons">check</i>Allocate</button>
    </div>

    <div class="column-full" style="padding-top:30px">
        <div style="padding-bottom: 7px">
            <h2 style="display: inline">Performance over time</h2>
            <p style="font-size: x-small; margin: 0; display: inline; padding-left: 15px"><strong>*RA</strong> =
                Resources Allocated</p>
            <p style="font-size: x-small; margin: 0; display: inline; padding-left: 15px"><strong>*P</strong> =
                Successful Projects</p>
        </div>

        {% include Constants.information_template %}
    </div>

{% endblock %}


{% block scripts %}

    <script>
        $('document').ready(function () {

            $('tr:nth-child(1)').nextAll().each(function () {
                $(this).append("<td colspan='2'></td>")
            });

            for (var i = 1; i < {{round_num}}; i++) {
                $('table colgroup').append('<col span="2">')
            }
            $('table colgroup').append('<col span="2" style="border: 2px solid red">');

            $('#inputContainer').append();
        });

        $(function () {
            var container = $('#inputContainer');

            {% for field in form %}
                var project2 = '<div>';
                project2 = project2 + '<label>{{field.label}}&ensp;';

                for (var i = 0; i <= {{resources}}; i++) {
                    project2 = project2 + '<label class="inputWrapper">';
                    if (i == 0) {
                        project2 = project2 + "<i class=\"material-icons\">arrow_forward</i>" + "<input name='{{ field.name }}' value=" + i + " checked type='radio'>";
                    } else {
                        project2 = project2 + "<input name='{{ field.name }}' value=" + i + " type='radio'>";
                    }
                    project2 = project2 + '<span>' + i + '</span>';
                    project2 = project2 + '</label>';
                }

                project2 = project2 + '</label>';
                container.append(project2);
            {% endfor %}
        });
    </script>

{% endblock %}