<!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 v{{ 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 full-width">
          <colgroup>
            <col width="15%" />
            <col width="7%"/>
            <col width="15%" />
            <col width="15%" />
            <col width="20%" />
            <col width="3%" />
            <col width="3%" />
            <col width="3%" />
            <col width="3%" />
            <col width="3%" />
            <col width="3%" />
            <col width="3%" />
            <col width="3%" />
            <col width="3%" />
          </colgroup>
          <thead class="thead-dark">
            <tr>
              <th>
                <span class="theaderAnchor"> Query </span>
                <span class="clickablePointer"
                  ><div id="columnResponse_0" class="sortTag iconAnchor"></div
                ></span>
              </th>

              <th>
                <span class="theaderAnchor">
                  Length
                </span>
                <span class="clickablePointer">
                  <div id="columnResponse_1" class="sortTag iconAnchor"></div>
                </span>
              </th>

              <th>
                <span class="theaderAnchor">Organism </span>
                <span class="clickablePointer"
                  ><div id="columnResponse_2" class="sortTag iconAnchor"></div
                ></span>
              </th>

              <th>
                <span class="theaderAnchor">Gene Name </span>
                <span class="clickablePointer"
                  ><div id="columnResponse_3" class="sortTag iconAnchor"></div
                ></span>
              </th>

              <th>
                <span class="theaderAnchor">GO Terms </span>
              </th>
              <th class="sidewayTh">
                <span class="theaderAnchor sideways" title="Attachment to host target cell"
                  >Adhesion
                  <span class="clickablePointer verticalPointer">
                    <div
                      id="columnResponse_5"
                      class="sortTag iconAnchor"
                    ></div> </span
                ></span>
              </th>
              <th class="sidewayTh">
                <span class="theaderAnchor sideways" title="Bacterial secretion system components"
                  >Secretion
                  <span class="clickablePointer verticalPointer">
                    <div id="columnResponse_6" class="sortTag iconAnchor"></div>
                  </span>
                </span>
              </th>
              <th class="sidewayTh">
                <span class="theaderAnchor sideways" title="Manipulation of host programmed cell death"
                  >Host Cell Death
                  <span class="clickablePointer verticalPointer">
                    <div
                      id="columnResponse_7"
                      class="sortTag iconAnchor"
                    ></div> </span
                ></span>
              </th>
              <th class="sidewayTh">
                <span class="theaderAnchor sideways" title="Antibiotic resistance proteins">
                  Antibiotic
                  <span class="clickablePointer verticalPointer">
                    <div id="columnResponse_8" class="sortTag iconAnchor"></div>
                  </span>
                </span>
              </th>
              <th class="sidewayTh">
                <span class="theaderAnchor sideways" title="Invasion into host cells or through tissues">
                  Invasion
                  <span class="clickablePointer verticalPointer">
                    <div
                      id="columnResponse_9"
                      class="sortTag iconAnchor"
                    ></div> </span
                ></span>
              </th>
              <th class="sidewayTh">
                <span class="theaderAnchor sideways" title="Active manipulation of the host immune effectors">
                  Evasion
                  <span class="clickablePointer verticalPointer">
                    <div
                      id="columnResponse_10"
                      class="sortTag iconAnchor"
                    ></div>
                  </span>
                </span>
              </th>
              <th class="sidewayTh">
                <span class="theaderAnchor sideways" title="Directly kills host cells by interfering with a vital process">
                  Cytotoxicity
                  <span class="clickablePointer verticalPointer">
                    <div
                      id="columnResponse_11"
                      class="sortTag iconAnchor"
                    ></div>
                  </span>
                </span>
              </th>
              <th class="sidewayTh">
                <span class="theaderAnchor sideways" title="Degradation of host extracellular matrix">
                  Degrade ECM<span class="clickablePointer verticalPointer">
                    <div
                      id="columnResponse_12"
                      class="sortTag iconAnchor"
                    ></div>
                  </span>
                </span>
              </th>
              <th class="sidewayTh">
                <span class="theaderAnchor sideways" title="Disabling of host organ system">
                  Disable Organ
                  <span class="clickablePointer verticalPointer">
                    <div
                      id="columnResponse_13"
                      class="sortTag iconAnchor"
                    ></div>
                  </span>
                </span>
              </th>
            </tr>
          </thead>
          <tbody id="results-table"></tbody>
        </table>
      </div>
      <div class="pgination-container">
    	<div id="pagination-wrapper"></div>
    </div>
    </div>
  </body>
</html>
