{% extends 'base.html' %}


{% block content %}
<div class="container">
    {% if messages %}
    <div class="messages">
        {% for message in messages %}
        <div {% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="row">
        <div class="col-md-8 offset-sm-2">
            <h3 class="mt-3 mb-3 text-center">Result for: {{ poll.text }}</h3>
            <!-- progress bar -->
    <div class="progress mt-3">

        {% for choice in poll.get_result_dict %}
        <div class="progress-bar bg-{{ choice.alert_class }}" role="progressbar" style="width: {{ choice.percentage }}%;" aria-valuenow="30" aria-valuemin="0"
            aria-valuemax="100"><b>{{ choice.text }}-{{ choice.percentage|floatformat }}%</b></div>
        {% endfor %}

    </div>
            <ul class="list-group">
                {% for choice in poll.choice_set.all %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    {{ choice.choice_text }}
                    <span class="badge badge-primary badge-pill">{{ choice.get_vote_count }}</span>
                </li>
                {% endfor %}
            </ul>
            {% endif %}
            <a class="btn btn-primary mt-3" href="{% url 'polls:list' %}" role="button">Back To Polls</a>
        </div>
        
    </div>
</div>
{% endblock content %}