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

  <ng-template #tableCells let-entry>
    <td>
      <a [href]="entry.initiatorAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
        <div class="chip two-lines">
          <my-actor-avatar [actor]="entry.initiatorAccount" actorType="account" size="32"></my-actor-avatar>
          <div>
            {{ entry.initiatorAccount.displayName }}
            <span class="muted">{{ entry.initiatorAccount.nameWithHost }}</span>
          </div>
        </div>
      </a>
    </td>

    <td>
      <my-video-cell [video]="entry.video" size="small"></my-video-cell>
    </td>

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

    <td>
      <span class="pt-badge" [ngClass]="getStatusClass(entry.status)">{{ entry.status }}</span>
    </td>
  </ng-template>

  <ng-template #actionCell let-entry>
    @if (entry.status === 'WAITING') {
      <my-button i18n-title title="Accept" icon="tick" (click)="openAcceptModal(entry)"></my-button>
      <my-button i18n-title title="Refuse" icon="cross" (click)="refuse(entry)"></my-button>
    }
  </ng-template>

  <ng-template #noResults>
    <ng-container i18n>No ownership change request found.</ng-container>
  </ng-template>
</my-table>

<my-accept-ownership #myAcceptOwnershipComponent (accepted)="accepted()"></my-accept-ownership>
