<div *ngIf="token">
  <div class="card analysis">
    <header class="card-header">
      <p class="card-header-title">
        <span class="icon">
          <i class="fas fa-flask" aria-hidden="true"></i>
        </span>
        Analysis Results
      </p>
      <a (click)="close()" class="card-header-icon" aria-label="close">
        <span class="icon">
          <i class="fas fa-times" aria-hidden="true"></i>
        </span>
      </a>
    </header>
    <div class="card-content">
      <div class="tabs is-centered">
        <ul>
          <li [class.is-active]="tab === 'table'"><a (click)="tab = 'table'">Table</a></li>
          <li [class.is-active]="tab === 'network'"><a (click)="tab = 'network'">Network</a></li>
          <li [class.is-active]="tab === 'meta'"><a (click)="tab = 'meta'">Parameters</a></li>
        </ul>
      </div>
      <div class="content tab-content meta" *ngIf="task && task.info.done" [class.is-visible]="tab === 'meta'">
        <div *ngIf="task">
          <p *ngIf="task.info.algorithm !== 'quick' && task.info.algorithm !== 'super'">
            Algorithm: <strong>{{algorithmNames[task.info.algorithm]}}</strong>
          </p>
          <div>
            <table class="table is-narrow">
              <tbody>
              <tr *ngIf="task.info.parameters.resultSize !== undefined">
                <td>Result Size</td>
                <td>{{task.info.parameters.resultSize}}</td>
              </tr>
              <tr *ngIf="task.info.parameters.k !== undefined">
                <td>K</td>
                <td>{{task.info.parameters.k}}</td>
              </tr>
              <tr *ngIf="task.info.parameters.numTrees !== undefined">
                <td>Number of trees</td>
                <td>{{task.info.parameters.numTrees}}</td>
              </tr>
              <tr *ngIf="task.info.parameters.tolerance !== undefined">
                <td>Tolerance</td>
                <td>{{task.info.parameters.tolerance}}</td>
              </tr>
              <tr *ngIf="task.info.parameters.dampingFactor !== undefined">
                <td>Damping Factor</td>
                <td>{{task.info.parameters.dampingFactor}}</td>
              </tr>
              <tr *ngIf="task.info.parameters.maxDeg !== undefined">
                <td>Maximum Degree</td>
                <td>{{task.info.parameters.maxDeg}}</td>
              </tr>
              <tr *ngIf="task.info.parameters.hubPenalty !== undefined">
                <td>Hub Penality</td>
                <td>{{task.info.parameters.hubPenalty}}</td>
              </tr>
              <tr *ngIf="task.info.parameters.includeIndirectDrugs !== undefined && task.info.target === 'drug'">
                <td>Include indirect drugs</td>
                <td>
                  <i *ngIf="task.info.parameters.includeIndirectDrugs" class="fa fa-check"></i>
                  <i *ngIf="!task.info.parameters.includeIndirectDrugs" class="fa fa-times"></i>
                </td>
              </tr>
              <tr *ngIf="task.info.parameters.includeNonApprovedDrugs !== undefined && task.info.target === 'drug'">
                <td>Include non-approved drugs</td>
                <td>
                  <i *ngIf="task.info.parameters.includeNonApprovedDrugs" class="fa fa-check"></i>
                  <i *ngIf="!task.info.parameters.includeNonApprovedDrugs" class="fa fa-times"></i>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div *ngIf="task.info.algorithm === 'quick' || task.info.algorithm === 'super'">
            <p>
              Algorithm: <strong>{{algorithmNames['multisteiner']}}</strong>
            </p>
            <table class="table is-narrow">
              <tbody>
              <tr>
                <td>Number of Trees</td>
                <td>1</td>
              </tr>
              <tr>
                <td>Tolerance</td>
                <td>0</td>
              </tr>
              <tr>
                <td>Hub Penality</td>
                <td>1</td>
              </tr>
              </tbody>
            </table>
            <p>
              Algorithm: <strong>{{algorithmNames['closeness']}}</strong>
            </p>
            <table class="table is-narrow">
              <tbody>
              <tr>
                <td>Include indirect drugs</td>
                <td>
                  <i class="fa fa-times"></i>
                </td>
              </tr>
              <tr>
                <td>Include non-approved drugs</td>
                <td>
                  <i class="fa fa-check"></i>
                </td>
              </tr>
              <tr>
                <td>Hub Penality</td>
                <td>1</td>
              </tr>
              <tr>
                <td>Result Size</td>
                <td>10</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="content tab-content" *ngIf="task && task.info.done" [class.is-visible]="tab === 'network'">
        <div class="card-image">
          <div class="network center image1" #network>
            <button class="button is-loading center">Loading</button>
          </div>
          <div class="image2">
            <img src="assets/ll2.png" width="200px"/>
          </div>
        </div>
        <footer class="card-footer toolbar">
          <div class="field">
            <p class="control footer-buttons">
              <button class="button is-primary is-rounded has-tooltip"
                      data-tooltip="Take a screenshot of the current network." (click)="toImage()">
                <span class="icon">
                  <i class="fas fa-camera" aria-hidden="true"></i>
                </span>
                <span>
                  Screenshot
                </span>
              </button>
            </p>
          </div>

          <div class="field">
            <p class="control footer-buttons">
              <a [href]="graphmlLink()" class="button is-success is-rounded has-tooltip" data-tooltip="Export this network as .graphml file.">
                <span class="icon">
                  <i class="fas fa-download" aria-hidden="true"></i>
                </span>
                <span>
                  Export as .graphml
                </span>
              </a>
            </p>
          </div>

<!--          <div class="field">-->
<!--            <p class="control footer-buttons">-->
<!--              <button class="button is-danger is-rounded has-tooltip" data-tooltip="Delete the current analysis."-->
<!--                      (click)="analysis.removeTask(token); close()">-->
<!--                <span class="icon">-->
<!--                  <i class="fas fa-trash" aria-hidden="true"></i>-->
<!--                </span>-->
<!--                <span>-->
<!--                  Delete Analysis-->
<!--                </span>-->
<!--              </button>-->
<!--            </p>-->
<!--          </div>-->

          <div class="footer-buttons dropdown is-up" [class.is-active]="expressionExpanded">
            <div class="dropdown-trigger">
              <button (click)="expressionExpanded=!expressionExpanded"
                      class="button is-rounded is-primary" [class.is-outlined]="!selectedTissue"
                      aria-haspopup="true" aria-controls="dropdown-menu">
                <span *ngIf="!selectedTissue">Tissue</span>
                <span *ngIf="selectedTissue">{{selectedTissue.name}}</span>
                <span class="icon is-small">
                  <i class="fas"
                     [class.fa-angle-up]="expressionExpanded"
                     [class.fa-angle-left]="!expressionExpanded" aria-hidden="true"></i>
                </span>
              </button>
            </div>
            <div class="dropdown-menu" id="dropdown-menu" role="menu">
              <div class="dropdown-content tissue-dropdown">
                <div class="scroll-area">
                  <a (click)="selectTissue(null)"
                     [class.is-active]="!selectedTissue"
                     class="dropdown-item">
                    None
                  </a>
                  <a *ngFor="let tissue of analysis.getTissues()"
                     (click)="selectTissue(tissue)"
                     [class.is-active]="selectedTissue && tissue.netexId === selectedTissue.netexId"
                     class="dropdown-item">
                    {{tissue.name}}
                  </a>
                </div>
              </div>
            </div>
          </div>

          <app-toggle *ngIf="task.info.target === 'drug-target'" class="footer-buttons" textOn="Drugs On" textOff="Off"
                      tooltipOn="Display drugs in the network" tooltipOff="Hide drugs in the network"
                      [value]="showDrugs" (valueChange)="toggleDrugs($event)"></app-toggle>

          <app-toggle class="footer-buttons" textOn="Animation On" textOff="Off"
                      tooltipOn="Enable the network animation." tooltipOff="Disable the network animation and freeze nodes."
                      [value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)"></app-toggle>
        </footer>
      </div>
      <div class="content tab-content scrollable" *ngIf="task && task.info.done" [class.is-visible]="tab === 'table'">
        <div class="field has-addons" *ngIf="tableHasScores && task.info.algorithm !== 'proximity'">
          <p class="control">
            <button class="button is-rounded has-tooltip" data-tooltip="Normalize the scores"
                    [class.is-primary]="tableNormalize" (click)="toggleNormalization(true)">
                <span class="icon is-small">
                  <i class="fa fa-ruler-vertical"></i>
                </span>
              <span>Normalization On</span>
            </button>
          </p>
          <p class="control">
            <button class="button is-rounded has-tooltip" data-tooltip="Disable normalization of the scores."
                    [class.is-primary]="!tableNormalize" (click)="toggleNormalization(false)">
              <span>Off</span>
            </button>
          </p>
        </div>

        <div *ngIf="tableDrugs.length === 0 && task.info.target === 'drug'">
          <i>No drugs have been found.</i>
        </div>
        <div *ngIf="tableDrugs.length > 0" class="table-header">
          <h4 class="is-4">
            <span class="icon"><i class="fa fa-capsules"></i></span>
            <span>Drugs</span>
          </h4>
          <a [href]="downloadLink('drugs')" class="button is-primary is-outlined is-pulled-right is-small">
            <span class="icon"><i class="fa fa-download"></i></span>
            <span>Download</span>
          </a>
        </div>
        <p-table *ngIf="tableDrugs.length > 0" [value]="tableDrugs">
          <ng-template pTemplate="header">
            <tr>
              <th [pSortableColumn]="'drugId'">
                ID
                <p-sortIcon [field]="'drugId'"></p-sortIcon>
              </th>
              <th [pSortableColumn]="'label'">
                Label
                <p-sortIcon [field]="'label'"></p-sortIcon>
              </th>
              <th [pSortableColumn]="'status'">
                Approved
                <p-sortIcon [field]="'status'"></p-sortIcon>
              </th>
              <th [pSortableColumn]="'inTrial'">
                In Trial
                <p-sortIcon [field]="'inTrial'"></p-sortIcon>
              </th>
              <th [pSortableColumn]="'inLiterature'">
                In Literature
                <p-sortIcon [field]="'inLiterature'"></p-sortIcon>
              </th>
              <th *ngIf="tableHasScores" [pSortableColumn]="'score'">
                Score
                <button class="button is-light has-tooltip tooltip-button"
                        [attr.data-tooltip]="tableDrugScoreTooltip">
                  ?
                </button>
                <p-sortIcon [field]="'score'"></p-sortIcon>
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-e>
            <tr>
              <td><a href="https://www.drugbank.ca/drugs/{{ e.drugId }}" target="_blank">{{ e.drugId }}</a></td>
              <td>{{e.label}}</td>
              <td>
                <span *ngIf="e.status === 'approved'">
                  <i class="fa fa-check"></i>
                  Approved
                </span>
                <span *ngIf="e.status === 'unapproved'">
                  <i class="fa fa-times"></i>
                </span>
              </td>
              <td>
                <span *ngIf="e.inTrial">
                  <i class="fa fa-microscope has-text-primary"></i>
                  Trial
                </span>
                <span *ngIf="!e.inTrial">
                  <i class="fa fa-times"></i>
                </span>
              </td>
              <td>
                <span *ngIf="e.inLiterature">
                  <i class="fa fa-book has-text-primary"></i>
                  Literature
                </span>
                <span *ngIf="!e.inLiterature">
                  <i class="fa fa-times"></i>
                </span>
              </td>
              <td *ngIf="tableHasScores">{{e.score | number}}</td>
            </tr>
          </ng-template>
        </p-table>

        <div *ngIf="tableProteins.length > 0" class="table-header">
          <h4 class="is-4">
            <span class="icon"><i class="fa fa-dna"></i></span>
            <span>Proteins</span>
          </h4>
          <a [href]="downloadLink('proteins')" class="button is-primary is-outlined is-pulled-right is-small">
            <span class="icon"><i class="fa fa-download"></i></span>
            <span>Download</span>
          </a>
        </div>
        <p-table *ngIf="tableProteins.length > 0" selectionMode="multiple"
                 [value]="tableProteins" [selection]="tableSelectedProteins" dataKey="uniprotAc"
                 (selectionChange)="tableProteinSelection($event)">
          <ng-template pTemplate="header">
            <tr>
              <th class="checkbox-col">
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
              </th>
              <th [pSortableColumn]="'uniprotAc'">
                UniProt Code
                <p-sortIcon [field]="'uniprotAc'"></p-sortIcon>
              </th>
              <th [pSortableColumn]="'symbol'">
                Symbol
                <p-sortIcon [field]="'symbol'"></p-sortIcon>
              </th>
              <th [pSortableColumn]="'proteinName'">
                Name
                <p-sortIcon [field]="'proteinName'"></p-sortIcon>
              </th>
              <th *ngIf="tableHasScores" [pSortableColumn]="'score'">
                Score
                <button class="button is-light has-tooltip tooltip-button"
                        [attr.data-tooltip]="tableProteinScoreTooltip">
                  ?
                </button>
                <p-sortIcon [field]="'score'"></p-sortIcon>
              </th>
              <th [pSortableColumn]="'isSeed'">
                Seed
                <p-sortIcon [field]="'isSeed'"></p-sortIcon>
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-e>
            <tr>
              <td>
                <p-tableCheckbox [value]="e"></p-tableCheckbox>
              </td>
              <td><a href="https://www.uniprot.org/uniprot/{{ e.uniprotAc }}" target="_blank">{{ e.uniprotAc }}</a></td>
              <td>{{e.symbol}}</td>
              <td>{{e.proteinName}}</td>
              <td *ngIf="tableHasScores">{{e.score | number}}</td>
              <td>
                <span *ngIf="e.isSeed">
                  <i class="fa fa-check"></i>
                  Seed
                </span>
                <span *ngIf="!e.isSeed">
                  <i class="fa fa-times"></i>
                </span>
              </td>
            </tr>
          </ng-template>
        </p-table>
      </div>
    </div>
  </div>
</div>