<p-overlayPanel #op [showCloseIcon]="false" [dismissable]="true">
    <ng-template pTemplate>
        <p-tabView #tv>
            <p-tabPanel header="{{ 'SCHEDULE.DOWNLOAD-SCHEDULE-FOR-DAY' | translate }}">
                <p-calendar
                    [(ngModel)]="dateForDay"
                    [monthNavigator]="false"
                    [yearNavigator]="false"
                    [inline]="true"
                    yearRange="2000:2030"
                    [selectOtherMonths]="true"
                    inputId="navigators"
                    [locale]="localizationService.calendarTranslate"
                    [minDate]="minDate"
                    [maxDate]="maxDate"
                >
                </p-calendar>
            </p-tabPanel>
            <p-tabPanel header="{{ 'SCHEDULE.DOWNLOAD-SCHEDULE-FOR-THE-CURRENT-WEEK' | translate }}" [selected]="true">
                <p-calendar
                    [(ngModel)]="rangeDatesWeek"
                    selectionMode="range"
                    [readonlyInput]="true"
                    inputId="rangeWeek"
                    [disabled]="true"
                    [selectOtherMonths]="true"
                    [inline]="true"
                    [locale]="localizationService.calendarTranslate"
                    [minDate]="minDate"
                    [maxDate]="maxDate"
                >
                </p-calendar>
            </p-tabPanel>
            <p-tabPanel header="{{ 'SCHEDULE.DOWNLOAD-SCHEDULE-FOR-THE-CURRENT-MONTH' | translate }}">
                <p-calendar
                    [(ngModel)]="rangeDatesMonth"
                    selectionMode="range"
                    [readonlyInput]="true"
                    inputId="rangeMonth"
                    [disabled]="true"
                    [selectOtherMonths]="true"
                    [inline]="true"
                    [locale]="localizationService.calendarTranslate"
                    [minDate]="minDate"
                    [maxDate]="maxDate"
                >
                </p-calendar>
            </p-tabPanel>
            <p-tabPanel header="{{ 'SCHEDULE.DOWNLOAD-SCHEDULE-FOR-THE-PERIOD' | translate }}">
                <table class="two-calendars">
                    <tr>
                        <td>
                            <p-calendar
                                [(ngModel)]="dates.startDate"
                                [monthNavigator]="true"
                                [yearNavigator]="true"
                                [inline]="true"
                                yearRange="2000:2030"
                                inputId="navigatorsStartDate"
                                [locale]="localizationService.calendarTranslate"
                                [selectOtherMonths]="true"
                                [minDate]="minDate"
                                [maxDate]="maxDate"
                            >
                            </p-calendar>
                        </td>
                        <td>
                            <p-calendar
                                [(ngModel)]="dates.endDate"
                                [monthNavigator]="true"
                                [yearNavigator]="true"
                                [inline]="true"
                                yearRange="2000:2030"
                                inputId="navigatorsEndDate"
                                [locale]="localizationService.calendarTranslate"
                                [selectOtherMonths]="true"
                                [minDate]="minDate"
                                [maxDate]="maxDate"
                            >
                            </p-calendar>
                        </td>
                    </tr>
                </table>
            </p-tabPanel>
        </p-tabView>

        <div class="panel-bottom">
            <div class="description" *ngIf="isTranslationsLoaded">
                {{ datesToString }}
            </div>
            <button
                class="download-schedule-button color blue-light"
                pButton
                type="button"
                [disabled]="!validate() ? 'disabled' : null"
                label="{{ 'SCHEDULE.DOWNLOAD-SCHEDULE' | translate }}"
                (click)="onPressDownload()"
            ></button>
        </div>
    </ng-template>
</p-overlayPanel>
