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

{% load staticfiles thumbnail %}

{% block headtitle %}Voting{% 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">Voting</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-body search-reactive">
            <div class="list">
                {% for question in vote.get_questions %}
                    <h3>{{ question }}</h3>
                    {% for option in question.get_votes %}
                        <div class="row">
                            <div class="col-sm-4 col-xs-12" style="margin-bottom:5px;">
                                {{ option.name }}
                            </div>
                            <div class="col-sm-5 col-xs-8">
                                <div class="progress progress-striped">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="{{  option.percentage|floatformat }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ option.percentage|floatformat }}%;"></div>
                                </div>
                            </div>
                            <div class="col-sm-2 col-xs-4">
                                <strong>{{ option.percentage|floatformat }}%</strong>
                            </div>
                        </div>
                    {% endfor %}
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}