<div class="choicebox selection-{{ choice.answer }}">
	<!-- add .choicebox--active to most voted -->
	<button
		*ngIf="showChangeChoicebutton"
		class="btn btn--primary manage"
		(click)="choice.simpleAnswer = !choice.simpleAnswer"
	>
		<i class="fa fa-cogs" aria-hidden="true"></i>
	</button>

	<div class="choicebox__subject">
		<div class="columns">
			<div class="column">
				<div class="text title clickable" (click)="setAnswserTo('yes')">
					{{ choice.text }}
				</div>
				<!-- TEXT CASE --><!--
        <p class="choicebox__txt">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla nobis nam culpa !
        </p>
        --><!-- TEXT CASE -->

				<!-- IMG CASE -->
				<img *ngIf="choice.url" class="choicebox__img" [src]="choice.url" alt="{{ choice.url }}" />
				<!-- IMG CASE -->

				<!-- DATE CASE  -->
				<div class="dates" *ngIf="pollIsSpecialDate">
					<div class="choicebox__date">
						{{ choice.date.date | date: 'EEE' }}
						<span class="choicebox__day">{{ choice.date.date | date: 'dd' }}</span>
						{{ choice.date.date | date: 'LLL' }}
					</div>
					<div class="choicebox__hour">
						{{ choice.date.date | date: 'H:m' }}
					</div>
				</div>
				<!-- DATE CASE -->
			</div>
			<div class="column">
				<div class="choicebox__actions">
					<!-- show only the yes check if the config is set to simpleAnswer -->
					<!-- add .choicebox__btn--active to selected <button> -->
					<span class="simple-answer">
						<button
							class="choicebox__btn choicebox__btn--yes"
							type="button"
							[ngClass]="{ 'choicebox__btn--active': choice.answer === 'yes' }"
							(click)="setAnswserTo('yes')"
						>
							<img src="../../../assets/img/check.svg" alt="" />
						</button>
					</span>
					<span class="complex-answers" *ngIf="!simpleAnswer">
						<button
							class="choicebox__btn choicebox__btn--maybe"
							type="button"
							[ngClass]="{ 'choicebox__btn--active': choice.answer === 'maybe' }"
							(click)="setAnswserTo('maybe')"
						>
							<img src="../../../assets/img/check-2.svg" alt="" />
						</button>
						<button
							class="choicebox__btn choicebox__btn--no"
							type="button"
							[ngClass]="{ 'choicebox__btn--active': choice.answer === 'no' }"
							(click)="setAnswserTo('no')"
						>
							<img src="../../../assets/img/croix.svg" alt="" />
						</button>
					</span>
				</div>
			</div>
			<div class="column">
				<div class="choicebox__count">
					<div class="no-votes" *ngIf="!poll.choices_count.counts[choice.id]">
						aucun vote
					</div>
					<button
						type="button"
						aria-describedby="choicebox-tooltip"
						class="choicebox__votes"
						*ngIf="poll.choices_count && choice && poll.choices_count.counts[choice.id]"
					>
						<div class="choicebox__vote">
							{{ poll.choices_count.counts[choice.id].yes.count }}
							<img width="20px" height="21px" src="../../../assets/img/icon_voter_YES.svg" alt="" />
						</div>
						<div class="choicebox__vote">
							{{ poll.choices_count.counts[choice.id].maybe.count }}
							<img width="22px" height="24px" src="../../../assets/img/icon_voter_MAYBE.svg" alt="" />
						</div>
						<div class="choicebox__tooltip" id="choicebox-tooltip">
							<div class="choicebox__tooltiplist">
								<div class="choicebox__tooltipttl">
									<img
										width="20px"
										height="21px"
										src="../../../assets/img/icon_voter_YES.svg"
										alt=""
									/>
									{{ poll.choices_count.counts[choice.id].yes.count }} "Oui"
								</div>
								<!--                    liste des gens qui ont répondu oui-->
								<ul>
									<li *ngFor="let pseudo of choices_count.counts[choice.id].yes.people">
										{{ pseudo }}
									</li>
								</ul>
							</div>
							<div class="choicebox__tooltiplist" *ngIf="!simpleAnswer">
								<div class="choicebox__tooltipttl">
									<img
										width="22px"
										height="24px"
										src="../../../assets/img/icon_voter_MAYBE.svg"
										alt=""
									/>
									{{ poll.choices_count.counts[choice.id].maybe.count }} "Peut-être"
								</div>
								<ul>
									<li *ngFor="let pseudo of choices_count.counts[choice.id].maybe.people">
										{{ pseudo }}
									</li>
								</ul>
							</div>
							<div class="choicebox__tooltiplist" *ngIf="!simpleAnswer">
								<div class="choicebox__tooltipttl">
									<i class="fa fa-times" aria-hidden="true"></i>
									{{ poll.choices_count.counts[choice.id].no.count }} "Non"
								</div>
								<ul>
									<li *ngFor="let pseudo of choices_count.counts[choice.id].no.people">
										{{ pseudo }}
									</li>
								</ul>
							</div>
						</div>
					</button>
					<div class="choicebox__countxt">
						Choix ayant reçu le plus de votes
					</div>
				</div>
			</div>
		</div>
	</div>
</div>