{% 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 "qv/css/main.css" %}">
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="{% static "qv/js/main.js" %}"></script>
    <script type="text/javascript" src="{% static "qv/js/vote.js" %}"></script>
{% endblock %}

{% block title %}
    Quadratic Voting
{#    <div class="qv-header">#}
{#        <div class="qv-title">{{ title }}</div><div class="qv-proposals">{{ num_questions }} Proposals</div>#}
{#    </div>#}
{% 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> credits left.</div>
        </div>
    </div>

    <table>
    {% for q in questions %}
        <tr class="first-row border-bottom">
            <td class="qv-label">{{ q.label }}</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="{{ q.name }}" value='0' readonly>
                            <input type="hidden" class="qv-agree-input" name="{{ q.name|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">Costs</div>
                        <div class="ncost"></div>
                        <div class="qv-credits">Credits</div>
                    </div>
                </div>
            </td>
        </tr>
    {% endfor %}
    </table>

    <div id="qv-no-credits" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h3>Oh no!</h3>
                    <h3>Looks like you ran out of credits.</h3>
                    <p>You will need to reduce some of your votes if you want more credits.</p>
                </div>
                <div class="modal-footer">
                    <button id="closeBtn" type="button" class="btn btn-primary" data-dismiss="modal">Got it</button>
                </div>
            </div>
        </div>
    </div>

    {% next_button %}

{% endblock %}