<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="mail.Poll">
        <div class="o-mail-Poll card border-secondary rounded w-100" t-att-class="{'o-ongoing': !props.poll.end_message_id, 'o-isShowingResults': isShowingResults}">
            <div class="card-body d-flex flex-column gap-1 o-px-2_5 o-py-1_5">
                <p class="card-title text-start fw-bold mb-0" t-att-class="{ 'me-1': props.poll.end_message_id }" t-esc="props.poll.poll_question"/>
                <p t-if="!props.poll.end_message_id" class="card-subtitle mb-1 text-muted smaller">
                    <t t-if="props.poll.allow_multiple_options">Select one or more options</t>
                    <t t-else="">Select one option</t>
                </p>
                <div class="o-mail-PollOption rounded" t-foreach="props.poll.option_ids" t-as="option" t-key="option.id" t-att-style="percentageAttStyle(option)" t-att-class="{'o-selected': state.selectedOptionIds.has(option.id), 'o-winningOption': option.eq(props.poll.winning_option_id), 'o-hasVotes': option.number_of_votes > 0 }">
                    <div t-if="isShowingResults" class="d-flex justify-content-between p-2">
                        <span class="fw-bold me-1 text-truncate" t-esc="option.option_label"/>
                        <span class="flex-shrink-0">
                            <span class="me-2 smaller" t-esc="props.poll.voteCountText(option.number_of_votes)"/>
                            <span class="o-fw-600"><t t-esc="option.vote_percentage"/>%</span>
                            <i t-if="option.selected_by_self" class="o-mx-1_5 fa fa-lg fa-check-circle"/>
                        </span>
                    </div>
                    <label t-else="" class="d-flex justify-content-between p-2 cursor-pointer">
                        <span class="fw-bold me-1 text-truncate" t-esc="option.option_label"/>
                        <input class="form-check-input" t-att-disabled="state.voting" t-att-checked="state.selectedOptionIds.has(option.id)" t-on-change="(ev) => this.onOptionCheckboxToggle(option.id, ev.target.checked)" t-att-type="props.poll.allow_multiple_options ? 'checkbox' : 'radio'"/>
                    </label>
                </div>
                <div class="d-flex align-items-center mt-2">
                    <div class="small d-flex o-gap-0_5">
                        <a href="#" class="text-decoration-underline link-underline link-underline-opacity-0 link-underline-opacity-100-hover" t-on-click="onClickNumberOfVotes" t-esc="props.poll.voteCountText(props.poll.numberOfVotes)"/>
                        <span class="text-muted">&#8729;</span>
                        <span t-if="props.poll.end_message_id" class="text-muted">Poll closed</span>
                        <span t-else="" class="text-muted" t-att-title="remainingTimeTextTitle" t-esc="state.remainingTimeText"/>
                    </div>
                    <span class="flex-grow-1"/>
                    <t t-if="!props.poll.end_message_id">
                        <t t-if="!props.poll.selfAlreadyVoted">
                            <t t-if="isShowingResults">
                                <button class="btn btn-secondary" t-on-click="() => this.hideResults()">Go back to vote</button>
                            </t>
                            <t t-else="">
                                <a href="#" class="me-2" t-on-click="() => this.showResults()">View results</a>
                                <button class="btn btn-primary" t-att-disabled="voteButtonDisabled" t-on-click="onClickVote">Vote</button>
                            </t>
                        </t>
                        <button t-else="" class="btn btn-secondary" t-on-click="props.poll.removeVote">Remove Vote</button>
                    </t>
                </div>
            </div>
        </div>
    </t>
</templates>
