<main
    class="k-px-2 k-px-sm-4.5 k-px-md-6 k-px-lg-4 k-px-xl-7.5 k-py-2 k-py-sm-4.5 k-py-md-6 k-py-lg-4 k-py-xl-7.5 k-pt-8 k-bg-light">
    <h1 class="k-h1 k-color-primary-emphasis k-overflow-hidden k-text-ellipsis">Dashboard</h1>
    <div class="k-d-grid k-grid-cols-12 k-gap-4 k-py-4">

        <!-- Start of CMPCTCARD-1 -->
        <div *ngFor="let card of compactCards; let i = index;"
            class="{{cardClasses}} k-col-span-12 k-col-span-md-6 k-col-span-lg-3">
            <kendo-svgicon [icon]="card.svgIcon" themeColor="primary" size="xxlarge"></kendo-svgicon>
            <div class="k-d-flex k-flex-col">
                <span
                    class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">{{card.title}}</span>
                <span class="k-font-size-sm k-line-height-lg k-color-subtle">{{card.info}}</span>
            </div>
        </div>
        <!-- End of CMPCTCARD-1 -->

        <!-- Start of DASHBRDCARD-10 -->
        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-md-6 k-col-span-lg-3">
            <div class="k-d-flex k-align-items-center k-p-3">
                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Calendar</span>
            </div>
            <div class="k-flex-1 k-px-3 k-pb-3 k-d-flex k-justify-content-center">
                <kendo-calendar [showOtherMonthDays]="false" type="classic" [(ngModel)]="date2">
                </kendo-calendar>
            </div>
        </div>
        <!-- End of DASHBRDCARD-10 -->

        <!-- Start of DASHBRDCARD-11 -->
        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-md-6">
            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Bed
                    Occupancy</span>
                <kendo-datepicker format="yyyy" [(ngModel)]="date" [fillMode]="'flat'" [style.width.px]="164"
                    [clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
            </div>
            <div class="k-flex-1 k-px-3 k-pb-3">
                <kendo-chart style="height: 257px;">
                    <kendo-chart-category-axis>
                        <kendo-chart-category-axis-item
                            [categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']">
                        </kendo-chart-category-axis-item>
                    </kendo-chart-category-axis>
                    <kendo-chart-value-axis>
                        <kendo-chart-value-axis-item [max]="100" [min]="0" [majorTicks]="{step: 10}">
                        </kendo-chart-value-axis-item>
                    </kendo-chart-value-axis>
                    <kendo-chart-series>
                        <kendo-chart-series-item type="column" name="Occupied" [spacing]="0"
                            [legendItem]="{type: 'line' }" [data]="[67, 78, 47, 41, 38, 33]">
                        </kendo-chart-series-item>
                        <kendo-chart-series-item type="column" name="Free" [legendItem]="{type: 'line' }"
                            [data]="[21, 10, 44, 40, 48, 60]">
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                    <kendo-chart-legend position="bottom" orientation="horizontal" align="start"></kendo-chart-legend>
                </kendo-chart>
            </div>
        </div>
        <!-- End of DASHBRDCARD-11 -->

        <!-- Start of DASHBRDCARD-1 -->
        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-md-6 k-col-span-lg-3">
            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Staff</span>
                <kendo-dropdownlist [data]="ddlData" [value]="ddlValue" fillMode="flat" [style.width.px]="164"
                    [attr.aria-label]="'Select'"></kendo-dropdownlist>
            </div>
            <div class="k-flex-1 k-px-3">
                <kendo-listview [data]="listItems" layout="flex" flexDirection="col" [bordered]="false">
                    <ng-template kendoListViewItemTemplate let-dataItem>
                        <div
                            class="k-d-flex k-border-b k-border-b-solid k-border-border k-gap-3 k-p-2 k-align-items-center">
                            <kendo-badge-container>
                                <kendo-avatar [imageSrc]="dataItem.imageSrc"></kendo-avatar>
                                <kendo-badge rounded="medium" position="inside" [align]="badgeAlignBottomEnd"
                                    themeColor="success"></kendo-badge>
                            </kendo-badge-container>
                            <div class="k-d-flex k-flex-col">
                                <div class="k-font-size-lg">{{dataItem.name}}</div>
                                <div class="k-font-size-sm k-color-subtle">{{dataItem.specialty}}</div>
                            </div>
                        </div>
                    </ng-template>
                </kendo-listview>
            </div>
            <div class="k-p-3">
                <button kendoButton fillMode="flat" themeColor="primary">View all</button>
            </div>
        </div>
        <!-- End of DASHBRDCARD-1 -->

        <!-- Start of DASHBRDCARD-4 -->
        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-md-6 k-col-span-lg-7">
            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
                <span
                    class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Appointments</span>
                <kendo-datepicker [(ngModel)]="date" [fillMode]="'flat'" [style.width.px]="164" [clearButton]="true"
                    [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
            </div>
            <div class="k-d-grid k-grid-cols-12 k-p-4 k-gap-2">
                <div *ngFor="let appointment of appointments; let last = last"
                    [ngClass]="{ 'k-d-none k-d-lg-block' : last }"
                    class=" k-col-span-12 k-col-span-lg-4 k-bg-light k-border k-border-solid k-border-border k-rounded-sm k-d-flex k-flex-col k-flex-1">
                    <div class="k-d-flex k-justify-content-between k-p-1.5 k-h-12">
                        <span class="k-font-medium">{{appointment.doctor}}</span>
                        <div class="k-flex-shrink-0">
                            <span class="k-badge k-badge-md k-badge-solid k-badge-solid-primary k-rounded-full">
                                {{appointment.start}}
                            </span>
                        </div>
                    </div>
                    <div class="k-d-flex k-flex-col k-flex-1 k-gap-1.5 k-px-1.5">
                        <div>Appointment with {{appointment.patient.name}}.</div>
                        <div class="k-font-size-sm">
                            <div class="k-color-subtle k-d-flex k-gap-1 k-align-items-center k-line-height-lg">
                                <kendo-svgicon [icon]="envelopeIcon"></kendo-svgicon>
                                <a class="k-color-inherit" href="#">{{appointment.patient.phone}}</a>
                            </div>
                            <div class="k-color-subtle k-d-flex k-gap-1 k-align-items-center k-line-height-lg">
                                <kendo-svgicon [icon]="envelopeIcon"></kendo-svgicon>
                                <a class="k-color-inherit" href="#">{{appointment.patient.email}}</a>
                            </div>
                        </div>
                    </div>
                    <div class="k-d-flex k-flex-shrink-0 k-p-1.5">
                        <button kendoButton fillMode="clear" themeColor="primary">Edit</button>
                        <button kendoButton fillMode="clear">Cancel</button>
                    </div>
                </div>
            </div>
            <div class="k-p-3">
                <button kendoButton fillMode="clear" themeColor="primary">View all appointments</button>
            </div>
        </div>
        <!-- End of DASHBRDCARD-4 -->

        <!-- Start of DASHBRDCARD-11 -->
        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-5">
            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Infection
                    Rate</span>
            </div>
            <div class="k-flex-1 k-px-3 k-pb-3">
                <kendo-chart [style.height.px]="240">
                    <kendo-chart-x-axis>
                        <kendo-chart-x-axis-item [labels]="{rotation: -45}"></kendo-chart-x-axis-item>
                    </kendo-chart-x-axis>
                    <kendo-chart-series>
                        <kendo-chart-series-item
                            *ngFor="let dataSet of ['RSV', 'CDC', 'Measles', 'Influenza', 'Campylobacteriosis', 'Hepatitis']"
                            type="heatmap" [data]="heatmapData(dataSet)" xField="a" yField="b"
                            valueField="value"></kendo-chart-series-item>
                    </kendo-chart-series>
                </kendo-chart>
            </div>
        </div>
        <!-- End of DASHBRDCARD-11 -->

        <!-- Start of DASHBRDCARD-11 -->
        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-5">
            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Equipment
                    Availability</span>
                <kendo-datepicker [(ngModel)]="date" format="yyyy" [fillMode]="'flat'" [style.width.px]="164"
                    [clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
            </div>
            <div class="k-flex-1 k-px-3 k-pb-3">
                <kendo-chart [style.height.px]="240">
                    <kendo-chart-series>
                        <kendo-chart-series-item [autoFit]="true" type="donut" [holeSize]="50" [data]="donutData"
                            categoryField="kind" field="share">
                            <kendo-chart-series-item-labels position="outsideEnd" color="#000"
                                [content]="chartLabelContent"></kendo-chart-series-item-labels>
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                    <kendo-chart-legend [visible]="false"></kendo-chart-legend>
                </kendo-chart>
            </div>
        </div>
        <!-- End of DASHBRDCARD-11 -->

        <!-- Start of DASHBRDCARD-11 -->
        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-7">
            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Average Length of
                    Stay</span>
                <kendo-datepicker [(ngModel)]="date" format="yyyy" [fillMode]="'flat'" [style.width.px]="164"
                    [clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
            </div>
            <div class="k-flex-1 k-px-3 k-pb-3">
                <kendo-chart [style.height.px]="240">
                    <kendo-chart-category-axis>
                        <kendo-chart-category-axis-item [categories]="departments">
                        </kendo-chart-category-axis-item>
                    </kendo-chart-category-axis>
                    <kendo-chart-value-axis>
                        <kendo-chart-value-axis-item [max]="14" [majorUnit]="1">
                        </kendo-chart-value-axis-item>
                    </kendo-chart-value-axis>
                    <kendo-chart-series>
                        <kendo-chart-series-item type="bar" [data]="averageStay">
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                </kendo-chart>
            </div>
        </div>
        <!-- End of DASHBRDCARD-11 -->

        <!-- Start of DASHBRDCARD-11 -->
        <div class="{{dashboardClasses}} k-col-span-12">
            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Hospital
                    Visits</span>
                <kendo-datepicker [(ngModel)]="date" format="yyyy" [fillMode]="'flat'" [style.width.px]="164"
                    [clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
            </div>
            <div class="k-flex-1 k-px-3 k-pb-3">
                <kendo-chart [style.height.px]="330">
                    <kendo-chart-category-axis>
                        <kendo-chart-category-axis-item [categories]="hours" baseUnit="hours"
                            [labels]="{rotation: 270, position: 'start', format: 'h:mm'}">
                        </kendo-chart-category-axis-item>
                    </kendo-chart-category-axis>
                    <kendo-chart-value-axis>
                        <kendo-chart-value-axis-item [max]="100">
                        </kendo-chart-value-axis-item>
                    </kendo-chart-value-axis>
                    <kendo-chart-series>
                        <kendo-chart-series-item type="line" [data]="hospitalVisits">
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                </kendo-chart>
            </div>
        </div>
        <!-- End of DASHBRDCARD-11 -->

        <!-- Start of DASHBRDCARD-11 -->
        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-5">
            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Satisfaction
                    Score</span>
                <kendo-dropdownlist [value]="'2023'" [fillMode]="'flat'" [style.width.px]="164"
                    [attr.aria-label]="'Select'"></kendo-dropdownlist>
            </div>
            <div class="k-flex-1 k-px-3 k-pb-3">
                <kendo-chart [style.height.px]="288">
                    <kendo-chart-series>
                        <kendo-chart-series-item type="pie" [legendItem]="{type: 'line' }" [data]="satisfaction"
                            categoryField="kind" field="share" [padding]="10" [border]="{width: 3, color: '#fff'}">
                            <kendo-chart-series-item-labels position="center">
                            </kendo-chart-series-item-labels>
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                    <kendo-chart-legend position="bottom"></kendo-chart-legend>
                </kendo-chart>
            </div>
        </div>
        <!-- End of DASHBRDCARD-11 -->

        <!-- Start of DASHBRDCARD-11 -->
        <div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-7">
            <div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
                <span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Mortality
                    Rate</span>
                <kendo-datepicker format="yyyy" [(ngModel)]="date" [fillMode]="'flat'" [style.width.px]="164"
                    [clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
            </div>
            <div class="k-flex-1 k-px-3 k-pb-3">
                <kendo-chart [style.height.px]="288">
                    <kendo-chart-category-axis>
                        <kendo-chart-category-axis-item [categories]="mortalityCauses">
                        </kendo-chart-category-axis-item>
                    </kendo-chart-category-axis>
                    <kendo-chart-value-axis>
                        <kendo-chart-value-axis-item [max]="100" [min]="0"
                            [majorTicks]="{step: 10}"></kendo-chart-value-axis-item>
                    </kendo-chart-value-axis>
                    <kendo-chart-series>
                        <kendo-chart-series-item type="bar" [legendItem]="{type: 'line' }" name="Male"
                            [data]="[25, 35, 36, 42, 85, 12, 4, 17, 19, 49, 28]">
                        </kendo-chart-series-item>
                        <kendo-chart-series-item type="bar" [legendItem]="{type: 'line' }" name="Female"
                            [data]="[23, 40, 38, 30, 81, 18, 3, 21, 22, 45, 24]">
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                    <kendo-chart-legend position="bottom" orientation="horizontal" align="start"></kendo-chart-legend>
                </kendo-chart>
            </div>
        </div>
        <!-- End of DASHBRDCARD-11 -->
    </div>
</main>