<div class="container mt-3 my-5">
  <div>
    <span class="title">Lista de clientes</span>
  </div>

  <div class="mt-2 w-100" class="border-radius: 20px;">
    <form [formGroup]="searchForm">
      <kendo-textbox
        class="w-100 border"
        placeholder="Informe os dados para localizar os clientes"
        type="text"
        formControlName="textSearch"
        (keydown)="searchCustomer($event)"
      >
        <ng-template kendoTextBoxPrefixTemplate>
          <kendo-icon name="search"></kendo-icon>
        </ng-template>
        <ng-template kendoTextBoxSuffixTemplate>
          <div class="example-wrapper">
            <kendo-combobox
              [data]="listItems"
              style="width: 250px"
              formControlName="search"
            >
            </kendo-combobox>
          </div>
        </ng-template>
      </kendo-textbox>
    </form>
  </div>

  <div class="mt-2">
    <ng-container>
      <kendo-grid
        style="height: calc(100vh - 280px)"
        [data]="customer$ | async"
        [pageSize]="20"
        [pageable]="true"
        [sortable]="true"
        [reorderable]="true"
        [resizable]="true"
        [columnMenu]="{ filter: true }"
      >
        <kendo-grid-column field="customerId" title="Código" [width]="30">
          <ng-template kendoGridCellTemplate let-dataItem>
            <div>{{ dataItem.customerId }}</div>
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="name" title="Nome" [width]="150">
          <ng-template kendoGridCellTemplate let-dataItem>
            <div>{{ dataItem.name }}</div>
          </ng-template>
        </kendo-grid-column>

        <kendo-grid-column field="cpfcnpj" title="CPF / CNPJ" [width]="60">
          <ng-template kendoGridCellTemplate let-dataItem>
            <div>{{ dataItem.cpfCnpj }}</div>
          </ng-template>
        </kendo-grid-column>

        <kendo-grid-column field="phone" title="Telefone" [width]="60">
          <ng-template kendoGridCellTemplate let-dataItem>
            <div>{{ dataItem.phone }}</div>
          </ng-template>
        </kendo-grid-column>

        <kendo-grid-column field="cellPhone" title="Celular" [width]="60">
          <ng-template kendoGridCellTemplate let-dataItem>
            <div>{{ dataItem.cellPhone }}</div>
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="cellPhone" title="Ações" [width]="50">
          <ng-template kendoGridCellTemplate let-dataItem>
            <div>
              <a href="/crm/customer/edit">
                <kendo-avatar shape="circle" initials="">
                  <kendo-icon name="edit"></kendo-icon>
                </kendo-avatar>
              </a>
            </div>
          </ng-template>
        </kendo-grid-column>
      </kendo-grid>
    </ng-container>

    <kendo-floatingactionbutton
      icon="add"
      text="Novo cliente"
      [align]="{ horizontal: 'end', vertical: 'bottom' }"
      positionMode="absolute"
    >
    </kendo-floatingactionbutton>
  </div>
</div>
