<!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 }};
       var funsocs = {{funsocs_count}};
       var column_count = {{column_count}};
    </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>
        <h5>Mode: 
        <div class="badge badge-primary">
          {{ mode }}
        </div> </h5>
        <h5>Runtime flags: {{ flag }}</h5>
        <h5>Sequence File: 
        <div class="badge badge-primary">
          {{ input_file }}
        </div> </h5>
        <h5>Input files last modified:</h5>
        <h5>
        {% for file in mtimes %}
        <div class="badge badge-primary">
          {% if file == 'tsv' %} SeqScreen report {% elif file == 'fasta' %}
          Sequence file {% elif file == 'xml' %} Blast output {% endif %}

          {{ mtimes[file] }}
        </div>
        {% endfor %}
        </h5>
      </div>
      <div class="container">
        <h4>Summary:</h4>
        <div class="info btn badge-secondary">
          Sequences provided <span class="badge">{{ seq_len }}</span>
        </div>
        {% for funsocs in funsocss %}
        <div class="info btn badge-{{ funsocs.style }}" id="funsocs{{loop.index0}}">
          {{ funsocs.name }} BPOC <span class="badge">{{ funsocs.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 class="warning"><div id= "sequence_warning" > </div></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 funsocs in funsocs_count %}
                    <div
                      class="badge-{{ funsocs.style }} form-check form-check-inline mb-2"
                    >
                      <input
                        class="form-check-input"
                        type="checkbox"
                        id="modalFunsocs{{ loop.index0 }}"
                      />
                      <label
                        class="form-check-label"
                        for="modalFunsocs{{ loop.index0 }}"
                        >{{ funsocs.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%" />
            {% for index in range(5,column_count) %}
            <col width="7%" />
	    {% endfor %}
          </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>
              {% for funsocs in funsocs_names %}
              <th id="sidewayTh">
                <span class="theaderAnchor sideways"
		      >{{funsocs.name}}</span>
                {% if (funsocs.title != 0) %}
                <span class="clickablePointer iconAnchor">
                <div class= "help-tip"><p>{{funsocs.title}}</p></div></span>
                {% endif %}
              </th>
              {% endfor %}
            </tr>
          </thead>
          <tr id = "icon">
            {% for index in range(column_count) %}
            <th>
              {% if ( index != 4) %}
              <span class="clickablePointer"
		    ><div id="columnResponse_{{index}}" value="{{index}}" class="sortTag iconAnchor"></div
              ></span>
              {% endif %}
            </th>
            {% endfor %}
          </tr>
          <tbody id="results-table"></tbody>
        </table>
      </div>
      <div class="pgination-container">
    	<div id="pagination-wrapper"></div>
    </div>
    </div>
  </body>
</html>
