<app-page-header title="Document types">
  <button type="button" class="btn btn-sm btn-outline-secondary" (click)="openCreateDialog()">
    Create
  </button>
</app-page-header>

<ngb-pagination [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" (pageChange)="reloadData()"
  aria-label="Default pagination"></ngb-pagination>

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Matching</th>
      <th scope="col">Document count</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let document_type of data">
      <td scope="row">{{ document_type.name }}</td>
      <td scope="row">{{ getMatching(document_type) }}</td>
      <td scope="row">{{ document_type.document_count }}</td>
      <td scope="row">
        <div class="btn-group">
          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(document_type)">Edit</button>
          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(document_type)">Delete</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>