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

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

  <ng-template #tableCells let-registration>
    @if (table.isColumnDisplayed('account')) {
      <td>
        <div class="chip two-lines">
          <div>
            <span>{{ registration.username }}</span>
            <span class="muted">{{ registration.accountDisplayName }}</span>
          </div>
        </div>
      </td>
    }

    @if (table.isColumnDisplayed('email')) {
      <td>
        <my-user-email-info [entry]="registration" [showEmailVerifyInformation]="requiresEmailVerification"></my-user-email-info>
      </td>
    }

    @if (table.isColumnDisplayed('channel')) {
      <td>
        <div class="chip two-lines">
          <div>
            <span>{{ registration.channelHandle }}</span>
            <span class="muted">{{ registration.channelDisplayName }}</span>
          </div>
        </div>
      </td>
    }

    @if (table.isColumnDisplayed('registrationReason')) {
      <td class="max-width-300px ellipsis" container="body" placement="left auto" [ngbTooltip]="registration.registrationReason">
        {{ registration.registrationReason }}
      </td>
    }

    @if (table.isColumnDisplayed('state')) {
      <td class="abuse-states">
        @if (isRegistrationAccepted(registration)) {
          <div [title]="registration.state.label" class="pt-badge badge-success">
            <my-global-icon iconName="tick"></my-global-icon>
          </div>
        } @else if (isRegistrationRejected(registration)) {
          <div [title]="registration.state.label" class="pt-badge badge-danger">
            <my-global-icon iconName="cross"></my-global-icon>
          </div>
        }
      </td>
    }

    @if (table.isColumnDisplayed('moderationResponse')) {
      <td class="max-width-300px ellipsis" container="body" placement="left auto" [ngbTooltip]="registration.moderationResponse">
        {{ registration.moderationResponse }}
      </td>
    }

    @if (table.isColumnDisplayed('createdAt')) {
      <td>{{ registration.createdAt | ptDate: 'short'  }}</td>
    }
  </ng-template>

  <ng-template #actionCell let-registration>
    <my-action-dropdown
      placement="bottom-right top-right left auto" container="body"
      i18n-label label="Actions" [actions]="registrationActions" [entry]="registration"
    ></my-action-dropdown>
  </ng-template>

  <ng-template #expandedRow let-registration>
    <div class="moderation-expanded">
      <div class="left">
        <div class="d-flex">
          <span class="moderation-expanded-label" i18n>Registration reason:</span>
          <span class="moderation-expanded-text" [innerHTML]="registration.registrationReasonHTML"></span>
        </div>

        @if (registration.moderationResponse) {
          <div>
            <span class="moderation-expanded-label" i18n>Moderation response:</span>
            <span class="moderation-expanded-text" [innerHTML]="registration.moderationResponseHTML"></span>
          </div>
        }
      </div>
    </div>
  </ng-template>

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

<my-process-registration-modal #processRegistrationModal (registrationProcessed)="onRegistrationProcessed()"></my-process-registration-modal>
