<my-table
  #table
  key="AbuseListTableComponent"
  [defaultColumns]="columns"
  i18n-paginatorText
  paginatorText="abuses per page"
  [dataLoader]="dataLoader"
  columnConfig="false"
>
  <ng-template #totalTitle let-totalRecords>
    <ng-container i18n>{ totalRecords, plural, =0 {No abuse} =1 {1 abuse} other {{{ totalRecords | myNumberFormatter }} abuses}}</ng-container>
  </ng-template>

  <ng-template #captionRight>
    <my-advanced-input-filter [filters]="inputFilters" (search)="table.onSearch($event)"></my-advanced-input-filter>
  </ng-template>

  <ng-template #tableCells let-abuse>
    <td *ngIf="isAdminView()">
      @if (abuse.reporterAccount) {
        <a [href]="abuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
          <div class="chip two-lines">
            <my-actor-avatar [actor]="abuse.reporterAccount" actorType="account" size="32"></my-actor-avatar>
            <div>
              {{ abuse.reporterAccount.displayName }}
              <span>{{ abuse.reporterAccount.nameWithHost }}</span>
            </div>
          </div>
        </a>
      } @else {
        <span i18n>Deleted account</span>
      }
    </td>

    @if (abuse.video) {
      @if (abuse.video.deleted) {
        <td>
          <div class="table-video" i18n-title title="Video was deleted">
            <div class="table-video-text">
              <div>
                {{ abuse.video.name }}

                <span i18n class="pt-badge badge-secondary ms-1">Deleted video</span>
              </div>

              <div class="video-owner" i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
            </div>
          </div>
        </td>
      } @else {
        <td>
          <my-video-cell [video]="abuse.video" size="small">
            <div>
              <span *ngIf="abuse.count > 1" class="pt-badge badge-secondary me-1" i18n-title title="This video has been reported multiple times" i18n>
                {abuse.count, plural, =1 {1 abuse} other {{{ abuse.count }} abuses}}
              </span>

              <span *ngIf="abuse.video.blacklisted" class="pt-badge badge-red" i18n-title title="The video is blocked" i18n>Blocked</span>
            </div>
          </my-video-cell>
        </td>
      }
    } @else if (abuse.comment) {
      <td>
        <a
          [href]="getCommentUrl(abuse)" [innerHTML]="abuse.commentHTML" class="table-comment-link ellipsis-multiline-1"
          [title]="abuse.comment.video.name" target="_blank" rel="noopener noreferrer"
        ></a>

        <div class="comment-flagged-account" *ngIf="abuse.flaggedAccount">by {{ abuse.flaggedAccount.displayName }}</div>
      </td>
    } @else if(abuse.flaggedAccount) {
      <td>
        <a [href]="getAccountUrl(abuse)"  class="table-account-link" target="_blank" rel="noopener noreferrer">
          <span>{{ abuse.flaggedAccount.displayName }}</span>

          <span class="account-flagged-handle">{{ abuse.flaggedAccount.nameWithHostForced }}</span>
        </a>
      </td>
    } @else {
      <td i18n>Account deleted</td>
    }

    <td>{{ abuse.createdAt | ptDate: 'short'  }}</td>

    <td class="abuse-states">
      <div *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="pt-badge badge-success">
        <my-global-icon iconName="tick"></my-global-icon>
      </div>

      <div *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="pt-badge badge-danger">
        <my-global-icon iconName="cross"></my-global-icon>
      </div>
    </td>

    <td class="abuse-messages">
      <button
        *ngIf="isLocalAbuse(abuse)" (click)="openAbuseMessagesModal(abuse)"
        class="peertube-button secondary-button icon-only"
        [ariaLabel]="getSendMessageButtonLabel(abuse)"
        [title]="getSendMessageButtonLabel(abuse)"
      >
        {{ abuse.countMessages }}

        <my-global-icon aria- iconName="message-circle"></my-global-icon>
      </button>
    </td>

    <td *ngIf="isAdminView()" class="internal-note max-width-300px ellipsis" container="body" placement="left auto" [ngbTooltip]="abuse.moderationComment">
      {{ abuse.moderationComment }}
    </td>
  </ng-template>

  <ng-template #actionCell let-abuse>
    <my-action-dropdown
      placement="bottom-right top-right left auto" container="body"
      [actions]="abuseActions" [entry]="abuse"
    ></my-action-dropdown>
  </ng-template>

  <ng-template #expandedRow let-abuse>
    <my-abuse-details [abuse]="abuse" [isAdminView]="isAdminView()"></my-abuse-details>
  </ng-template>

  <ng-template #noResults let-search>
    @if (search) {
      <ng-container i18n>No abuses found matching current filters.</ng-container>
    } @else {
      <ng-container i18n>No abuses found.</ng-container>
    }
  </ng-template>
</my-table>

<my-moderation-comment-modal #moderationCommentModal (commentUpdated)="onModerationCommentUpdated()"></my-moderation-comment-modal>
<my-abuse-message-modal #abuseMessagesModal [isAdminView]="isAdminView()" (countMessagesUpdated)="onCountMessagesUpdated($event)"></my-abuse-message-modal>
