{# form.hidden_tag() leaves poll_data out (see PollDataInput), so it starts out
   with the poll of the post that is edited. #}
{{ form.poll_data(value=value) }}
<style>
    /* A native <dialog> paints the UA's Canvas colour (white), and the .modal-*
       children read their surfaces from --bs-modal-* variables that Bootstrap
       only defines on .modal - which this element is not. Left alone, both fall
       back to light defaults and the dialog stays white on a dark theme. Supply
       the variables from the theme's root palette and keep the dialog itself
       bare, so .modal-content paints the surface like it does in a real modal. */
    #vote-poll-dialog {
        --bs-modal-color: var(--bs-body-color);
        --bs-modal-bg: var(--bs-body-bg);
        --bs-modal-border-color: var(--bs-border-color);
        --bs-modal-border-width: var(--bs-border-width);
        --bs-modal-border-radius: var(--bs-border-radius-lg);
        --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
        --bs-modal-padding: 1rem;
        --bs-modal-header-padding: 1rem;
        --bs-modal-header-border-color: var(--bs-border-color);
        --bs-modal-header-border-width: var(--bs-border-width);
        --bs-modal-title-line-height: 1.5;
        --bs-modal-footer-gap: 0.5rem;
        --bs-modal-footer-bg: transparent;
        --bs-modal-footer-border-color: var(--bs-border-color);
        --bs-modal-footer-border-width: var(--bs-border-width);

        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 500px;
        max-width: 90vw;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--bs-body-color);
    }

    #vote-poll-dialog::backdrop {
        background-color: #000;
        opacity: .5;
    }
</style>
<dialog id="vote-poll-dialog"
        data-validation-message="{{ _('A poll needs a question and at least two options.') }}">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">{{ _("Insert Poll") }}</h5>
            <button type="button" class="btn-close" id="vote-poll-close" aria-label="{{ _('Close') }}"></button>
        </div>
        <div class="modal-body">
            <div class="mb-3">
                <label class="form-label" for="vote-poll-question">{{ _("Question") }}</label>
                <input type="text" class="form-control" id="vote-poll-question" maxlength="255">
            </div>
            <div class="mb-3">
                <label class="form-label">{{ _("Choice type") }}</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="vote-poll-type" id="vote-poll-type-single" checked>
                    <label class="form-check-label" for="vote-poll-type-single">{{ _("Single choice") }}</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="vote-poll-type" id="vote-poll-type-multiple">
                    <label class="form-check-label" for="vote-poll-type-multiple">{{ _("Multiple choice") }}</label>
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label">{{ _("Options") }}</label>
                <div id="vote-poll-options"></div>
                <button type="button" class="btn btn-sm btn-white mt-1" id="vote-poll-add-option">
                    <span class="fas fa-plus"></span> {{ _("Add option") }}
                </button>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-white me-auto" id="vote-poll-remove" hidden>{{ _("Remove poll") }}</button>
            <button type="button" class="btn btn-white me-1" id="vote-poll-cancel">{{ _("Cancel") }}</button>
            <button type="button" class="btn btn-primary" id="vote-poll-insert">{{ _("Insert") }}</button>
        </div>
    </div>
</dialog>