<h1 >
    Récapitulatif
</h1 >
<div class='card content' >

    <h2 class="hero-title title" >
        {{config.title}}
    </h2 >
    <div class="creation" >
        créé par
        <i class='pseudo' >
            {{config.myName}}
        </i >
    </div >
    <div class="description" >
        <cite >
            {{config.description}}
        </cite >
    </div >
    <section
        class='preview type-classic'
        *ngIf='config.pollType == "classic"' >
        <ul >
            <li
                markdown
                *ngFor="let questions of config.answers" >
                <img
                    class='img-thumbnail'
                    src='{{questions.url}}'
                    alt='image {{questions.url}}' >
                {{questions.id + 1}}. {{questions.text}}
            </li >
        </ul >
    </section >
    <section
        class='type-date'
        *ngIf='config.pollType !== "classic"' >
        <i class='fa fa-clock-o' ></i >
        <span
            class='well'
            *ngIf="'true' === config.allowSeveralHours" >
            {{"dates.multiple.different"|translate}}
        </span >
        <span
            class='well'
            *ngIf="'false' === config.allowSeveralHours" >
            {{"dates.multiple.identical"|translate}}
        </span >
        <div
            *ngFor="let choice of config.dateList; index as id"
            class="date-choice"
        >
            <div
                class='only-one-slice'
                *ngIf='!choice.timeList.length' >
                <i class='fa fa-square-o' ></i >
            </div >
            {{choice.literal}}

            <!-- CASE different slices of the day-->
            <div
                *ngIf="'true' === config.allowSeveralHours"
                class="several-times"
            >

                <div
                    *ngFor="let time of choice.timeList ; index as idTime"
                    class="time-choice"
                >
                    {{idTime}})
                    <i class='fa fa-square-o' ></i >
                    {{time.literal}}
                </div >

            </div >
            <!-- CASE all dates having the same slices of the day-->
            <div
                *ngIf="'false' === config.allowSeveralHours"
                class="same-times"
            >
                <div
                    *ngFor="let time of config.timeList "
                    class="time-choice"
                >
                    <i class='fa fa-square-o' ></i >
                    {{time.literal}}
                </div >
            </div >
        </div >
    </section >

</div >

<button
    [routerLink]="'/step/visibility'"
    class="btn btn--primary btn--full" >
    C'est parfait!
</button >

<div class="back" >
    <a
        *ngIf='config.pollType == "classic"'
        [routerLink]="'/step/answers'"
        class="prev" >
        Retour
    </a >
    <a
        *ngIf='config.pollType == "dates"'
        [routerLink]="'/step/date'"
        class="prev" >
        Retour
    </a >
</div >

./resume.component.scss

.card {
    box-shadow: 0px 0px 0.5em #ccc;
    padding: 2em;
    margin: 1em 0;
}

.time-choice {
    margin-left: 3em;
}