{% extends "base.html" %}
<!DOCTYPE html>
<html>
   <head>
      {% block head %}
      <title>Gene search</title>
      {{ super() }}
      <link rel=stylesheet type=text/css href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
      <link rel=stylesheet type=text/css href="https://www.distributedgenomics.ca/static/igv.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
        {% endblock %}
   </head>
<body>
   {% block nav %}
     {{ super() }}
   {% endblock %}
   {% block content %}
      <div id="gene_search">
         <div class="container-fluid">
            <h2 style="text-align: center; margin-bottom: 100px" class="title" id="title">Gene Search</h2>

            <form class="wrapper" id="gene_search_parent" action="javascript:submit()">
            <input type="text" id="request" name="search" placeholder="Search.."/>
            <button id="searchBtn" class="btn btn-primary" name="submit">Submit</button>
            </form>
            <div class="loader mx-auto" id="loader" style="display: none"></div>
             <div id="geneTable_wrap" style="overflow: scroll; display: none"><table id="geneTable" class="table table-striped table-bordered nowrap"></table></div>

            <div class="container wrapper">
               <div id="readGroupSelector" class="form-inline" style="display: none; margin-top: 50px; margin-bottom: 50px">
                   <div class="form-group">
                    <label for="rgSelect">Select up to three read group sets: </label>
                    <select class="selectpicker" id="rgSelect" data-live-search="true" multiple data-max-options="3">
                    </select>
                     <button class="btn btn-primary" id="confirmRG">Confirm</button>
                  </div>
               </div>
            </div>
            <div id="igvSample" ></div>
         </div>
      </div>
</body>
   {% endblock %}

    {% block footer %}
      {{ super() }}
      <script src="https://www.distributedgenomics.ca/static/jquery-ui.min.js"></script>
      <script src="https://www.distributedgenomics.ca/static/jquery.dataTables.min.js"></script>
      <script type="text/javascript" src="https://www.distributedgenomics.ca/static/igv-2.0.0.2.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
      <script src="{{prepend_path}}/static/dist/gene_search.js"></script>
    {% endblock %}
</html>