{% extends "meeting-base.html" %}

{% load staticfiles thumbnail %}

{% block headtitle %}{{ vote }}{% endblock %}

{% block content %}

    <div class="body">
        <div class="main-header search-reactive">
            <div class="return">
                <div class="container-fluid pad-30">
                    <div class="row mar-30">
                        <div class="col-xs-3 pad-30 text-left">
                            <a href="{% url 'meeting_home' meeting_information.slug %}">
                                <img src="{% static 'images/microsite/navigation/arrow-left.png' %}" />
                            </a>
                        </div>
                        <div class="col-xs-6 pad-30 text-center">
                            <div class="title">{{ vote }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-body search-reactive">
            <div class="container-fluid pad-30">
                <div class="row mar-30">
                    <div class="col-xs-12 pad-30">
                        <div id="voting_question">
                            <p class="item">Question {{ question.order }}. {{ question }}<br/>
                                <small>Please select an item below.</small>
                            </p>
                            <form action="" method="POST">
                                <div class="row">
                                    {% csrf_token %}
                                    {% for option in question.get_options %}
                                        <div class="col-sm-6 {% if forloop.last and forloop.counter0|divisibleby:2 %}col-sm-offset-3{% endif %}">
                                            <div class="option" data-value="{{ option }}">
                                                {{ option }}
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                                <div>
                                    <input id="answer_val" type="hidden" value="" name="answer" />
                                </div>
                                <div class="submit">
                                    <input type="submit" class="btn-submit" value="Submit"/>
                                </div>
                            </form>
                        <div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block footer_script %}
    <script>
        $('#voting_question .option').click(function(){
            $('#voting_question .option').removeClass('selected');
            $(this).addClass('selected');
            var val = $(this).attr('data-value');
            //alert(val);
            $('#answer_val').val(val);
        });
    </script>
{% endblock %}