<ng-container *ngIf="source$ | ngrxPush as source">
  <nz-row
    [nzGutter]="[8, 16]"
    cvcAutoHeightDiv>
    <nz-col [nzSpan]="24">
      <nz-descriptions
        nzBordered
        nzSize="small"
        nzLayout="vertical"
        [nzColumn]="1">
        <nz-descriptions-item nzTitle="Title">
          <i>{{ source.title }}</i>
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="Authors">
          {{ source.authorString }}
        </nz-descriptions-item>
      </nz-descriptions>
    </nz-col>
    <nz-col [nzSpan]="12">
      <nz-descriptions
        nzBordered
        nzSize="small"
        nzLayout="vertical"
        [nzColumn]="1">
        <nz-descriptions-item nzTitle="Abstract">
          <p
            nz-typography
            nzEllipsis
            nzExpandable
            [nzEllipsisRows]="6">
            {{ source.abstract }}
          </p>
        </nz-descriptions-item>
      </nz-descriptions>
    </nz-col>
    <nz-col [nzSpan]="12">
      <nz-descriptions
        nzBordered
        nzSize="small"
        [nzColumn]="1">
        <nz-descriptions-item nzTitle="Published">{{
          source.publicationDate
        }}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="{{ source.displayType }} ID">
          <cvc-link-tag
            *ngIf="source.sourceUrl"
            [href]="source.sourceUrl"
            [tooltip]="'View on ' + source.displayType">
            {{ source.displayType + ':' + source.citationId }}
          </cvc-link-tag>
          <cvc-retraction-status-tag
            *ngIf="
              source.retractionNature &&
              source.retractionDate &&
              source.retractionReasons
            "
            [retractionNature]="source.retractionNature"
            [retractionDate]="source.retractionDate"
            [retractionReasons]="
              source.retractionReasons
            "></cvc-retraction-status-tag>
        </nz-descriptions-item>
        <nz-descriptions-item
          *ngIf="source.displayType == 'ASCO'"
          nzTitle="ASCO Abstract ID">
          {{ source.ascoAbstractId }}
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="Journal"
          >{{ source.fullJournalTitle }}
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="PMC ID">
          <ng-container *ngIf="source.pmcId; else notAvailable">
            <cvc-link-tag
              href="https://www.ncbi.nlm.nih.gov/pmc/articles/{{
                source.pmcId
              }}"
              tooltip="View on PubMed Central">
              {{ source.pmcId }}
            </cvc-link-tag>
          </ng-container>
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="Access">
          <span
            nz-tooltip
            [nzTooltipTitle]="source.pmcId ? 'Open' : 'Closed'">
            <span
              nz-icon
              [nzType]="source.pmcId ? 'unlock' : 'lock'"
              nzTheme="outline"></span>
          </span>
        </nz-descriptions-item>

        <ng-container
          *ngIf="source.clinicalTrials"
          [ngPlural]="source.clinicalTrials.length">
          <ng-template ngPluralCase="=0">
            <nz-descriptions-item nzTitle="Clinicial Trial">
              <ng-template [ngTemplateOutlet]="notAvailable"></ng-template>
            </nz-descriptions-item>
          </ng-template>
          <ng-template ngPluralCase="=1">
            <nz-descriptions-item nzTitle="Clinicial Trial">
              <cvc-clinical-trial-tag
                [clinicalTrial]="
                  source.clinicalTrials[0]
                "></cvc-clinical-trial-tag>
            </nz-descriptions-item>
          </ng-template>
          <ng-template ngPluralCase="other">
            <nz-descriptions-item nzTitle="Clinicial Trials">
              <ng-container *ngFor="let t of source.clinicalTrials">
                <nz-space>
                  <cvc-clinical-trial-tag
                    [clinicalTrial]="t"></cvc-clinical-trial-tag>
                </nz-space>
              </ng-container>
            </nz-descriptions-item>
          </ng-template>
        </ng-container>
      </nz-descriptions>
      <ng-template #notAvailable>
        <span
          nz-typography
          nzType="secondary">
          Not available
        </span>
      </ng-template>
    </nz-col>
    <!-- evidence table card -->
    <nz-col [nzSpan]="24">
      <cvc-evidence-table
        [sourceId]="sourceId"
        cvcHeight="400"
        [cvcTitleTemplate]="evidenceCardTitle">
      </cvc-evidence-table>
      <ng-template #evidenceCardTitle>
        Evidence for {{ source.citation }}
      </ng-template>
    </nz-col>

    <!-- source suggestion table card -->
    <nz-col [nzSpan]="24">
      <cvc-source-suggestions-table
        [sourceId]="sourceId"
        cvcHeight="400"
        [cvcTitleTemplate]="
          sourceSuggestionCardTitle
        "></cvc-source-suggestions-table>
      <ng-template #sourceSuggestionCardTitle>
        Source Suggestions for {{ source.citation }}
      </ng-template>
    </nz-col>
  </nz-row>
</ng-container>
