<app-header></app-header>

<p-table showGridlines
         stripedRows
         [value]="posts">
  <ng-template pTemplate="header">
    <tr>
      <th>ID</th>
      <th>Titre</th>
      <th>Catégorie</th>
      <th>Date de publication</th>
      <th>Description</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-post let-rowIndex="rowIndex">
    <tr>
      <td>{{ post.id }}</td>
      <td>{{ post.title }}</td>
      <td>{{ post.category }}</td>
      <td>{{ post.publicationDate | date: "dd/MM/yyyy à HH:mm" }}</td>
      <td>{{ post.description }}</td>
      <td>
        <p-button icon="pi pi-eye" (click)="openDialogPreview(post)" severity="info" label="Prévisualiser"/>
      </td>
      <td>
        <p-button icon="pi pi-pencil" (click)="openDialogUpdate(post)" severity="warn" label="Modifier"/>
      </td>
      <td>
        <p-button icon="pi pi-trash" (click)="openDialog(deleteDialogVisibility, rowIndex)" severity="danger"
                  label="Supprimer"/>
        <p-dialog header='Êtes-vous sur de bien vouloir supprimer "{{ post.title }}"' [modal]="true"
                  [(visible)]="deleteDialogVisibility[rowIndex]">
          <div class="delete-dialog">
            <p-button label="Annuler"
                      icon="pi pi-times"
                      severity="info"
                      (click)="closeDialog(deleteDialogVisibility, rowIndex)"/>
            <p-button (click)="deletePost(post.id, rowIndex)"
                      label="Oui" icon="pi pi-trash"
                      severity="danger"/>
          </div>
        </p-dialog>
      </td>
    </tr>
  </ng-template>
</p-table>
