<form [formGroup]="form" name="form" autocomplete="off" novalidate>
    <table class="crud-table grid-container mat-elevation-z8">
        <ng-container>
            <tr class="header-table">
                <td class="margin">
                </td>
                <td class="margin">
                    {{ "Día" | translate }}
                </td>
                <td class="margin">
                    {{ "Desde" | translate }}
                </td>
                <td class="margin">
                    {{ "Hasta" | translate }}
                </td>

            </tr>

            <tr class="trimp">
                <td class="margin conf">
                    <xdf-checkbox name="sunConf" [options]="{showSuggest: false}" [formGroup]="form">
                    </xdf-checkbox>
                </td>
                <td class="margin day">
                    <span>{{ week[0] | translate }}</span>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['sunFrom']" [options]="{seconds: true}" name="sunFrom"
                            [formGroup]="form" *ngIf="form?.value?.sunConf">
                        </xdf-time-picker>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['sunTo']" [options]="{seconds: true}" name="sunTo"
                            [formGroup]="form" *ngIf="form?.value?.sunConf">
                        </xdf-time-picker>
                        <div class="suggest" *ngIf="!sunValidator && form?.value?.sunConf">
                            {{'week_scheduler_suggest_information' | translate}}</div>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.sunConf">{{getValueTime(this.form.value['sunFrom'])}}</span>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.sunConf">{{getValueTime(this.form.value['sunTo'])}}</span>
                    </div>
                </td>
            </tr>
            <!-- Día1 -->
            <tr>

                <td class="margin conf">
                    <xdf-checkbox name="monConf" [options]="{showSuggest: false}" [formGroup]="form">
                    </xdf-checkbox>
                </td>
                <td class="margin day">
                    <span>{{ week[1] | translate }}</span>
                </td>

                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.monConf">{{getValueTime(this.form.value['monFrom'])}}</span>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['monFrom']" [options]="{seconds: true}" name="monFrom"
                            [formGroup]="form" *ngIf="form?.value?.monConf">
                        </xdf-time-picker>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.monConf">{{getValueTime(this.form.value['monTo'])}}</span>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['monTo']" [options]="{seconds: true}" name="monTo"
                            [formGroup]="form" *ngIf="form?.value?.monConf"></xdf-time-picker>

                        <div class="suggest" *ngIf="!monValidator && form?.value?.monConf">
                            {{'week_scheduler_suggest_information' | translate}}</div>
                    </div>
                </td>
            </tr>
            <!-- Día2 -->
            <tr class="trimp">
                <td class="margin conf">
                    <xdf-checkbox name="tueConf" [options]="{showSuggest: false}" [formGroup]="form">
                    </xdf-checkbox>
                </td>
                <td class="margin day">
                    <span>{{ week[2] | translate }}</span>
                </td>
                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.tueConf">{{getValueTime(this.form.value['tueFrom'])}}</span>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['tueFrom']" [options]="{seconds: true}" name="tueFrom"
                            [formGroup]="form" *ngIf="form?.value?.tueConf">
                        </xdf-time-picker>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.tueConf">{{getValueTime(this.form.value['tueTo'])}}</span>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['tueTo']" [options]="{seconds: true}" name="tueTo"
                            [formGroup]="form" *ngIf="form?.value?.tueConf"></xdf-time-picker>

                        <div class="suggest" *ngIf="!tueValidator && form?.value?.tueConf">
                            {{'week_scheduler_suggest_information' | translate}}</div>
                    </div>
                </td>
            </tr>
            <!-- Día3 -->
            <tr>
                <td class="margin conf">
                    <xdf-checkbox name="wedConf" [options]="{showSuggest: false}" [formGroup]="form">
                    </xdf-checkbox>
                </td>
                <td class="margin day">
                    <span>{{ week[3] | translate }}</span>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['wedFrom']" [options]="{seconds: true}" name="wedFrom"
                            [formGroup]="form" *ngIf="form?.value?.wedConf">
                        </xdf-time-picker>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['wedTo']" [options]="{seconds: true}" name="wedTo"
                            [formGroup]="form" *ngIf="form?.value?.wedConf"></xdf-time-picker>

                        <div class="suggest" *ngIf="!wedValidator && form?.value?.wedConf">
                            {{'week_scheduler_suggest_information' | translate}}</div>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.wedConf">{{getValueTime(this.form.value['wedFrom'])}}</span>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.wedConf">{{getValueTime(this.form.value['wedTo'])}}</span>
                    </div>
                </td>
            </tr>
            <!-- Día4 -->
            <tr class="trimp">
                <td class="margin conf">
                    <xdf-checkbox name="thuConf" [options]="{showSuggest: false}" [formGroup]="form">
                    </xdf-checkbox>
                </td>
                <td class="margin day">
                    <span>{{ week[4] | translate }}</span>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['thuFrom']" [options]="{seconds: true}" name="thuFrom"
                            [formGroup]="form" *ngIf="form?.value?.thuConf">
                        </xdf-time-picker>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['thuTo']" [options]="{seconds: true}" name="thuTo"
                            [formGroup]="form" *ngIf="form?.value?.thuConf"></xdf-time-picker>

                        <div class="suggest" *ngIf="!thuValidator && form?.value?.thuConf">
                            {{'week_scheduler_suggest_information' | translate}}</div>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.thuConf">{{getValueTime(this.form.value['thuFrom'])}}</span>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.thuConf">{{getValueTime(this.form.value['thuTo'])}}</span>
                    </div>
                </td>
            </tr>
            <!-- Día5 -->
            <tr>
                <td class="margin conf">
                    <xdf-checkbox name="friConf" [options]="{showSuggest: false}" [formGroup]="form" [formGroup]="form">
                    </xdf-checkbox>
                </td>
                <td class="margin day">
                    <span>{{ week[5] | translate }}</span>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['friFrom']" [options]="{seconds: true}" name="friFrom"
                            [formGroup]="form" *ngIf="form?.value?.friConf">
                        </xdf-time-picker>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['friTo']" [options]="{seconds: true}" name="friTo"
                            [formGroup]="form" *ngIf="form?.value?.friConf"></xdf-time-picker>

                        <div class="suggest" *ngIf="!friValidator && form?.value?.friConf">
                            {{'week_scheduler_suggest_information' | translate}}</div>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.friConf">{{getValueTime(this.form.value['friFrom'])}}</span>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.friConf">{{getValueTime(this.form.value['friTo'])}}</span>
                    </div>
                </td>
            </tr>
            <!-- Día6 -->
            <tr class="trimp">
                <td class="margin conf">
                    <xdf-checkbox name="satConf" [options]="{showSuggest: false}" [formGroup]="form">
                    </xdf-checkbox>
                </td>
                <td class="margin day">
                    <span>{{ week[6] | translate }}</span>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['satFrom']" [options]="{seconds: true}" name="satFrom"
                            [formGroup]="form" *ngIf="form?.value?.satConf">
                        </xdf-time-picker>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode !== 'view'">
                    <div>
                        <xdf-time-picker [formControl]="form.controls['satTo']" [options]="{seconds: true}" name="satTo"
                            [formGroup]="form" *ngIf="form?.value?.satConf"></xdf-time-picker>
                        <div class="suggest" *ngIf="!satValidator && form?.value?.satConf">
                            {{'week_scheduler_suggest_information' | translate}}</div>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.satConf">{{getValueTime(this.form.value['satFrom'])}}</span>
                    </div>
                </td>
                <td class="margin time" *ngIf="mode === 'view'">
                    <div>
                        <span *ngIf="form?.value?.satConf">{{getValueTime(this.form.value['satTo'])}}</span>
                    </div>
                </td>
            </tr>


        </ng-container>
    </table>
</form>