<mat-sidenav-container [autosize]="true" [hasBackdrop]="false">
  <mat-sidenav #panel mode="side" position="end">
    <app-customer-preview *ngIf="previewType === 'CUSTOMER'" (previewClose)="closePanel()" [customer]="openedItem"></app-customer-preview>
    <app-owner-preview *ngIf="previewType === 'OWNER'" (previewClose)="closePanel()" [owner]="openedItem"></app-owner-preview>
    <app-owner-preview *ngIf="previewType === 'TENANT'" (previewClose)="closePanel()" [owner]="owner" [tenant]="openedItem"></app-owner-preview>
  </mat-sidenav>

  <mat-sidenav-content class="vitamui-body">
    <vitamui-common-title-breadcrumb [data]="breadCrumbData">
      Paramétrer les organisations
    </vitamui-common-title-breadcrumb>

    <vitamui-common-banner [searchbarPlaceholder]="'Nom, raison sociale, code client, adresse...'" [disableSearchBar]="true">
      <button class="btn primary ml-5" (click)="openCreateCustomerDialog()">
        <span>Créer un Client</span>
      </button>
    </vitamui-common-banner>

    <app-customer-list
      (customerClick)="openCustomerPanel($event)"
      (ownerClick)="openOwnerPanel($event)"
      (tenantClick)="openTenantPanel($event)">
    </app-customer-list>
  </mat-sidenav-content>
</mat-sidenav-container>