{% extends "base.html" %}
{% block title %}Vote: {{ poll.question }}{% endblock %}
{% block head %}
<link rel="stylesheet" href="{{ polls_css_url }}?v={{ owlbot_version }}">
{% endblock %}
{% block content %}
<h1 class="mb-3">{{ poll.question }}</h1>
<div id="poll-status" class="mb-4">
    <p class="text-body-secondary mb-1">Time remaining: <strong id="timer">--:--</strong></p>
    {% if poll.hidden %}
        {% if viewer_is_moderator %}
    <p class="text-body-secondary mb-{{ 1 if poll.allow_multiple else 0 }}">Results are hidden until this poll ends. As a moderator, you can still see the real-time results.</p>
        {% else %}
    <p class="text-body-secondary mb-{{ 1 if poll.allow_multiple else 0 }}">Results are hidden until this poll ends.</p>
        {% endif %}
    {% else %}
    <p class="text-body-secondary mb-{{ 1 if poll.allow_multiple else 0 }}">Results are updated in real time.</p>
    {% endif %}
    {% if poll.allow_multiple %}
        {% set min_count = poll.min_selections or 1 %}
        {% set max_count = poll.max_selections %}
        {% set min_label = min_count ~ " option" ~ ("s" if min_count != 1 else "") %}
    <p class="text-body-secondary mb-0">
        {% if max_count is none %}
            {% if min_count == 1 %}
        Select one or more options.
            {% else %}
        Select at least {{ min_label }}.
            {% endif %}
        {% else %}
            {% set max_label = max_count ~ " option" ~ ("s" if max_count != 1 else "") %}
            {% if min_count == max_count %}
        Select exactly {{ min_label }}.
            {% else %}
        Select {{ min_count }} to {{ max_label }}.
            {% endif %}
        {% endif %}
    </p>
    {% endif %}
</div>

{% if error %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endif %}

<form method="POST" action="{{ vote_url }}" id="vote-form">
    <div class="d-flex flex-column gap-2 mb-4">
        {% for option in poll.options %}
        <div class="option-bar" data-index="{{ loop.index0 }}">
            <div class="bar-fill" style="width: 0%"></div>
            <label>
                {% if poll.allow_multiple %}
                <input type="checkbox" name="option" value="{{ loop.index0 }}" class="form-check-input me-2"
                    {% if loop.index0 in current_selections %}checked{% endif %}
                    {% if has_voted or (not viewer_is_authenticated and poll.requires_auth) %}disabled{% endif %}>
                {% else %}
                <input type="radio" name="option" value="{{ loop.index0 }}" class="form-check-input me-2" required
                    {% if loop.index0 in current_selections %}checked{% endif %}
                    {% if has_voted or (not viewer_is_authenticated and poll.requires_auth) %}disabled{% endif %}>
                {% endif %}
                {{ option }}
            </label>
            <span class="vote-count d-none" data-index="{{ loop.index0 }}">
                <span class="count">-</span> (<span class="pct">-</span>%)
            </span>
        </div>
        {% endfor %}
    </div>

    {% if poll.requires_auth and not viewer_is_authenticated %}
    <div class="alert alert-warning mb-0" role="alert">This poll requires an authenticated account to vote. You are viewing results only.</div>
    {% elif not has_voted %}
    <button type="submit" class="btn btn-primary me-2">Vote</button>
    {% else %}
    <p class="text-body-secondary mb-0">Your vote has been recorded.</p>
    {% endif %}
</form>

{% if viewer_is_moderator %}
<hr class="my-4">
<h5>Manage Poll</h5>
<p class="text-body-secondary">As a moderator, you can perform the following actions on this poll:</p>
<div class="d-flex gap-2">
    <form method="POST" action="{{ end_url }}">
        <button type="submit" class="btn btn-success">End Poll</button>
    </form>
    <form method="POST" action="{{ cancel_url }}">
        <button type="submit" class="btn btn-danger">Cancel Poll</button>
    </form>
</div>
{% endif %}
{% endblock %}
{% block scripts %}
<script id="poll-config" type="application/json">
{{ {
    "hidden": poll.hidden,
    "timeRemaining": poll.time_remaining,
    "isModerator": viewer_is_moderator,
    "eventsUrl": events_url,
    "optionCount": poll.options | length
} | tojson }}
</script>
<script type="module" src="{{ polls_js_url }}?v={{ owlbot_version }}"></script>
{% endblock %}