<app-header></app-header>
<div class="add-button">
  <p-button (click)="createAuthorDialogVisibility=true" icon="pi pi-plus" label="Ajouter un auteur"></p-button>
  <p-dialog header='Ajouter un auteur' [modal]="true" [(visible)]="createAuthorDialogVisibility">
    <app-register-form (createdAuthor)="closeCreateAuthorDialog($event)" [adminForm]="true">
    </app-register-form>
  </p-dialog>
</div>

<p-table showGridlines
         stripedRows
         [value]="authors">
  <ng-template pTemplate="header">
    <tr>
      <th>ID</th>
      <th>Nom</th>
      <th>Photo de profil</th>
      <th>Role</th>
      <th></th>
      <th></th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-author let-rowIndex="rowIndex">
    <tr>
      <td>{{ author.id }}</td>
      <td>{{ author.name }}</td>
      <td>
        @if (author.profilePicture) {
          <p-avatar image="data:image/jpeg;base64,{{ author.profilePicture }}" size="large" shape="circle"/>
        } @else {
          <p-avatar label="{{ author.name.charAt(0).toUpperCase() }}" size="large" shape="circle"/>
        }
      </td>
      <td>{{ author.role }}</td>
      <td>
        <p-button icon="pi pi-pencil" (click)="openDialog(updateDialogVisibility, rowIndex)" severity="warn"
                            label="Modifier"/>
        <p-dialog header='Modifier "{{ author.name }}"' [modal]="true" [(visible)]="updateDialogVisibility[rowIndex]">
          <app-register-form [adminForm]="true" [username]="author.name">
          </app-register-form>
        </p-dialog>
      </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 "{{ author.name }}"' [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)="deleteAuthor(author.id, rowIndex)"
                      label="Oui" icon="pi pi-trash"
                      severity="danger"/>
          </div>
        </p-dialog>
      </td>
    </tr>
  </ng-template>
</p-table>
