<app-header></app-header>
@if (concernedPost) {
  <div class="title-div">
    <h1>{{ concernedPost.title }}</h1>
    <em>Publié le {{ concernedPost.publicationDate | date: "dd/MM/yyyy à HH:mm" }}</em>
  </div>
  <div [innerHTML]="concernedPost.body | safeHtml" class="body-content"></div>
  <div class="commentaires">
    <h1>Commentaires</h1>
    @if (actualAuthor) {
      <app-comment-form [postId]="concernedPost.id" (commentToEmit)="addNewCommentToList($event)"></app-comment-form>
    }
    @for (comment of comments; track comment.id) {
      @if (comment.profilePicture) {
        <div class="comment-div">
          <p-avatar image="data:image/jpeg;base64,{{ comment.profilePicture }}" shape="circle" styleClass="mr-2"
                    size="large"></p-avatar>
          <em>{{ comment.authorName }}</em>
          <p class="{{ comment.authorRole }}">- {{ comment.authorRole }}</p>
          @if (comment.isUpdated) {
            <p> Modifié le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}</p>
          } @else {
            <p> Envoyé le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}</p>
          }
          @if (actualAuthor) {
            @if (comment.authorId === actualAuthor.id || actualAuthor.role === Role.ADMIN) {
              <p-button severity="danger" icon="pi pi-trash" (onClick)="setCommentDialogVisible(comment.id)"></p-button>
              <p-dialog [closable]="false" [modal]="true" header='Supprimer le commentaire ?' [visible]="commentDeleteDialogMap.get(comment.id) ?? false">
                <div class="delete-dialog">
                  <p-button label="Annuler"
                            icon="pi pi-times"
                            severity="info"
                            (click)="setCommentDialogHidden(comment.id)"/>
                  <p-button label="Oui" icon="pi pi-trash"
                            (click)="deleteComment(comment)"
                            severity="danger"/>
                </div>
              </p-dialog>
            }
          }
        </div>
      } @else {
        <div class="comment-div">
          <p-avatar label="{{ comment.authorName.charAt(0).toUpperCase() }}" styleClass="mr-2" size="large"></p-avatar>
          <em>{{ comment.authorName }}</em>
          <p class="{{ comment.authorRole }}">- {{ comment.authorRole }}</p>
          @if (comment.isUpdated) {
            <p> Modifié le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}</p>
          } @else {
            <p> Envoyé le {{ comment.commentDate | date: "dd/MM/yyyy à HH:mm" }}</p>
          }
          @if (actualAuthor) {
            @if (comment.authorId === actualAuthor.id || actualAuthor.role === Role.ADMIN) {
              <p-button severity="danger" icon="pi pi-trash" (onClick)="setCommentDialogVisible(comment.id)"></p-button>
              <p-dialog [closable]="false" [modal]="true" header='Supprimer le commentaire ?' [visible]="commentDeleteDialogMap.get(comment.id) ?? false">
                <div class="delete-dialog">
                  <p-button label="Annuler"
                            icon="pi pi-times"
                            severity="info"
                            (click)="setCommentDialogHidden(comment.id)"/>
                  <p-button label="Oui" icon="pi pi-trash"
                            (click)="deleteComment(comment)"
                            severity="danger"/>
                </div>
              </p-dialog>
            }
          }
        </div>
      }
      <p>{{ comment.content }}</p>
    }
  </div>
} @else {
  <h1>Loading...</h1>
}
