{# The vote and delete views redirect to the post, which ends on its topic page -
   htmx picks this widget out of that, or nothing once the poll is deleted. Every
   swap attribute is set on the vote form and the delete button, because the post
   sits inside the topic page's element that sets the swap targets of its
   moderation actions. #}
<div class="mb-3 col-12" id="poll-{{ poll.id }}">
    <div class="card my-2 vote-poll">
        <div class="card-body">
            <h6 class="card-title">{{ poll.question }}</h6>

            {% if can_vote and not editing and not summary.user_option_ids %}
            <form method="post" action="{{ url_for('vote.cast_vote', poll_id=poll.id) }}"
                  hx-post="{{ url_for('vote.cast_vote', poll_id=poll.id) }}"
                  hx-target="#poll-{{ poll.id }}" hx-select="#poll-{{ poll.id }}" hx-swap="outerHTML"
                  hx-select-oob="#flashed-messages">
                {{ form.hidden_tag() }}
                {% for option in poll.options %}
                <div class="form-check">
                    <input class="form-check-input" type="{{ 'checkbox' if poll.is_multiple_choice else 'radio' }}"
                           name="option_id" value="{{ option.id }}" id="vote-poll-{{ poll.id }}-option-{{ option.id }}">
                    <label class="form-check-label" for="vote-poll-{{ poll.id }}-option-{{ option.id }}">
                        {{ option.text }}
                    </label>
                </div>
                {% endfor %}
                <button type="submit" class="btn btn-sm btn-primary mt-2">{{ _("Vote") }}</button>
            </form>
            {% else %}
            <ul class="list-unstyled mb-1">
                {% for option in poll.options %}
                {% set count = summary.counts[option.id] %}
                {% set percentage = (100 * count / summary.total) if summary.total else 0 %}
                <li class="mb-1 {{ 'fw-bold' if option.id in summary.user_option_ids }}">
                    <div class="d-flex justify-content-between">
                        <span>{{ option.text }}</span>
                        <span>{{ "%.0f"|format(percentage) }}% ({{ count }})</span>
                    </div>
                    <div class="progress" style="height: 4px;">
                        <div class="progress-bar" role="progressbar" style="width: {{ percentage }}%"></div>
                    </div>
                </li>
                {% endfor %}
            </ul>
            <small class="text-muted">
                {% if editing %}
                {{ _("This poll cannot be changed here.") }}
                {% else %}
                {{ _("%(count)s total votes", count=summary.total) }}
                {% if not can_vote %} &middot; {{ _("Log in to vote.") }}{% endif %}
                {% endif %}
            </small>
            {% endif %}

            {% if can_delete %}
            {# A button rather than a form: on the post and topic edit pages this
               widget sits inside the edit form, and the browser drops a nested form.
               htmx sends the CSRF token as a header, and hx-params="none" keeps the
               edit form's fields out of the request. #}
            <div class="mt-2">
                <button type="button" class="btn btn-sm btn-outline-danger"
                        hx-post="{{ url_for('vote.delete_poll', poll_id=poll.id) }}"
                        hx-params="none"
                        hx-confirm="{{ _('Are you sure?') }}"
                        hx-target="#poll-{{ poll.id }}" hx-select="#poll-{{ poll.id }}" hx-swap="outerHTML"
                        hx-select-oob="#flashed-messages"
                        data-tooltip="tooltip" title="{{ _('Delete this poll') }}">
                    <span class="fas fa-trash fa-fw"></span> {{ _("Delete Poll") }}
                </button>
            </div>
            {% endif %}
        </div>
    </div>
</div>