<app-card-layout>
  <div header>
    <span>{{ 'PersonTypes.Title' | translate }}</span>
    <div class="pull-right">
      <button class="btn btn-primary new-button" (click)="sandbox.setDisplayForm()">
         Neu
      </button>
    </div>
  </div>
  <div class="person-types-grid-wrapper" body>
    <ag-grid-angular
      autoresizecolumns
      class="ag-theme-balham ag-grid-height"
      [gridOptions]="gridOptions"
      [columnDefs]="columnDefinition"
      [rowSelection]="'single'"
      [frameworkComponents]="frameworkComponents"
      [rowData]="sandbox.personTypes$ | async"
    >
    </ag-grid-angular>
    <div *ngIf="sandbox.displayForm" class="person-types-details">
      <app-person-types-details></app-person-types-details>
    </div>
  </div>

</app-card-layout>