funky-framadate-front/src/app/ui/vote-choice/vote-choice.component.html

<div class="choicebox selection-{{choice.answer}}" ><!-- add .choicebox--active to most voted -->
    <button
        class='btn btn--primary'
        (click)=' choice.simpleAnswer = !choice.simpleAnswer' >
        <i class='fa fa-gears' ></i >
    </button >
    <div
        class="text title clickable"
        (click)="setAnswserTo('yes')" >
        {{choice.name}}
    </div >

    <div class="choicebox__subject" >

        <!-- TEXT CASE --><!--
        <p class="choicebox__txt">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla nobis nam culpa !
        </p>
        --><!-- TEXT CASE -->

        <!-- IMG CASE --><!--
        <img class="choicebox__img" src="https://picsum.photos/200" alt="">
        --><!-- IMG CASE -->

        <!-- DATE CASE  -->
        <div
            class="dates"
            *ngIf="choice.date" >
            <div class="choicebox__date" >
                {{choice.date | date:'EEE'}} <span
                class="choicebox__day" >{{choice.date | date:'dd'}}</span > {{choice.date | date:'LLL'}}
            </div >
            <div class="choicebox__hour" >
                08:00
            </div >
        </div >
        <!-- DATE CASE -->

    </div >

    <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="!choice.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 class="choicebox__count" >
        <button
            type="button"
            aria-describedby="choicebox-tooltip"
            class="choicebox__votes"
            *ngIf="choice.votes.count" >
            <div class="choicebox__vote" >
                {{choice.votes.count.yes}}
                <img
                    width="20px"
                    height="21px"
                    src="../../../assets/img/votant-sur.svg"
                    alt="" >
            </div >
            <div class="choicebox__vote" >
                {{choice.votes.count.maybe}}
                <img
                    width="22px"
                    height="24px"
                    src="../../../assets/img/votant-pas-sur.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/votant-sur.svg"
                            alt="" >
                        {{choice.votes.count.yes}} "Oui"
                    </div >
                    <ul >
                        <li >Lorem</li >
                        <li >Ipsum dolor</li >
                        <li >Sit amet</li >
                        <li >Consectetur</li >
                    </ul >
                </div >
                <div class="choicebox__tooltiplist" >
                    <div class="choicebox__tooltipttl" >
                        <img
                            width="22px"
                            height="24px"
                            src="../../../assets/img/votant-pas-sur.svg"
                            alt="" >
                        {{choice.votes.count.maybe}} "Peut-être"
                    </div >
                    <ul >
                        <li >Lorem</li >
                        <li >Ipsum dolor</li >
                        <li >Sit amet</li >
                        <li >Consectetur</li >
                        <li >Lorem</li >
                        <li >Ipsum dolor</li >
                        <li >Sit amet</li >
                        <li >Consectetur</li >
                    </ul >
                </div >
            </div >
        </button >
        <div class="choicebox__countxt" >
            Choix ayant reçu le plus de votes
        </div >
    </div >
</div >