<div *ngIf="wrapper">
  <div *ngIf="wrapper.type === 'host'">
    <p>
      <b><span>Gene Name: </span></b>
      {{ wrapper.data.name }}
      <span class="icon is-small"><i class="fas fa-dna"></i></span>
    </p>
    <p>
      <b><span>Uniprot AC :</span></b>
      <a href="https://www.uniprot.org/uniprot/{{ wrapper.data.proteinAc }}" target="_blank">
        {{ wrapper.data.proteinAc }}
      </a>
    </p>
    <p>
      <b><span>Name: </span></b>
      {{ wrapper.data.proteinName }}
    </p>
    <p *ngIf="wrapper.data.expressionLevel">
      <b><span>Expression level: </span></b>
      {{ wrapper.data.expressionLevel|number }}
    </p>
  </div>
  <div *ngIf="wrapper.type === 'virus'">
    <p>
      <b><span>Virus:</span></b>
      {{ wrapper.data.virusName.replace('V', 'V-') }}
      <span class="icon is-small"><i class="fas fa-virus"></i></span>
    </p>
    <p>
      <b><span>Effect: </span></b>
      {{ wrapper.data.effectName }}
    </p>
  </div>
  <div *ngIf="wrapper.type === 'drug'">
    <p>
      <b><span>Name: </span></b>
      {{ wrapper.data.name }}
      <span class="icon is-small"><i class="fas fa-capsules"></i></span>
    </p>
    <p>
      <b>DrugBank ID: </b>
      <a href="https://www.drugbank.ca/drugs/{{ wrapper.data.drugId }}" target="_blank"> {{ wrapper.data.drugId }}</a>
    </p>
    <p *ngIf="wrapper.data.status === 'unapproved' ">
      <b>Status: </b> Unapproved
      <span class="icon is-small"><i class="fas fa-search investigational"></i></span>
    <p *ngIf="wrapper.data.status === 'approved' ">
      <b>Status: </b> Approved
      <span class="icon is-small"><i class="fas fa-check"></i></span>
    </p>
    <p *ngIf="wrapper.data.inTrial">
      <b>In trial(s) </b> <span class="icon is-small"><i class="fas fa-check"></i></span>
    </p>
    <div *ngIf="wrapper.data.trialLinks.length > 0" class="list">
      <div *ngFor="let link of wrapper.data.trialLinks" class="list-item">
        <a [href]="link" target="_blank">{{beautify(link)}}</a>
      </div>
      <small class="list-item"><i>Links provided by WHO</i></small>
    </div>
  </div>

  <div class="field has-addons add-remove-toggle" *ngIf="wrapper.type !== 'drug'">
    <app-toggle [value]="analysis.inSelection(wrapper)"
                (valueChange)="$event ? analysis.addItems([wrapper]) : analysis.removeItems([wrapper])" textOn="Selected"
                textOff="Deselected" tooltipOn="Add protein to selection." tooltipOff="Remove protein from selection."></app-toggle>
  </div>
</div>
<div *ngIf="!wrapper">
  Please select a node for further information.
</div>