<!DOCTYPE html>
<html>
  <head>
    <title>Functional Report</title>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
      integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/promise.min.js"></script>
    <script>
       var sequences = {{ sequences }};
      var outputPrefix = {{ output_prefix }};
    </script>

    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jsBackground/htmlUpdates.js"></script>
    <script
      type="text/javascript"
      src="jsBackground/masterController.js"
    ></script>

    <link rel="stylesheet" type="text/css" href="css/custom.css" />
  </head>

  <body>
    <!--BEGIN HEADER-->
    <div id="cover-spin"></div>
    <div class="jumbotron">
      <div class="container ">
        <h1>SeqScreen {{ version }}</h1>

        <h4>Input files last modified:</h4>
        {% for file in mtimes %}
        <div class="info btn badge-secondary">
          {% if file == 'txt' %} SeqScreen report {% elif file == 'fasta' %}
          Sequence file {% elif file == 'xml' %} Blast output {% endif %}

          <span class="badge">{{ mtimes[file] }}</span>
        </div>
        {% endfor %}
      </div>
      <div class="container">
        <h4>Summary:</h4>
        <div class="info btn badge-secondary">
          Sequences provided <span class="badge">{{ seq_len }}</span>
        </div>
        {% for bpoc in bpocs %}
        <div class="info btn badge-{{ bpoc.style }}" id="bpoc{{loop.index0}}">
          {{ bpoc.name }} BPOC <span class="badge">{{ bpoc.count }}</span>
        </div>
        {% endfor %}
      </div>
    </div>

    <!--BEGIN BODY-->
    <div class="inner_panel">
      <h2>
        Per-sequence overview
      </h2>
      <button
        type="button"
        class="btn btn-primary"
        id="modalButton"
        data-toggle="modal"
        data-target="#modal"
      >
        <i class="fas fa-filter"></i>
        Filter
      </button>
      <div id="filterList"></div>
      <div id="clearFilter"></div>
      <!--BEGIN FILTER MODAL-->
      <div
        class="modal"
        id="modal"
        aria-labelledby="modalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <form>
            <div class="modal-content">
              <div class="modal-header">
                <h3 class="modal-title" id="modalLabel">Filter sequences</h3>
                <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="form-row">
                  <div class="form-group col">
                    <label class="h5" for="modalQuery">Query</label>
                    <input type="text" class="form-control" id="modalQuery" />
                  </div>
                </div>
                <label class="h5">Sequence Length</label>
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <input
                      type="number"
                      class="form-control"
                      id="modalMin"
                      placeholder="min"
                      min="0"
                    />
                  </div>
                  <div class="form-group col-md-6">
                    <input
                      type="number"
                      class="form-control"
                      id="modalMax"
                      placeholder="max"
                      min="0"
                    />
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col">
                    <label class="h5" for="modalOrganism">Organism</label>
                    <input
                      type="text"
                      class="form-control"
                      id="modalOrganism"
                    />
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col">
                    <label class="h5" for="modalGeneName">Gene Name</label>
                    <input
                      type="text"
                      class="form-control"
                      id="modalGeneName"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="h5">Threat Process</label>
                  <div class="form-row col">
                    {% for bpoc in bpoc_count %}
                    <div
                      class="badge-{{ bpoc.style }} form-check form-check-inline mb-2"
                    >
                      <input
                        class="form-check-input"
                        type="checkbox"
                        id="modalBpoc{{ loop.index0 }}"
                      />
                      <label
                        class="form-check-label"
                        for="modalBpoc{{ loop.index0 }}"
                        >{{ bpoc.name }}</label
                      >
                    </div>
                    {% endfor %}
                  </div>
                </div>

                <!-- 
              <div class="form-row">
                <div class="form-group col">
                  <label class="h4" for="modalGOTerm">GO Term</label>
                  <input type="text" class="form-control" id="modalGOTerm">
                </div>
              </div> -->
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-danger filterButton"
                  id="modalClear"
                  data-dismiss="modal"
                  disabled
                >
                  Clear
                </button>
                <button
                  type="submit"
                  class="btn btn-primary filterButton"
                  id="modalApply"
                  data-dismiss="modal"
                >
                  Apply
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="pgination-container">
    	<div id="pagination-wrapper-top"></div>
    </div>
      <!--BEGIN SEQ ALIGNMENT MODAL-->
      <div class="modal" id="alignment" aria-hidden="true">
        <div class="modal-lg modal-dialog modal-dialog-scrollable">
          <div class="modal-content">
            <div class="modal-header">
              <h3 class="modal-title" id="alignmentLabel">Alignment Result</h3>
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body m-0 p-0" style="overflow-x: auto">
              <div class="card-header">
                Gene Name: <span id="alignGene"></span>
              </div>
              <div class="card-header">
                Uniprot ID: <span id="alignUpID"></span>
              </div>
              <div class="card-header">
                Taxonomy: <span id="alignTaxo"></span>
              </div>
              <ul class="list-group list-group-flush" id="alignList"></ul>
            </div>
          </div>
        </div>
      </div>
      <!--BEGIN OUTPUT TABLE-->
      <div>
        <table class="table table-striped table-hover">
		<colgroup>
            <col width="15%" />
            <col width="7%"/>
            <col width="15%" />
            <col width="15%" />
            <col width="20%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
            <col width="7%" />
          </colgroup>
          <thead class="thead-dark">
            <tr>
              <th>
                <span class="theaderAnchor"> Query </span>
              </th>

              <th>
                <span class="theaderAnchor">
                  Length
                </span>
              </th>

              <th>
                <span class="theaderAnchor">Organism </span>
              </th>

              <th>
                <span class="theaderAnchor">Gene Name </span>
              </th>

              <th>
                <span class="theaderAnchor">GO Terms </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Non-viral attachment to host target cell"
                  >Nonviral Adhesion</span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Viral attachment to host target cell"
                  >Viral Adhesion
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Antibiotic resistance proteins"
                  >Antibiotic Resistance
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Virulence effector proteins of plant pathogens">
                  Avirulence Plant
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Counter host immunoglobulin">
                  Counter Immunoglobulin
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Kill host cell by interfering with vital process, lysing, or permeabilizing">
                  Cytotoxicity
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Bacterial or eukaryotic pathogen development in host">
                  Develop in Host
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Disabling of host organ system">
                  Disable Organ
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="RNA silencing or suppressor from plant virus">
                  Plant RNA Silencing
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Induce inflammation">
                  Induce Inflammation
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Non-viral invasion into host cells or through tissues">
                  Nonviral Invasion
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Viral invasion into host cells or through tissues">
                  Viral Invasion
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Liberation of host cells from Extracellular Matrix (ECM) or other cells">
                  Degrade ECM
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Manipulate host process - cytoskeleton dynamics">
                  Host Cytoskeleton
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Manipulate host process - cell cycle">
                  Host Cell Cycle
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Manipulation host process - programmed cell death">
                  Host Cell Death
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Manipulate host process - small GTPase signaling">
                  Host GTPase
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Manipulate host process - transcription">
                  Host Transcription
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Manipulate host process - translation">
                  Host Translation
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Manipulate host process - ubiquitin dynamics">
                  Host Ubiquitin
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Manipulate host process - xenophag">
                  Host Xenophagy
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Non-viral movement in host">
                  Nonviral Movement
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Viral movement in host">
                  Viral Movement
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Toxin production in eubacterial or eukaryotic cells">
                  Toxin Synthase
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Resist host complement components">
                  Resist Complement
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Resist host oxidative killing">
                  Resist Oxidation
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Bacterial secreted effectors of unknown function">
                  Secreted Effector
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Bacterial secretion system components">
                  Secretion
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Manipulate immune detection or suppress antigen presentation">
                  Suppress Detection
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Bacterial countering of pro-inflammatory host immune signaling">
                  Bacterial Counter Signaling
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Viral countering of pro-inflammatory host immune signaling">
                  Viral Counter Signaling
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Transcription factor of virulence in bacteria or eukaryote">
                  Virulence Regulator
                </span>
              </th>
              <th id="sidewayTh">
                <span class="theaderAnchor sideways" title="Non-viral virulence activity">
                  Virulence Activity
                </span>
              </th>
            </tr>
          </thead>
          <tr id = "icon">
            {% for index in range(0,38) %}
            <th>
              <span class="clickablePointer"
		    ><div id="columnResponse_{{index}}" class="sortTag iconAnchor"></div
              ></span>
            </th>
            {% endfor %}
          </tr>
          <tbody id="results-table"></tbody>
        </table>
      </div>
      <div class="pgination-container">
    	<div id="pagination-wrapper"></div>
    </div>
    </div>
  </body>
</html>
