<app-page-header title="Tags">
  <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">Colour</th>
        <th scope="col">Matching</th>
        <th scope="col">Document count</th>
        <th scope="col">Actions</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let tag of data">
          <td scope="row">{{ tag.name }}</td>
          <td scope="row"><span class="badge" [style.color]="getColor(tag.colour).textColor" [style.background-color]="getColor(tag.colour).value">{{ getColor(tag.colour).name }}</span></td>
          <td scope="row">{{ getMatching(tag) }}</td>
          <td scope="row">{{ tag.document_count }}</td>
          <td scope="row">
            <div class="btn-group">
            <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(tag)">Edit</button>
            <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(tag)">Delete</button>
          </div>
          </td>
      </tr>
      </tbody>
    </table>
  