<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<nz-spin [nzSpinning]="loading" style="height: 100%">
  <div class="search-container">
    <app-multi-func-input
      type="search"
      [placeholder]="searchPlaceholder || ('common.search' | i18n)"
      [(value)]="search"
      (valueChange)="filter($event)"
    />
  </div>
  <div class="category-container" [style]="listStyle">
    <div class="category-section" *ngFor="let menuItem of !!search ? dataByFilter : data">
      <div class="category-header">
        <span>
          <i nz-icon [nzType]="getCategoryIcon(menuItem[0])" nzTheme="outline"></i>
        </span>
        <span class="category-title">{{ menuItem[1].label }}</span>
        <span class="category-count">{{ menuItem[1].child.length }}</span>
      </div>
      <div class="category-items">
        <div
          class="monitor-type-card"
          *ngFor="let app of menuItem[1].child"
          [class.selected]="app.value === selected"
          (click)="onSelectedChanged(app.value)"
        >
          <span class="card-label">{{ app.label }}</span>
        </div>
      </div>
    </div>
    <div class="empty-state" *ngIf="(!!search ? dataByFilter : data)?.length === 0">
      <i nz-icon nzType="inbox" nzTheme="outline"></i>
      <span>{{ 'common.no-data' | i18n }}</span>
    </div>
  </div>
</nz-spin>
