<div id="popover-content">
  @let evidence = evidence$ | async;
  @if (evidence) {
    <nz-card
      [nzTitle]="cardTitle"
      nzBordered="false"
      id="card-content"
      [nzExtra]="cardExtra">
      <!-- card title -->
      <ng-template #cardTitle>
        <i
          nz-icon
          nzTheme="twotone"
          [nzTwotoneColor]="'EvidenceItem' | entityColor"
          nzType="civic-evidence"></i>
        {{ evidence.name }}
      </ng-template>

      <!-- card extra -->
      <ng-template #cardExtra>
        <cvc-status-tag [status]="evidence.status"></cvc-status-tag>
        <cvc-entity-child-counts
          [cvcEntity]="evidence"
          cvcRoute="evidence"></cvc-entity-child-counts>
      </ng-template>

      <!-- evidence statement -->
      <nz-descriptions
        nzLayout="vertical"
        nzBordered
        nzSize="small"
        [nzColumn]="1">
        <nz-descriptions-item nzTitle="Evidence Statement">
          @if (evidence.description) {
            {{ evidence.description }}
          } @else {
            <cvc-empty-value cvcEmptyCategory="unspecified"></cvc-empty-value>
          }
        </nz-descriptions-item>
      </nz-descriptions>

      <!-- primary attributes -->
      <nz-descriptions
        nzSize="small"
        nzLayout="horizontal"
        [nzColumn]="2"
        nzBordered="true">
        <!-- evidence type -->
        <nz-descriptions-item nzTitle="Type">
          <cvc-attribute-tag
            cvcAttrName="evidenceType"
            [cvcAttrValue]="evidence.evidenceType"
            nz-tooltip
            [nzTooltipTitle]="
              evidence.evidenceType | enumTooltip: 'evidenceType'
            ">
          </cvc-attribute-tag>
        </nz-descriptions-item>

        <!-- evidence direction -->
        <nz-descriptions-item nzTitle="Direction">
          <cvc-attribute-tag
            *ngIf="evidence.evidenceDirection !== 'NA'; else valueNotApplicable"
            [cvcAttrValue]="evidence.evidenceDirection"
            nz-tooltip
            [nzTooltipTitle]="
              evidence.evidenceDirection
                | enumTooltip
                  : 'evidenceDirection'
                  : evidence.evidenceType
                  : 'EvidenceItem'
            ">
          </cvc-attribute-tag>
        </nz-descriptions-item>

        <!-- significance -->
        <nz-descriptions-item nzTitle="Significance">
          <cvc-attribute-tag
            *ngIf="evidence.significance !== 'NA'; else valueNotApplicable"
            [cvcAttrValue]="evidence.significance"
            nz-tooltip
            [nzTooltipTitle]="
              evidence.significance
                | enumTooltip
                  : 'significance'
                  : evidence.evidenceType
                  : 'EvidenceItem'
            ">
          </cvc-attribute-tag>
        </nz-descriptions-item>

        <!-- variant origin -->
        <nz-descriptions-item nzTitle="Variant Origin">
          <cvc-attribute-tag
            [cvcAttrValue]="evidence.variantOrigin"
            nz-tooltip
            [nzTooltipTitle]="
              evidence.variantOrigin | enumTooltip: 'variantOrigin'
            ">
          </cvc-attribute-tag>
        </nz-descriptions-item>

        <!-- evidence level -->
        <nz-descriptions-item nzTitle="Level">
          <nz-tag
            nz-tooltip
            [nzTooltipTitle]="
              evidence.evidenceLevel | enumTooltip: 'evidenceLevel'
            ">
            <strong>{{ evidence.evidenceLevel }}</strong> -
            {{ evidence.evidenceLevel | enumTooltip: 'evidenceLevelBrief' }}
          </nz-tag>
        </nz-descriptions-item>

        <!-- evidence rating -->
        <nz-descriptions-item nzTitle="Rating">
          <nz-tag
            nz-tooltip
            [nzTooltipTitle]="
              evidence.evidenceRating | enumTooltip: 'evidenceRating'
            ">
            <cvc-evidence-rating
              [starRating]="evidence.evidenceRating"></cvc-evidence-rating>
          </nz-tag>
        </nz-descriptions-item>
        <!-- source -->
        <nz-descriptions-item
          nzTitle="Source"
          nzSpan="2">
          <cvc-source-tag [source]="evidence.source"> </cvc-source-tag>
        </nz-descriptions-item>

        <!-- clinical trials -->
        <nz-descriptions-item
          nzSpan="2"
          *ngIf="
            evidence.source.clinicalTrials &&
              evidence.source.clinicalTrials.length > 0;
            else valueUnspecified
          "
          [nzTitle]="
            evidence.source.clinicalTrials &&
            evidence.source.clinicalTrials.length > 1
              ? 'Clinical Trials'
              : 'Clinical Trial'
          "
          nzSpan="2">
          <ng-container *ngFor="let t of evidence.source.clinicalTrials">
            <cvc-clinical-trial-tag
              [clinicalTrial]="t"></cvc-clinical-trial-tag>
          </ng-container>
        </nz-descriptions-item>
      </nz-descriptions>

      <!-- secondary attributes -->
      <nz-descriptions
        nzSize="small"
        nzLayout="horizontal"
        [nzColumn]="1"
        nzBordered="true">
        <!-- molecular profile -->
        <nz-descriptions-item
          nzTitle="Molecular Profile"
          nzSpan="1">
          <cvc-molecular-profile-tag
            [molecularProfile]="evidence.molecularProfile"
            [enablePopover]="true"></cvc-molecular-profile-tag>
        </nz-descriptions-item>

        <!-- molecular profile expression -->
        <nz-descriptions-item
          nzTitle="MP Expression"
          nzSpan="1">
          <cvc-mp-tag-name
            [nameSegments]="
              evidence.molecularProfile.parsedName
            "></cvc-mp-tag-name>
        </nz-descriptions-item>

        <!-- disease -->
        <nz-descriptions-item
          nzTitle="Disease"
          nzSpan="1">
          <ng-container *ngIf="evidence.disease; else valueNotApplicable">
            <a routerLink="/diseases/{{ evidence.disease.id }}">
              <cvc-disease-tag [disease]="evidence.disease"></cvc-disease-tag>
            </a>
          </ng-container>
        </nz-descriptions-item>

        <!-- phenotypes -->
        <nz-descriptions-item
          nzSpan="1"
          *ngIf="evidence.phenotypes.length > 0"
          [nzTitle]="
            evidence.phenotypes.length > 1 ? 'Phenotypes' : 'Phenotype'
          ">
          <ng-container
            *ngIf="evidence.phenotypes.length > 0; else valueUnspecified">
            <cvc-tag-list>
              <ng-container *ngFor="let ph of evidence.phenotypes">
                <cvc-phenotype-tag [phenotype]="ph"></cvc-phenotype-tag>
              </ng-container>
            </cvc-tag-list>
          </ng-container>
        </nz-descriptions-item>

        <!-- therapies -->
        <nz-descriptions-item
          nzSpan="1"
          *ngIf="evidence.therapies.length > 0"
          [nzTitle]="evidence.therapies.length > 1 ? 'Therapies' : 'Therapy'">
          <ng-container [ngPlural]="evidence.therapies.length">
            <!-- no drug -->
            <ng-template ngPluralCase="=0">
              <ng-container
                [ngTemplateOutlet]="valueNotApplicable"></ng-container>
            </ng-template>

            <!-- one or more drugs -->
            <ng-template ngPluralCase="other">
              <cvc-tag-list>
                <ng-container *ngFor="let therapy of evidence.therapies">
                  <cvc-therapy-tag [therapy]="therapy"></cvc-therapy-tag>
                </ng-container>
                <nz-tag
                  *ngIf="evidence.therapyInteractionType"
                  nz-tooltip
                  nzTooltipPlacement="top"
                  [nzTooltipTitle]="
                    evidence.therapyInteractionType
                      | therapyInteractionEnumDisplay
                  ">
                  <i
                    nz-icon
                    [nzType]="
                      evidence.therapyInteractionType
                        | therapyInteractionEnumDisplay: 'icon-name'
                    "
                    class="attribute-icon"></i>
                </nz-tag>
              </cvc-tag-list>
            </ng-template>
          </ng-container>
        </nz-descriptions-item>
      </nz-descriptions>
    </nz-card>

    <!-- TEMPORARY OLD DESCRIPTIONS -->
    <ng-template #temp>
      <nz-descriptions
        nzSize="small"
        nzLayout="horizontal"
        [nzColumn]="2"
        nzBordered>
        <!-- molecular profile expression -->
        <nz-descriptions-item
          nzTitle="MP Expression"
          nzSpan="2">
          <cvc-mp-tag-name
            [nameSegments]="evidence.molecularProfile.parsedName"
            [enablePopover]="false"></cvc-mp-tag-name>
        </nz-descriptions-item>

        <!-- molecular profile -->
        <nz-descriptions-item
          [nzTitle]="mpTitle"
          nzSpan="2">
          <ng-template #mpTitle>Molecular&nbsp;Profile</ng-template>
          <cvc-molecular-profile-tag
            [molecularProfile]="evidence.molecularProfile"
            [enablePopover]="false"
            [truncateLongName]="true"></cvc-molecular-profile-tag>
        </nz-descriptions-item>

        <!-- source -->
        <nz-descriptions-item
          nzTitle="Source"
          nzSpan="2">
          <cvc-source-tag
            [source]="evidence.source"
            [enablePopover]="false"></cvc-source-tag>
        </nz-descriptions-item>

        <!-- evidence level -->
        <nz-descriptions-item
          nzTitle="Level"
          nzSpan="1">
          {{ evidence.evidenceLevel }}
        </nz-descriptions-item>

        <!-- evidence type -->
        <nz-descriptions-item
          nzTitle="Type"
          nzSpan="1">
          {{ evidence.evidenceType | evidenceEnumDisplay }}
        </nz-descriptions-item>

        <!-- evidence direction -->
        <nz-descriptions-item
          nzTitle="Direction"
          nzSpan="1">
          {{ evidence.evidenceDirection | evidenceEnumDisplay }}
        </nz-descriptions-item>

        <!-- evidence rating -->
        <nz-descriptions-item
          nzTitle="Rating"
          nzSpan="1">
          {{ evidence.evidenceRating }}
          <i
            nz-icon
            nzType="star"
            nzTheme="fill"
            nzColor="lightgray"></i>
        </nz-descriptions-item>

        <!-- clinical significance -->
        <nz-descriptions-item
          nzTitle="Clinical Significance"
          nzSpan="2">
          {{ evidence.significance | evidenceEnumDisplay }}
        </nz-descriptions-item>

        <!-- disease -->
        <nz-descriptions-item
          nzTitle="Disease"
          nzSpan="2">
          <ng-container *ngIf="evidence.disease; else noDisease">
            <cvc-disease-tag
              [enablePopover]="false"
              [disease]="evidence.disease"
              [truncateLongName]="true"></cvc-disease-tag>
          </ng-container>
          <ng-template #noDisease> N/A </ng-template>
        </nz-descriptions-item>

        <!-- therapies -->
        <nz-descriptions-item
          nzTitle="Therapies"
          nzSpan="2"
          *ngIf="evidence.therapies.length > 0">
          <span *ngFor="let therapy of evidence.therapies">
            <cvc-therapy-tag
              [enablePopover]="false"
              [therapy]="therapy"
              [truncateLongName]="true"></cvc-therapy-tag>
          </span>
          <ng-container *ngIf="evidence.therapies.length > 1">
            {{ evidence.therapyInteractionType | titlecase }}
          </ng-container>
        </nz-descriptions-item>

        <!-- phenotypes -->
        <nz-descriptions-item
          nzTitle="Phenotypes"
          nzSpan="2"
          *ngIf="evidence.phenotypes.length > 0">
          <span *ngFor="let ph of evidence.phenotypes">
            <cvc-phenotype-tag
              [enablePopover]="false"
              [phenotype]="ph"></cvc-phenotype-tag>
          </span>
        </nz-descriptions-item>
      </nz-descriptions>
    </ng-template>
  }
</div>

<ng-template #valueNotApplicable>
  <cvc-empty-value cvcEmptyCategory="not-applicable"></cvc-empty-value>
</ng-template>
<ng-template #valueUnspecified>
  <cvc-empty-value cvcEmptyCategory="unspecified"></cvc-empty-value>
</ng-template>
