{% extends "base.html" %}
{% load l10n %}
{% load i18n %}
{% block title %}
    Vote in the {{ election.name }} - {{ CONVENTION_NAME }}
{% endblock title %}
{# styles for the voting_ballot_form column layout on wider screens #}
{% block extra_css %}
    <style>
     @media (min-width: 1024px) {
         .voting-field .mb-3 {
             display: flex;
             align-items: center;
             gap: 1rem;
         }
         .voting-field .mb-3 label {
             flex: 1;
             margin-bottom: 0;
         }
         .voting-field .mb-3 select {
             width: auto;
             min-width: 8rem;
             flex-shrink: 0;
         }
     }

     fieldset legend {
         position: relative;
     }
     fieldset legend .anchor-link {
         opacity: 0;
         position: absolute;
         left: -1.5em;
         text-decoration: none;
         transition: opacity 0.15s;
     }
     fieldset legend:hover .anchor-link {
         opacity: 0.6;
     }
    </style>
{% endblock extra_css %}
{% block content %}
    <div class="panel scrollable-div">
        {% block email-control %}
            {# This block is for the mobile interfaces; it only shows in small viewports #}
            <div class="d-block d-md-none">
                <form action="{% url 'election:email-my-votes' election_id=election.slug %}"
                      method="post">
                    {% csrf_token %}
                    <div class="d-grid d-md-flex col-9">
                        <button hx-swap="none"
                                hx-post="{% url 'election:email-my-votes' election_id=election.slug %}"
                                hx-trigger="click"
                                type="submit"
                                class="btn btn-primary">{% translate "Email my ballot to me" %}</button>
                    </div>
                </form>
            </div>
            {# This block is for the web interface; it only shows in larger viewports #}
            <div class="sticky-top d-none d-md-inline-flex justify-content-end vote-email float-end">
                <form action="{% url 'election:email-my-votes' election_id=election.slug %}"
                      method="post">
                    {% csrf_token %}
                    <div class="d-grid d-md-flex col-9">
                        <button hx-swap="none"
                                hx-post="{% url 'election:email-my-votes' election_id=election.slug %}"
                                hx-trigger="click"
                                type="submit"
                                class="btn btn-primary">{% translate "Email my ballot to me" %}</button>
                    </div>
                </form>
            </div>
        {% endblock email-control %}
        <div class="d-flex justify-content-center h-100 pt-3 pt-md-0">
            <div class="col-md-9 col-lg-7 col-xl-10">
                <div class="row">
                    <div class="d-flex-row">
                        {% block instructions %}
                            {% include "nominate/bits/voting_instructions.html" with closing_date=election.voting_info.close_date %}
                        {% endblock instructions %}
                    </div>
                </div>
                <div class="row">
                    <div class="col l-v-spacing l-panel hugo-description">
                        <div class="container">
                            {% block form %}
                                {% include "nominate/voting_ballot_form.html" %}
                            {% endblock form %}
                        </div>
                    </div>
                </div>
                <div class="row pt-3">
                    <div class="d-flex-row">
                        <div class="container"
                             title="Submtting this form consitututes signing this ballot per WSFS mumbo jumbo here. (hi, people with screen readers, or view-source fans!)">
                            {% include "nominate/bits/voting_disclaimers.html" %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="finalist-form" class="hugo-show-form-thanks" hidden>
        <finalists :categories="categories" />
    </div>
</div>
{% endblock %}