<mat-sidenav-container [autosize]="true" [hasBackdrop]="false">
  <mat-sidenav #panel mode="side" position="end" [fixedInViewport]="true">
    <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>
      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>