<div i18n >
    {{"dates.title"|translate}}
</div >

<div >
    <label for="multi_hours" >
		<span >
            {{"dates.hours_different"|translate}}
		</span >
        <select
            [(ngModel)]="config.allowSeveralHours"
            id="multi_hours"
            name="multi_hours"
        >
            <option value=true >{{"dates.multiple.different"|translate}}</option >
            <option value=false >{{"dates.multiple.identical"|translate}}</option >
        </select >
        <span i18n >
            {{"dates.hours_each_day"|translate}}
		</span >
    </label >
</div >

<button
    (click)="addDate()"
    class="btn btn--primary"
    id="add_date_button"
>
    <i class='fa fa-plus' ></i >
    {{"dates.add"|translate}}
</button >
<button
    (click)="showDateInterval = !showDateInterval "
    [ngClass]="{active: showDateInterval}"
    class="btn btn--primary"
    id="toggle_interval_button"
>
    <i class='fa fa-clock-o' ></i >
    {{"dates.add_interval"|translate}}
</button >

<button
    (click)="emptyAll()"
    class="btn btn--warning"
    id="empty_button"
>
    <i class='fa fa-trash' ></i >
    {{"dates.empty"|translate}}
</button >
<section
    *ngIf="showDateInterval"
    class="date-interval " >
    <!--    TODO à mettre en popup-->
    <hr >
    <h2 > {{"dates.add_interval"|translate}}</h2 >
    <p >
        {{"dates.interval_propose"|translate}}
        <input
            (change)="countDays()"
            [(ngModel)]="startDateInterval"
            type="date" >
        {{"dates.interval_span"|translate}}
        <input
            (change)="countDays()"
            [(ngModel)]="endDateInterval"
            type="date" >
        <br >

    </p >
    <button
        (click)="addIntervalOfDates()"
        class="btn btn-block btn--primary" >
        <i class='fa fa-plus' ></i >
        {{"dates.interval_button"|translate}}
        {{intervalDays}}
        {{"dates.interval_button_dates"|translate}}
    </button >
    <hr >
</section >
<div class='columns' >
    <div class='column' >
        <div class="dates-list " >
            <div class='title' >
    <span class="count-dates" >
    {{config.timeList.length}}
    </span >
                <span class="count-dates-txt " >
		{{"dates.count_time"|translate}}
                    (pour chaque jour)
	</span >

            </div >
            <div class='actions' >
                <button
                    (click)="addTime()"
                    *ngIf=" 'false' === config.allowSeveralHours "
                    class="btn btn--primary"
                    id="add_time_button"
                >
                    <i class='fa fa-plus' ></i >
                    {{"dates.add_time"|translate}}
                </button >
                <button
                    (click)="removeAllTimes()"
                    *ngIf=" 'false' === config.allowSeveralHours "
                    class="btn btn--warning"
                    id="remove_time_button"
                >
                    <i class='fa fa-trash' ></i >
                    Aucune plage horaire
                </button >
                <button
                    (click)="resetTimes()"
                    *ngIf=" 'false' === config.allowSeveralHours"
                    class="btn btn--warning"
                    id="reset_time_button"
                >
                    <i class='fa fa-refresh' ></i >
                    réinitialiser
                </button >
            </div >

            <div
                *ngIf=" 'false' === config.allowSeveralHours"
                class="identical-dates"
            >
                <div
                    *ngFor="let time of config.timeList; index as id"
                    class="time-choice"
                >
                    <label for='timeChoices_{{id}}' >
                        <i class='fa fa-clock-o' ></i >
                    </label >
                    <input
                        [(ngModel)]="time.literal"
                        name="timeChoices_{{id}}"
                        type="text"
                        id='timeChoices_{{id}}'
                    >
                    <button
                        (click)="time.timeList.splice(id, 1)"
                        class="btn btn-warning" ><i class="fa fa-times" ></i >
                    </button >
                </div >
            </div >
            <hr >
            <span class="count-dates title" >
    {{config.dateList.length}}
    </span >
            <span >
		{{"dates.count_dates"|translate}}
	</span >
            <button
                class='btn btn--primary'
                (click)='addDate()' >
                {{"dates.add"|translate}}
            </button >
            <div
                *ngFor="let choice of config.dateList; index as id"
                class="date-choice"
            >
                {{id}})
                <input
                    [(ngModel)]="choice.date_object"
                    name="dateChoices_{{id}}"
                    id="dateChoices_{{id}}"
                    useValueAsDate
                    type="date"
                >
                <button
                    (click)="config.dateList.splice(id, 1)"
                    class="btn btn-warning"
                ><i class="fa fa-times" ></i >
                </button >
                <button
                    (click)="addTimeToDate(choice, id)"
                    *ngIf=" 'true' === config.allowSeveralHours"
                    class="btn btn--primary"
                >
                    {{"dates.add_time"|translate}}
                </button >
                <div
                    *ngIf=" 'true' === config.allowSeveralHours"
                    class="several-times"
                >
                    <pre class='debug padded warning' >
                    choice.timeList :
                        {{choice.timeList|json}}
                    </pre >
                    <h2 >Several hours</h2 >
                    <div
                        *ngFor="let timeItem of choice.timeList; index as idTime"
                        class="time-choice"
                    >
                        <input
                            [(ngModel)]="timeItem.literal"
                            name="dateTime_{{id}}_Choices_{{idTime}}"
                            id="dateTime_{{id}}_Choices_{{idTime}}"

                            type="text"
                        >
                        <button
                            (click)="choice.timeList.splice(idTime, 1)"
                            class="btn btn-warning"
                        ><i class="fa fa-times" ></i >
                        </button >
                    </div >
                </div >
            </div >
        </div >
    </div >
    <div class='column' >
        <framadate-resume ></framadate-resume >
    </div >
</div >

<a
    [routerLink]="'/step/resume'"
    class="btn btn--full btn--primary"
>
    C'est parfait!
</a >
<a
    [routerLink]="'/step/home'"
    class="prev"
>
    Retour
</a >

./dates.component.scss

.several-times {
    padding-left: 1em;
}

.date-interval {
    padding: 1em;
    margin-bottom: 1em;
}

.title {
    font-size: 1.5rem;
}

:host {
    input, button {
        + button {
            margin-left: 1em;
        }
    }

}