<!-- @let endorsements = (endorsements$ | ngrxPush) || []; -->
@let vwr = viewer();
@let entity = assertion();
@if ((vwr | canPerformEndorsementActions) && (vwr | currentOrgCanEndorse)) {
  <nz-alert
    nzType="info"
    [nzMessage]="endorsementMessage"
    nzShowIcon
    style="margin-bottom: 12px"></nz-alert>
  <ng-template #endorsementMessage>
    Your endorsement actions will be executed under the authority granted to you
    by
    <strong>{{ vwr?.mostRecentOrg?.name }}.</strong>
  </ng-template>
}
@let listData = endorsements();
<nz-list
  [nzDataSource]="listData"
  [nzRenderItem]="endorsement"
  [nzNoResult]="noResult"
  nzSize="small"
  nzItemLayout="vertical">
  <ng-template #noResult>
    <nz-empty
      [nzNotFoundContent]="emptyContent"
      [nzNotFoundFooter]="emptyFooter">
    </nz-empty>
    <ng-template #emptyContent>
      <span
        nz-typography
        nzType="secondary">
        <strong>{{ assertion()?.name }}</strong> is unendorsed
      </span>
    </ng-template>
    <ng-template #emptyFooter>
      @if (vwr | canPerformEndorsementActions) {
        @let entity = assertion();
        @if (entity) {
          <cvc-endorse-assertion-button
            mode="endorse"
            [assertionId]="entity.id"
            [disabled]="!(vwr | canCreateEndorsement: entity)"
            [tooltipText]="vwr | endorsementActionTooltip: 'create' : entity">
          </cvc-endorse-assertion-button>
        }
      }
    </ng-template>
  </ng-template>
  <!-- ENDORSEMENT ITEM TEMPLATE -->
  <ng-template
    #endorsement
    let-endorsement
    let-index="index">
    @if (endorsement.status !== listData[index - 1]?.status) {
      @switch (endorsement.status) {
        @case ('ACTIVE') {
          <!-- no divider for active endorsements -->
          <!-- <nz-divider nzText="Active Endorsements" nzOrientation="left"></nz-divider>-->
        }
        @case ('REQUIRES_REVIEW') {
          <nz-divider
            nzText="Endorsements Under Review"
            nzOrientation="left"></nz-divider>
        }
        @case ('REVOKED') {
          <nz-divider
            nzText="Revoked Endorsements"
            nzOrientation="left"></nz-divider>
        }
      }
    }

    <cvc-endorsement-item
      [cvcEndorsement]="endorsement"
      [cvcAssertion]="entity!"></cvc-endorsement-item>
  </ng-template>
</nz-list>
