<div *ngIf="wrapper">
  <div>
    <p *ngIf="!wrapper.data.drugId && wrapper.data.detailShowLabel && wrapper.data.label" [ngClass]="{'text-normal':smallStyle}">
      <b><span>Label:</span></b>
      <span class="is-capitalized"> {{ wrapper.data.label }}</span>
    </p>
    <p *ngIf="wrapper.data.proteinName" [ngClass]="{'text-normal':smallStyle}">
      <b><span>Name:</span></b>
      <span class="is-capitalized"> {{ wrapper.data.proteinName }}</span>
    </p>
    <p *ngIf="wrapper.data.symbol" [ngClass]="{'text-normal':smallStyle}">
      <b><span>Symbol:</span></b>
      <span class="is-capitalized"> {{ wrapper.data.symbol }}</span>
    </p>
    <p *ngIf="wrapper.data.drugId" [ngClass]="{'text-normal':smallStyle}">
      <b><span>Name:</span></b>
      <span class="is-capitalized"> {{ wrapper.data.label }}</span>
    </p>
    <p *ngIf="wrapper.data.drugId" [ngClass]="{'text-normal':smallStyle}">
      <b><span>DrugBank:</span></b>
      <a href="https://go.drugbank.com/drugs/{{ wrapper.data.drugId }}" target="_blank">
        <span class="is-capitalized"> {{ wrapper.data.drugId }}</span>
      </a>
    </p>
    <p *ngIf="wrapper.data.groupName" [ngClass]="{'text-normal':smallStyle}">
      <b><span>Group:</span></b>
      <span class="is-capitalized"> {{ wrapper.data.groupName }}</span>
    </p>
    <p *ngIf="wrapper.data.uniprotAc" [ngClass]="{'text-normal':smallStyle}">
      <b><span>Uniprot:</span></b>
      <a href="https://www.uniprot.org/uniprot/{{ wrapper.data.uniprotAc }}" target="_blank">
        <span class="is-capitalized"> {{ wrapper.data.uniprotAc }}</span>
      </a>
    </p>
    <p *ngIf="wrapper.data.ensg" [ngClass]="{'text-normal':smallStyle}">
      <b><span>Ensembl:</span></b>
      <a 
        *ngFor="let ensg of wrapper.data.ensg"
        href="https://www.ensembl.org/Homo_sapiens/Gene/Summary?g={{ ensg }}" target="_blank">
        <span class="is-capitalized"> {{ ensg }}</span>
      </a>
    </p>

  </div>

  <app-toggle 
  *ngIf="wrapper.data.netexId && wrapper.data.netexId.startsWith('p')"
  [value]="analysis.inSelection(wrapper)" [smallStyle]="smallStyle"
              (valueChange)="$event ? analysis.addItems([wrapper]) : analysis.removeItems([wrapper])" textOn="Seed"
              textOff="Off" tooltipOn="Add protein to selection." tooltipOff="Remove protein from selection."></app-toggle>
</div>
<div *ngIf="!wrapper" [ngClass]="{'text-normal':smallStyle}" >
  Please select a node for further information.
</div>