{% extends "base.html" %}
{% load i18n waffle_tags %}
{% block content %}
    <div class="container">
        <div class="row">
            {% if not user.is_authenticated %}
                {% include "bits/login_forms.html" %}
            {% else %}
                <!-- For mobile: separate sections stacked -->
                <div class="d-block d-md-none">
                    <!-- WSFS Elections Section for Mobile -->
                    <div class="p-5 text-center bg-body-tertiary">
                        <div class="container py-5">
                            <h1 class="text-body-emphasis">{% translate "WSFS Elections" %}</h1>
                            <p class="col-lg-8 mx-auto lead">{% translate "You can access your available WSFS elections here." %}</p>
                        </div>
                    </div>
                    <div class="list-group justify-content-top mb-5">
                        {% for election in object_list %}
                            {% include "nominate/_election_list_entry.html" with election=election %}
                        {% endfor %}
                    </div>
                    {% switch "advisory_votes" %}
                        <!-- Consultative Votes Section for Mobile -->
                        <div class="p-5 text-center bg-body-tertiary">
                            <div class="container py-5">
                                <h1 class="text-body-emphasis">{% translate "Consultative Votes" %}</h1>
                            </div>
                        </div>
                        <div class="list-group justify-content-top">
                            {% for proposal in proposals %}
                                {% include "advise/_proposal_entry_mobile.html" with proposal=proposal %}
                            {% empty %}
                                <div class="text-center justify-content-top">
                                    <p>No advisory votes are currently open.</p>
                                </div>
                            {% endfor %}
                        </div>
                    {% endswitch %}
                </div>
                <!-- For desktop: 2x2 grid layout -->
                <div class="d-none d-md-block">
                    <!-- Headers Row -->
                    <div class="row">
                        <!-- WSFS Elections Header -->
                        <div class="col-md-6">
                            <div class="p-5 text-center bg-body-tertiary">
                                <div class="container py-5">
                                    <h1 class="text-body-emphasis">{% translate "WSFS Elections" %}</h1>
                                    <p class="col-lg-8 mx-auto lead">{% translate "You can access your available WSFS elections here." %}</p>
                                </div>
                            </div>
                        </div>
                        <!-- Consultative Votes Header -->
                        {% switch "advisory_votes" %}
                            <div class="col-md-6">
                                <div class="p-5 text-center bg-body-tertiary">
                                    <div class="container py-5">
                                        <h1 class="text-body-emphasis">{% translate "Consultative Votes" %}</h1>
                                    </div>
                                </div>
                            </div>
                        {% endswitch %}
                    </div>
                    <!-- Content Row -->
                    <div class="row">
                        <!-- WSFS Elections List -->
                        <div class="col-md-6">
                            <div class="list-group justify-content-top">
                                {% for election in object_list %}
                                    {% include "nominate/_election_list_entry.html" with election=election %}
                                {% endfor %}
                            </div>
                        </div>
                        <!-- Consultative Votes List -->
                        {% switch "advisory_votes" %}
                            <div class="col-md-6">
                                <div class="list-group justify-content-top">
                                    {% for proposal in proposals %}
                                        {% include "advise/_proposal_entry_desktop.html" with proposal=proposal %}
                                    {% empty %}
                                        <div class="text-center justify-content-top">
                                            <p>No advisory votes are currently open.</p>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endswitch %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}