Chocobozzz/PeerTube

<ng-template #modal>
  <div class="modal-header">
    <h4 class="modal-title">
      <ng-container i18n *ngIf="isAdminView">Messages with the reporter</ng-container>
      <ng-container i18n *ngIf="!isAdminView">Messages with the moderation team</ng-container>
    </h4>

    <button class="border-0 p-0" title="Close this modal" i18n-title (click)="hide()">
      <my-global-icon iconName="cross"></my-global-icon>
    </button>
  </div>

  <div class="modal-body">
    <div class="messages">
      <div
        *ngFor="let message of abuseMessages"
        class="message-block" [ngClass]="{ 'by-moderator': message.byModerator, 'by-me': isMessageByMe(message) }"
      >

        <div class="author">{{ message.account.name }}</div>

        <div class="bubble">
          <div class="content" [innerHTML]="message.messageHtml"></div>
          <div class="date">{{ message.createdAt | date }}</div>
        </div>
      </div>
    </div>

    <div class="no-messages" *ngIf="noResults" i18n>
      No messages for now.
    </div>

    <form novalidate [formGroup]="form" (ngSubmit)="addMessage()">
      <div class="form-group">
        <textarea
          formControlName="message" ngbAutofocus [placeholder]="getPlaceholderMessage()"
          [ngClass]="{ 'input-error': formErrors['message'] }" class="form-control"
        ></textarea>

        <div *ngIf="formErrors.message" class="form-error" role="alert">
          {{ formErrors.message }}
        </div>
      </div>

      <div class="form-group inputs">
        <input type="submit" i18n-value value="Add a message" class="peertube-button orange-button" [disabled]="!form.valid || sendingMessage">
      </div>
    </form>

  </div>

</ng-template>