{% extends "base.html" %}
<!DOCTYPE html>
<html>
   <head>
    {% block head %}
      <title>Custom Visualization</title>
      {{ super() }}
   </head>
   {% endblock %}
   {% block nav %}
     {{ super() }}
   {% endblock %}
   {% block content %}
       <div id="custom_visualization">
           <h2 style="text-align: center; margin-bottom: 50px; margin-top: 50px">Custom Visualization</h2>
         <div class="row" style="margin: 50px">
            <div class="col-sm-6">
               <div class="row wrapper">
                  <select class="form-control" id="table1" style="width: 20%; margin-right: 10px"></select>
                  <select class="form-control" id="key1" style="width: 35%; margin-right: 10px"></select>
                  <select class="form-control" id="type1" style="width: 15%; margin-right: 10px"></select>
                  <button id="adv1_confirm" class="btn btn-secondary">Confirm</button>
               </div>
               <div id="adv1" style="margin-top: 20px; min-height: 400px; text-align: center"></div>
            </div>
               <div class="col-sm-6">
                  <div class="row wrapper">
                  <select class="form-control" id="table2" style="width: 20%; margin-right: 10px"></select>
                  <select class="form-control" id="key2" style="width: 35%; margin-right: 10px"></select>
                  <select class="form-control" id="type2" style="width: 15%; margin-right: 10px"></select>
                  <button id="adv2_confirm" class="btn btn-secondary">Confirm</button>
               </div>
                  <div id="adv2" style="margin-top: 20px; min-height: 400px; text-align: center"></div>
               </div>
         </div>
      </div>
    {% endblock %}

    {% block footer %}
      {{ super() }}
      <script src="https://www.distributedgenomics.ca/static/exporting.js"></script>
      <script src="https://www.distributedgenomics.ca/static/offline-exporting.js"></script>
      <script src="{{prepend_path}}/static/dist/custom_visualization.js"></script>
    {% endblock %}
</html>