<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 === 'meta'"><a (click)="tab = 'meta'">Meta</a></li>
          <li [class.is-active]="tab === 'network'"><a (click)="tab = 'network'">Network</a></li>
          <li [class.is-active]="tab === 'table'"><a (click)="tab = 'table'">Table</a></li>
        </ul>
      </div>
      <div class="content tab-content" *ngIf="task && task.info.done" [class.is-visible]="tab === 'meta'">
        <div *ngIf="task">
          <p>
            Algorithm: {{task.info.algorithm}}
          </p>
          <div *ngIf="task.info.algorithm === 'trustrank'">
            <table class="table is-narrow">
              <tbody>
              <tr>
                <td>Damping Factor</td>
                <td>{{task.info.parameters.dampingFactor}}</td>
              </tr>
              <tr>
                <td>Result Size</td>
                <td>{{task.info.parameters.resultSize}}</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="parent"  id="1">
            <div class="network center" #network>
              <button class="button is-loading center">Loading</button>
            </div>
          </div>
        </div>
        <footer class="card-footer toolbar">
          <div class="field has-addons">
            <p class="control">
              <button class="button is-rounded is-success is-rounded" [disabled]="true">
            <span class="icon">
              <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
            </span>
                <span>
              Export Results
            </span>
              </button>
            </p>
            <p class="control">
              <button (click)="screenshot()" class="button is-primary is-rounded" >
            <span class="icon">
              <i class="fas fa-camera" aria-hidden="true"></i>
            </span>
                <span>
              Screenshot
            </span>
              </button>
            </p>
            <p class="control">
              <button class="button is-danger is-rounded" (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="field has-addons footer-toggle-buttons" *ngIf="false"> <!-- temporarliy disabled -->
            <p class="control">
              <button class="button is-rounded" [class.is-primary]="showDrugs" (click)="toggleDrugs(true)">
                <span class="icon is-small">
                  <i class="fas fa-capsules"></i>
                </span>
                <span>Drugs On</span>
              </button>
            </p>
            <p class="control">
              <button class="button is-rounded" [class.is-primary]="!showDrugs" (click)="toggleDrugs(false)">
                <span>Off</span>
              </button>
            </p>
          </div>
        </footer>
      </div>
      <div class="content tab-content scrollable" *ngIf="task && task.info.done" [class.is-visible]="tab === 'table'">
        <h4 class="is-4" *ngIf="tableDrugs.length > 0">Drugs</h4>
        <table class="table is-striped" *ngIf="tableDrugs.length > 0">
          <thead>
          <tr>
            <td>ID</td>
            <td>Name</td>
            <td>Status</td>
            <td>Score</td>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let e of tableDrugs">
            <td>{{e.drugId}}</td>
            <td>{{e.name}}</td>
            <td>{{e.status}}</td>
            <td>{{e.score}}</td>
          </tr>
          </tbody>
        </table>

        <h4 class="is-4" *ngIf="tableProteins.length > 0">Proteins</h4>
        <table class="table is-striped" *ngIf="tableProteins.length > 0">
          <thead>
          <tr>
            <td>AC</td>
            <td>Gene</td>
            <td>Score</td>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let e of tableProteins">
            <td>{{e.proteinAc}}</td>
            <td>{{e.name}}</td>
            <td>{{e.score}}</td>
          </tr>
          </tbody>
        </table>

        <h4 class="is-4" *ngIf="tableViralProteins.length > 0">Viral Proteins</h4>
        <table class="table is-striped" *ngIf="tableViralProteins.length > 0">
          <thead>
          <tr>
            <td>Name</td>
            <td>Virus Strain</td>
            <td>Score</td>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let e of tableViralProteins">
            <td>{{e.effectName}}</td>
            <td>{{e.virusName}}</td>
            <td>{{e.score}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>