funky-framadate-front/src/app/features/participation/add-answer/add-answer.component.html

<div class="rounded-block add-answer-box">
	<div class="columns is-vcentered">
		<div class="column">
			<label class="label">{{ choice.name }}</label>
		</div>
		<div class="column">
			<div class="buttons has-addons is-centered">
				<button class="button" [ngClass]="{ 'is-selected is-success': answer == 'YES' }" (click)="vote('YES')">
					YES
				</button>
				<button
					class="button"
					[ngClass]="{ 'is-selected is-warning': answer == 'MAYBE' }"
					(click)="vote('MAYBE')"
					*ngIf="poll.isMaybeAnswerAvailable"
				>
					MAYBE
				</button>
				<button class="button" [ngClass]="{ 'is-selected is-danger': answer == 'NO' }" (click)="vote('NO')">
					NO
				</button>
			</div>
		</div>
		<div class="column is-narrow">
			<div class="buttons has-addons is-right" (click)="openModal(choice)">
				<button class="button is-secondary">
					{{ choice.counts.get(answerEnum.YES) }}
					<img class="image is-24x24" src="../../../assets/img/icon_voter_YES.svg" />
				</button>
				<button class="button is-primary" *ngIf="poll.isMaybeAnswerAvailable">
					{{ choice.counts.get(answerEnum.MAYBE) }}
					<img class="image is-24x24" src="../../../assets/img/icon_voter_MAYBE.svg" />
				</button>
			</div>
		</div>
	</div>
</div>