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

{% block styles %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="{% static "global/css/quadratic_voting.css" %}">
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="{% static "global/js/quadratic_voting_main.js" %}"></script>
    <script type="text/javascript" src="{% static "global/js/quadratic_voting_vote.js" %}"></script>
    <script>
        $(function () {
            var questions = {{ questions|json }}
            $('#form').on('submit', function () {
                var field= [];
                $('input[type=text]').each(function(){
                    var id = $(this).attr('name');
                    var agree = $("input[name=" + id + "_agree]");
                    var answer = {'q_id': id, 'q': questions[parseInt(id)-1] , 'vote': $(this).val(), 'agree': agree.val()};
                    field.push(answer);
                });
                $('input[name=quadratic_voting]').val(JSON.stringify(field));
            })
        })
    </script>
{% endblock %}

{% block title %}
    {% comment %}<div class="qv-header">
        <div class="qv-title"></div><div class="qv-proposals"></div>
    </div>{% endcomment %}
{% endblock %}

{% block content %}

    <div id="qv-credits-bar">
        <div id="qv-credits-bar-base">
            <div id="qv-credits-left-bar"></div>
            <div id="qv-credits-label">You have <span id="qv-credits-left"></span> credit(s).</div>
        </div>
    </div>

    <table>
    {% for q in questions %}
        <tr class="first-row border-bottom">
            <td class="qv-label">{{ q }}</td>
            <td class="qv-td-voting">
                <div class="voting">
                    <div class="justify-center">
                        <div class="thumb-div" onclick='btnSub({{ forloop.counter0 }})'>
                            <i class="fa fa-thumbs-down"></i>
                        </div>
                        <div class="vote-outer-circle">
                            <input type='text' class='nvote' name="{{ forloop.counter }}" value='0' readonly>
                            <input type="hidden" class="qv-agree-input" name="{{ forloop.counter|stringformat:"s_agree" }}">
                            <div class="vote-inner-circle"></div>
                        </div>
                        <div class="thumb-div" onclick='btnAdd({{ forloop.counter0 }})'>
                            <i class="fa fa-thumbs-up"></i>
                        </div>
                    </div>
                    <div>
                        <div class="qv-disagree">DISAGREE</div>
                        <div class="qv-agree">AGREE</div>
                    </div>
                    <div class="justify-center">
                        <div class="qv-cost">Cost</div>
                        <div class="ncost"></div>
                        <div class="qv-credits">Credits</div>
                    </div>
                </div>
            </td>
        </tr>
    {% endfor %}
    </table>

    {{ form.quadratic_voting.as_hidden }}

    <div id="qv-no-credits" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h3>It looks like you are running out of credits.</h3>
                    <p>You can reduce the credits on other votes if you want.</p>
                </div>
                <div class="modal-footer">
                    <button id="closeBtn" type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
                </div>
            </div>
        </div>
    </div>

    <button class="otree-btn-next btn btn-primary">Confirm</button>

{% endblock %}