<kt-portlet>
	<kt-portlet-header [title]="titulo" [class]="'kt-portlet__head--lg'">
		<div ktPortletTools>
			<button class="btn btn-primary kt-margin-r-10" mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate" (click)="btnChangeDate()" [disabled]="isLoading">
				<i class="la la-angle-left"></i>
				<span class="kt-hidden-mobile ml-2">Anterior</span>
			</button>
			<button class="btn btn-primary kt-margin-r-10" mwlCalendarToday [(viewDate)]="viewDate" (click)="btnChangeDate()" [disabled]="isLoading">
				<i class="la la-minus"></i>
				<span class="kt-hidden-mobile ml-2">Hoy</span>
			</button>
			<button class="btn btn-primary kt-margin-r-10" mwlCalendarNextView [view]="view" [(viewDate)]="viewDate" (click)="btnChangeDate()" [disabled]="isLoading">
				<span class="kt-hidden-mobile mr-2">Siguiente</span>
				<i class="la la-angle-right"></i>
			</button>
		</div>
	</kt-portlet-header>

	<kt-portlet-body>

		<div class="div-info-date mb-3">
			<div class="div-info-span">
				<span>{{ (viewDate | calendarDate:(view + 'ViewTitle'):'es-MX') | uppercase }}</span>
			</div>

			<div class="div-info-buttons">
				<button class="btn btn-warning kt-margin-r-10" (click)="setView(CalendarView.Week)" [class.active]="view === CalendarView.Week" [disabled]="isLoading">
					<span>Semana</span>
				</button>
				<button class="btn btn-warning kt-margin-r-10" (click)="setView(CalendarView.Day)" [class.active]="view === CalendarView.Day" [disabled]="isLoading">
					<span>Día</span>
				</button>
			</div>
		</div>

		<div [ngSwitch]="view"
			 style="text-transform:uppercase; color: black; padding: 5px; width: 100%;" class="pl-4 pr-4">
			<mwl-calendar-week-view
				*ngSwitchCase="CalendarView.Week"
				[viewDate]="viewDate"
				[events]="events"
				[refresh]="refresh"
				(beforeViewRender)="beforeViewRender($event)"
				[hourSegments]="4">
			</mwl-calendar-week-view>

			<mwl-calendar-day-view
				*ngSwitchCase="CalendarView.Day"
				[viewDate]="viewDate"
				[events]="events"
				[refresh]="refresh"
				(beforeViewRender)="beforeViewRender($event)"
				[hourSegments]="4">
			</mwl-calendar-day-view>
		</div>
	</kt-portlet-body>
</kt-portlet>
