@let endorsement = cvcEndorsement();
@let entity = cvcAssertion();
@let vwr = viewer();
<nz-list-item [nzExtra]="itemExtra">
  <nz-list-item-meta
    [nzAvatar]="itemAvatar"
    [nzTitle]="itemTitle"
    [nzDescription]="itemDescription">
  </nz-list-item-meta>
</nz-list-item>

<!-- item avatar template -->
<ng-template #itemAvatar>
  <div class="organization-image-container">
    <img
      alt="{{ endorsement.organization.name }}"
      class="organization-image"
      src="{{ endorsement.organization.profileImagePath }}" />
  </div>
</ng-template>

<!-- item title template -->
<ng-template #itemTitle>
  <span class="endorsement-title">
    @switch (endorsement.status) {
      @case ('REVOKED') {
        Previously endorsed by
      }
      @case ('ACTIVE') {
        Endorsed by
      }
      @case ('REQUIRES_REVIEW') {
        Endorsement under review by
      }
    }
    {{ endorsement.organization.name }}
  </span>
</ng-template>

<!-- endorsement summary -->
<ng-template #itemDescription>
  <span
    nz-typography
    nzType="secondary"
    class="endorsement-summary">
    @let assertionName = endorsement.assertion.name;
    @let organizationName = endorsement.organization.name;
    @let editorName = endorsement.user.displayName;
    @switch (endorsement.status) {
      @case ('ACTIVE') {
        <strong>{{ assertionName }}</strong> has been endorsed by
        <strong>{{ organizationName }}</strong> under the authority of editor
        <strong> {{ editorName }}.</strong>
      }
      @case ('REVOKED') {
        <strong>{{ assertionName }}</strong> endorsement has been revoked by
        <strong>{{ organizationName }}</strong> under the authority of editor
        <strong> {{ editorName }}.</strong>
      }
      @case ('REQUIRES_REVIEW') {
        Post-endorsement changes to
        <strong>{{ assertionName }}</strong> require review by a
        <strong>{{ organizationName }}</strong> editor with endorsing
        privileges.
      }
    }
  </span>

  <!-- endorsement details collapsible panels -->
  @switch (endorsement.status) {
    @case ('ACTIVE') {
      <nz-collapse [nzBordered]="false">
        <nz-collapse-panel
          nzHeader="Show Endorsement Details"
          [nzExtra]="endorsementStatus">
          <div
            nz-flex
            nzVertical
            [nzGap]="8">
            <ng-container *ngTemplateOutlet="endorsementDetails"></ng-container>
          </div>
        </nz-collapse-panel>
      </nz-collapse>
    }
    @case ('REVOKED') {
      <nz-collapse [nzBordered]="false">
        <nz-collapse-panel
          nzHeader="Show Revocation Details"
          [nzExtra]="endorsementStatus">
          <div
            nz-flex
            nzVertical
            [nzGap]="8">
            <ng-container *ngTemplateOutlet="endorsementDetails"></ng-container>
          </div>
        </nz-collapse-panel>
      </nz-collapse>
    }
    @case ('REQUIRES_REVIEW') {
      <nz-collapse [nzBordered]="false">
        <nz-collapse-panel
          nzHeader="Show Unendorsed Changes"
          [nzActive]="true"
          [nzExtra]="endorsementStatus">
          <div
            nz-flex
            nzVertical
            [nzGap]="8">
            <ng-container *ngTemplateOutlet="endorsementDetails"></ng-container>
            <div
              class="revisions-container"
              #revisionsContainer>
              <cvc-activity-feed
                [cvcFilters]="feedFilters(endorsement)"
                [cvcSettings]="feedSettings()"
                [cvcShowFilters]="false"
                [cvcAutoHeightTarget]="revisionsContainer"
                [cvcAutoHeightOffset]="-40"
                cvcTitle="Unendorsed Changes"></cvc-activity-feed>
            </div>
          </div>
        </nz-collapse-panel>
      </nz-collapse>
    }
  }
  <!-- endorsement status template -->
  <ng-template #endorsementStatus>
    <span>Status: </span>
    @switch (endorsement.status) {
      @case ('ACTIVE') {
        <nz-tag nzColor="success"> Active</nz-tag>
      }
      @case ('REQUIRES_REVIEW') {
        <nz-tag nzColor="processing"> Requires Review</nz-tag>
      }
      @case ('REVOKED') {
        <nz-tag nzColor="error"> Revoked</nz-tag>
      }
    }
  </ng-template>
  <!-- details template-->
  <ng-template #endorsementDetails>
    <nz-descriptions
      nzBordered
      nzLayout="vertical"
      nzSize="small"
      [nzColumn]="2">
      <nz-descriptions-item nzTitle="Endorsing Organization">
        <cvc-organization-tag
          [org]="endorsement.organization"
          [enablePopover]="false"></cvc-organization-tag>
      </nz-descriptions-item>
      <nz-descriptions-item nzTitle="Endorsed by">
        <cvc-user-tag
          [user]="endorsement.user"
          [enablePopover]="false"></cvc-user-tag>
        <span
          nz-typography
          nzType="secondary">
          {{ endorsement.lastReviewed | timeAgo }}
        </span>
      </nz-descriptions-item>
      @if (endorsement.status === 'REVOKED' && endorsement.revocationActivity) {
        <nz-descriptions-item
          nzTitle="Reason for Revocation"
          nzSpan="2">
          @if (endorsement.revocationActivity.note) {
            <p nz-typography>
              {{ endorsement.revocationActivity.note }}
            </p>
          } @else {
            <p
              nz-typography
              nzType="secondary">
              No note provided
            </p>
          }
        </nz-descriptions-item>
      }
    </nz-descriptions>
  </ng-template>
</ng-template>

<!-- endorsement action buttons -->
<ng-template #itemExtra>
  @if (endorsement.status !== 'REVOKED') {
    <div
      nz-flex
      nzVertical
      [nzGap]="8">
      @if (endorsement.status === 'REQUIRES_REVIEW') {
        <cvc-endorse-assertion-button
          [assertionId]="entity.id"
          mode="approveChanges"
          [disabled]="!(vwr | canApproveEndorsement: endorsement)"
          display="block"
          [tooltipText]="
            vwr
              | endorsementActionTooltip
                : 'approveChanges'
                : entity
                : endorsement.id
          ">
        </cvc-endorse-assertion-button>
      }
      <cvc-endorse-assertion-button
        [assertionId]="entity.id"
        mode="revoke"
        [disabled]="!(vwr | canRevokeEndorsement: endorsement)"
        display="block"
        [tooltipText]="
          vwr | endorsementActionTooltip: 'revoke' : entity : endorsement.id
        ">
      </cvc-endorse-assertion-button>
    </div>
  }
</ng-template>
