<app-protein-analysis [(show)]="showAnalysisDialog"></app-protein-analysis>

<div class="covex explorer">

  <div class="covex left-window">
    <div>
      <div class="covex bar-left">

        <div class="card bar-small">
          <header class="card-header">
            <p class="card-header-title">
          <span class="icon">
        <i class="fas fa-database" aria-hidden="true"></i>
      </span> Choose Dataset
            </p>
          </header>
          <div class="card-content">
            <app-select-dataset [datasetItems]="datasetItems"
                                (selectDataset)="createNetwork($event)"></app-select-dataset>
          </div>
        </div>

        <div class="card bar-medium">
          <header class="card-header">
            <p class="card-header-title">
          <span class="icon">
        <i class="fas fa-info" aria-hidden="true"></i>
      </span> Network Overview
            </p>
          </header>
          <div class="card-content">
            <nav class="level" *ngIf="proteinData">
              <div class="level-item has-text-centered">
                <div>
                  <p class="heading">Viral<br>Proteins</p>
                  <p class="title"> {{ proteinData.effects.length }}</p>
                </div>
              </div>
              <div class="level-item has-text-centered">
                <div>
                  <p class="heading">Host<br>Proteins</p>
                  <p class="title">{{ proteinData.proteins.length }}</p>
                </div>
              </div>
              <div class="level-item has-text-centered">
                <div>
                  <p class="heading">Virus-Host<br>Interactions</p>
                  <p class="title">{{ proteinData.edges.length }}</p>
                </div>
              </div>
            </nav>
          </div>
        </div>

        <div class="card bar-small">
          <header class="card-header">
            <p class="card-header-title">
          <span class="icon">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span> Query Protein
            </p>
          </header>
          <div class="card-content">
            <div class="field">
              <div class="control">
                <app-query-component [queryItems]="queryItems"
                                     (selectProtein)="openSummary($event, true)"></app-query-component>
              </div>
            </div>
          </div>
        </div>

        <div class="card bar-large">
          <header class="card-header">
            <p class="card-header-title">
          <span class="icon">
        <i class="fas fa-filter" aria-hidden="true"></i>
      </span> Filter Viral Proteins
            </p>
          </header>
          <div class="card-content overflow">
            <div *ngFor="let bait of viralProteinCheckboxes">
              <label class="checkbox">
                <input type="checkbox" class="checkbox" [ngModel]="bait.checked"
                       (ngModelChange)="bait.checked = $event; filterNodes()">
                {{ bait.data.effectName }}
              </label>
            </div>
          </div>
          <footer class="card-footer">
            <button (click)="reset($event);" class="card-footer-item button is-danger">
              Reset
            </button>
          </footer>
        </div>
      </div>

      <div class="covex network">
        <div class="card network">
          <header class="card-header">
            <p class="card-header-title">
              Protein-Protein Interaction Network
            </p>
          </header>
          <div class="card-content">
            <div class="card-image" id="0">
              <div class="network center" #network>
                <button class="button is-loading center">Loading</button>
              </div>
            </div>
            <footer class="card-footer">
              <button (click)="toCanvas()" class="card-footer-item button is-primary">
                <span class="icon">
        <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
      </span>
              </button>
              <label class="checkbox">
                <input type="checkbox" class="checkbox" [(ngModel)]="physicsEnabled"
                       (ngModelChange)="physicsEnabled = $event; updatePhysicsEnabled()">
                Physics enabled
              </label>
            </footer>
          </div>
        </div>
      </div>
    </div>

    <div class="analysis-view" *ngIf="selectedAnalysisToken">
      <app-analysis-window [(token)]="selectedAnalysisToken"></app-analysis-window>
    </div>
  </div>

  <div class="covex bar-right">

    <div class="card bar-medium">
      <header class="card-header">
        <p class="card-header-title">
          <span class="icon">
        <i class="fas fa-info" aria-hidden="true"></i>
      </span> {{currentProteinAc}}
        </p>
      </header>
      <div class="card-content">
        <div *ngIf="showDetails">

          <p><b>Protein Name:</b> {{ currentProteinAc }}</p>
          <!--          <p><b>Gene Name(s):</b> <span *ngFor="let geneName of geneNames"> {{ geneName }}</span></p>-->
          <!--          <p><b>Protein Name(s):</b> <span *ngFor="let proteinName of proteinNames"> {{ proteinName }}</span></p>-->
          <p><b>Protein AC(s):</b>
            <a href="https://www.uniprot.org/uniprot/{{proteinAc}}" target="_blank"
               *ngFor="let proteinAc of proteinAcs">
              {{ proteinAc }}
            </a>
          </p>
        </div>

        <div *ngIf="!showDetails">
          Please select a node for further information.
          <!--          <a (click)="selectedAnalysisToken = 'oy4UsXfBDobTucdQBhN9IUzfnpqKwzqx'"> Open Analysis Window </a>-->
        </div>

      </div>
    </div>

    <div class="card bar-medium">
      <header class="card-header">
        <p class="card-header-title">
          <span class="icon">
        <i class="fas fa-flask" aria-hidden="true"></i>
      </span> Analysis
        </p>
      </header>
      <div class="card-content">
        <button class="button is-success" *ngIf="!inSelection(currentProteinAc)"
                (click)="addToSelection(currentProteinAc)">Add to Analysis
        </button>
        <button class="button is-danger" *ngIf="inSelection(currentProteinAc)"
                (click)="removeFromSelection(currentProteinAc)">Remove from Analysis
        </button>
        <p></p>
        <button (click)="showAnalysisDialog = true"
                class="button is-primary"
                [disabled]="analysis.getCount() === 0">
          <span>
            <span class="icon">
              <i class="fa fa-list"></i>
            </span>
            <span>
              Open Analysis
            </span>
          </span>

        </button>
      </div>


      <div class="card bar-large">
        <header class="card-header">
          <p class="card-header-title">
                <span class="icon">
              <i class="fas fa-filter" aria-hidden="true"></i>
            </span> Tasks
          </p>
        </header>
        <div class="card-content">
          <app-task-list (token)="selectedAnalysisToken = $event"></app-task-list>
        </div>
      </div>

      <div class="card bar-large">
        <header class="card-header">
          <p class="card-header-title">
                <span class="icon">
              <i class="fas fa-filter" aria-hidden="true"></i>
            </span> Selection
          </p>
        </header>
        <div class="card-content overflow">
          <table class="table">
            <thead>
            <tr>
              <td>AC</td>
              <td>Actions</td>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let p of analysis.getSelection()">
              <td>{{p.proteinAc}}</td>
              <td>
                <button (click)="analysis.removeProtein(p)" class="button is-small is-danger">
                  <i class="fa fa-trash"></i>
                </button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>


    </div>

  </div>
</div>