{% extends 'main.html' %}
{% load static %}
{% block content %}

<div class="container">

    <!--Section: Content-->
    <section class="team-section text-center dark-grey-text">
            <!-- Section heading -->
            <div class="container">
                <div class="row justify-content-md-center">
                    <img src="{% static 'images/nitm_alumni_election_logo.png' %}" class="img-fluid" style="width: 20vw;" />
                </div>
            </div>
            <!-- Section description -->
            <p class="text-muted w-responsive mx-auto mb-5">
                "Somewhere inside of all of us is the power to change the world" - Roald Dahl
            </p>

            <hr class="hr-dark my-5" style="width: 20rem;">

            <form method="post" id="submitvoteform" onsubmit="openLoader()">
                {% csrf_token %}

                <input type="hidden" name="voterid" value="{{voterid}}" />
            
                {% for data in post_data %}

                    <div class="row text-center">
                        <div class="table-responsive">
                            <table class="table" id="listtable">
                                <thead class="bg-light">
                                    <tr>
                                        <th colspan="2"><h4 class="text-center mx-auto font-weight-bold">{{ data.post_name }}</h4></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for data2 in candidate_post_data %}
                                        {% for data3 in data2.post.all %}
                                            {% if data3.id == data.id %}
                                                <tr>
                                                    <td width="50%">
                                                        <div class="avatar w-100 d-flex justify-content-center align-items-center">
                                                            <img src="{% static 'images/' %}{{ data2.candidate_profile.candidate_photo }}" class="img-fluid rounded-circle z-depth-1" alt="{{ data2.candidate_profile.candidate_full_name }}">
                                                        </div>
                                                    </td>
                                                    <td width="50%" style="text-align: left;">
                                                        <div class="form-check">
                                                            <input type="radio" class="form-check-input" id="candidate{{data2.id}}" name="candidate{{data.id}}" value="{{data2.id}}">
                                                            <label class="form-check-label" for="candidate{{data2.id}}"><h4 class="font-weight-bold dark-grey-text">{{ data2.candidate_profile.candidate_full_name }}</h4></label>
                                                        </div>
                                                    </td>
                                                </tr>
                                               
                                            {% endif %}
                                        {% endfor %}
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <hr class="hr-dark my-5" style="width: 20rem;">

                {% endfor %}

                <button type="submit" class="btn btn-outline-dark waves-effect btn-lg fw-bold" name="submitvote" id="submitVote"><i class="fas fa-poll fa-lg pr-1"></i> SUBMIT YOUR VOTES</button>

                <div id="loadingModal" style="display: none;">
                    <button class="btn btn-primary" type="button" disabled>
                        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                        Processing... Please wait
                    </button>
                </div>

            </form>

            
    </section>
    <!--Section: Content-->
  
</div>

{% endblock %}