<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
      <meta name="description" content="" />
      <meta name="author" content="" />
      <title>Dashboard</title>
      <link rel="stylesheet" type="text/css" href="/static/css/nyan.css">
	   <script src="/static/js/nyan.js" type="text/javascript"></script>
      <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />
      <link href="/static/css/styles.css" rel="stylesheet" />
      <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
      <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.min.js"></script>
   </head>
   <body class="sb-nav-fixed">
      <script>
         var nyanCat;
         var alreadyrunflag=0 //flag to indicate whether target function has already been run

         if (document.addEventListener)
            document.addEventListener("DOMContentLoaded", function(){
               alreadyrunflag=1; ready();
            }, false)
         else if (document.all && !window.opera){
            document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>')
            var contentloadtag=document.getElementById("contentloadtag")
            contentloadtag.onreadystatechange=function(){
               if (this.readyState=="complete"){
                  alreadyrunflag=1
                  ready();
               }
            }
         }

         window.onload=function(){
            ready();
         }

         function ready() {

            //timedCount();
         }

         function timedCount() {
            percent = document.getElementById("rainbow").style.width;
            percent = percent.replace("px","");
            newPercent = parseInt(percent) + 1;
            nyanCat.setPercent(newPercent);
            if(newPercent +15 < nyanCat.width) {
               timer = setTimeout("timedCount()", 100);
            }
         }


         $(function(){
            nyanCat = new nyanCat(100);
            var requiredCheckboxes = $('.implem :checkbox[required]');
            requiredCheckboxes.change(function(){
               if(requiredCheckboxes.is(':checked')) {
                  requiredCheckboxes.removeAttr('required');
               } else {
                  requiredCheckboxes.attr('required', 'required');
               }
            });
            var requiredCheckboxes_test = $('.test :checkbox[required]');
            requiredCheckboxes_test.change(function(){
               if(requiredCheckboxes_test.is(':checked')) {
                  requiredCheckboxes_test.removeAttr('required');
               } else {
                  requiredCheckboxes_test.attr('required', 'required');
               }
            });
            var progress_class = $('.progress');
            var progress_bar = $('.progress-bar');
            var submitter = $('.submitter');
            function check_progress() {
               var socket = io.connect('http://' + document.domain + ':' + location.port);

               socket.on('progress_update', function(data) {
                   console.log(data.progress);
                   console.log({{ iteration }});

                   if (data.progress === "None") {
                       progress_class.css('display','none');
                       $('#rainbowContainer').css('display','none');
                       $('#rainbowContainer2').css('display','none');
                       submitter.removeAttr('disabled');
                       nyanCat.setPercent(0);
                   } else if (parseInt(data.progress) >= 0) {
                       progress_class.css('display','inherit');
                       $('#rainbowContainer').css('display','inherit');
                       $('#rainbowContainer2').css('display','inherit');

                       submitter.attr("disabled", true);
                       progress_bar.attr("aria-valuenow", data.progress);
                       var percent = parseInt(data.progress) / parseInt({{ iteration }}) * 100;
                       progress_bar.css('width', percent + '%');
                       nyanCat.setPercent(percent);

                       if (percent == 100) {
                           socket.disconnect();
                           progress_class.css('display','none');
                           submitter.removeAttr('disabled');
                           $('#rainbowContainer').css('display','none');
                           $('#rainbowContainer2').css('display','none');
                       }
                   }
               });
           }

           check_progress();
         });
      </script>
      <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
         <!-- Navbar Brand-->
         <a class="navbar-brand ps-3" href="index.html">Panther</a>
         <!-- Sidebar Toggle-->
         <button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
         <!-- Navbar-->
         <ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
            <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
               <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#!">Settings</a></li>
                  <li><a class="dropdown-item" href="#!">Activity Log</a></li>
               </ul>
            </li>
         </ul>
      </nav>
      <div id="layoutSidenav">
         <div id="layoutSidenav_nav">
            <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
               <div class="sb-sidenav-menu">
                  <div class="nav">
                     <div class="sb-sidenav-menu-heading">Core</div>
                     <a class="nav-link" href="index.html">
                        <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                        Tests
                     </a>
                     <a class="nav-link" href="creator.html">
                        <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                        Tests editor
                     </a>
                     <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
                        <div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
                        Tests results
                        <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                     </a>
                     <div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
                        <nav class="sb-sidenav-menu-nested nav">
                            <a class="nav-link" href="results.html">
                                <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                                Tests results viewer
                            </a>
                            <a class="nav-link" href="results-global.html">
                              <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                              Tests results global
                            </a>
                        </nav>
                    </div>
                  </div>
               </div>
               <div class="sb-sidenav-footer">
                  version 0.1
               </div>
            </nav>
         </div>
         <div id="layoutSidenav_content">
            <main>
                  <div class="container-fluid px-4">
                     <h1>Configure Experiment</h1>
                     <form method="post">
                        {% for field in form %}
                              <div>
                                 <label>{{ field.label.text }}</label>
                                 {{ field }}
                                 {% if field.errors %}
                                    <ul>
                                          {% for error in field.errors %}
                                             <li>{{ error }}</li>
                                          {% endfor %}
                                    </ul>
                                 {% endif %}
                              </div>
                        {% endfor %}
                        <button type="submit">Submit</button>
                     </form>




                     <h1>
                        Tests
                     </h1>
                     <div class="rainbowContainer2">
                        <h3 id="rainbowContainer2">Current experiments states</h3>
                        <!-- <div class="progress" style="width: 75%; margin: auto; margin-top: 5px;margin-bottom: 5px;">
                              <div class="progress-bar progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        -->
                        <div>
                           <div id="rainbowContainer" style="margin: auto; margin-top: 5px;margin-bottom: 5px;">
                              <div id="rainbow" style="width: 1px;"></div>
                              <div id="nyanCat"></div>
                              <div class="clearDiv"></div>
                           </div>
                        </div>
                        <h3>Tested protocol</h3>
                           <div class="d-grid gap-2">
                           <select onchange="location = this.value;" class="form-select btn btn-primary" aria-label="Select protocol">
                              <option selected value="index.html?prot={{ current_protocol }}">{{ current_protocol.upper() }}</option>
                              {% for prot in supported_protocols %}
                                 {% if prot != current_protocol %}
                                 <option value="index.html?prot={{ prot }}">{{ prot.upper() }}</option>
                                 {% endif %}
                              {% endfor %}
                           </select>
                        </div>

                        <form method=post enctype=multipart/form-data>
                           <div class="card-body">
                           {% for elem in json_arg %}
                              <div class="card-group">
                                 {% for group in elem %}
                                 <div class="card">
                                    <div class="card-body">
                                       <p class="card-text">
                                           <div class="col-auto">
                                               <label for="{{ group }}" class="col-form-label"><b>{{ group }}</b></label>
                                           </div>
                                           {% if elem[group][-1]["is_mutually_exclusive"] %}
                                                {% for args in elem[group] %}
                                                <div class="form-check">
                                                   {% if args["default"] %}
                                                         <input class="form-check-input"  aria-describedby="{{ args["name"] }}Help" type="radio" name="{{ args["description"] }}" value={{ args["name"] }} id={{ args["name"] }} checked>
                                                   {% else %}
                                                         <input class="form-check-input"  aria-describedby="{{ args["name"] }}Help" type="radio" name="{{ args["description"] }}" value={{ args["name"] }} id={{ args["name"] }}>
                                                   {% endif %}
                                                   <label class="form-check-label" for={{ args["name"] }}>
                                                   {{ args["name"] }}
                                                   </label>
                                                   <div id="{{ args["name"] }}Help" class="form-text">{{ args["help"] }}</div>
                                                </div>
                                                {% endfor %}
                                           {% else %}
                                           {% for args in elem[group] %}
                                                {% if args["type"] == "<class 'int'>" %}
                                                   <row>
                                                      {% if "choices" in args and args["choices"] %}
                                                         <label for="{{ args["name"] }}" class="form-label">{{ args["name"] }}</label>
                                                         <input type="range" aria-describedby="{{ args["name"] }}Help" value="{{ args["choices"][0] }}" min="{{ args["choices"][0] }}" max="{{ args["choices"]|length }}" class="form-range" list="markers_{{args["name"]}}" name="{{ args["name"] }}" id={{ args["name"] }}>
                                                         <datalist id="markers_{{args["name"]}}">
                                                            {% for choice in args["choices"] %}
                                                            <option label="{{ choice }} "value="{{ choice }}"></option>
                                                            {% endfor %}
                                                         </datalist>
                                                      {% else %}
                                                         <label for="{{ args["name"] }}" class="form-label">{{ args["name"] }}</label>
                                                         <input type="range" aria-describedby="{{ args["name"] }}Help" class="form-range" value="{{ args["default"] }}" min="0" max="{{ (args["default"]|int+1)*5 }}" name="{{ args["name"] }}" id={{ args["name"] }} oninput="this.nextElementSibling.value = this.value">
                                                         <output>{{ args["default"] }}</output>
                                                         <div id="{{ args["name"] }}Help" class="form-text">{{ args["help"] }}</div>
                                                      {% endif %}
                                                   </row>
                                                {% elif  args["type"] == "<class 'float'>" %}
                                                   <row>
                                                      <label for="{{ args["name"] }}" class="form-label">{{ args["name"] }}</label>
                                                      <input type="range" aria-describedby="{{ args["name"] }}Help" class="form-range" value="{{ args["default"] }}" step="0.25" min="0" max="100" name="{{ args["name"] }}" id={{ args["name"] }} oninput="this.nextElementSibling.value = this.value">
                                                      <output>{{ args["default"] }}</output>
                                                      <div id="{{ args["name"] }}Help" class="form-text">{{ args["help"] }}</div>
                                                   </row>
                                                {% elif  args["type"] == "bool" %}
                                                   <div class="form-check">
                                                      {% if args["default"] %}
                                                         <input class="form-check-input"  aria-describedby="{{ args["name"] }}Help" type="checkbox" name="{{ args["name"] }}" value=true id={{ args["name"] }} checked>
                                                         <input type="hidden"   name="{{ args["name"] }}" value="false" />
                                                      {% else %}
                                                         <input class="form-check-input"  aria-describedby="{{ args["name"] }}Help" type="checkbox" name="{{ args["name"] }}" value=true id={{ args["name"] }}>
                                                         <input type="hidden"   name="{{ args["name"] }}" value="false" />
                                                      {% endif %}
                                                      <label class="form-check-label" for={{ args["name"] }}>
                                                      {{ args["name"] }}
                                                      </label>
                                                      <div id="{{ args["name"] }}Help" class="form-text">{{ args["help"] }}</div>
                                                   </div>
                                                {% elif  "dir" in args["name"] %}
                                                   <div class="mb-3">
                                                      <label for="{{ args["name"] }}" class="form-label">{{ args["name"] }}</label>
                                                      <input class="form-control" aria-describedby="{{ args["name"] }}Help" name="{{ args["name"] }}" type="file" id="{{ args["name"] }}" multiple>
                                                      <div id="{{ args["name"] }}Help" class="form-text">
                                                         {{ args["help"] }}
                                                         Please select files from the database directory
                                                      </div>
                                                      <input class="form-control"  name="{{ args["name"] }}" value="" type="text" id="{{ args["name"] }}">
                                                   </div>
                                                {% else %}
                                                   <input class="form-control" aria-describedby="{{ args["name"] }}Help" type="text" name="{{ args["name"] }}" aria-label="{{ args["help"] }}">
                                                   <div id="{{ args["name"] }}Help" class="form-text">{{ args["help"] }}</div>
                                                {% endif %}
                                                <hr>
                                             {% endfor %}
                                           {% endif %}
                                       </p>
                                    </div>
                                 </div>
                                 {% endfor %}
                              </div>
                           {% endfor %}
                           </div>
                           <input type="hidden" name="boundary" value="experiment separation">
                           <div class="card-body">
                              {% for elem in prot_arg %}
                              <div class="card-group">
                                 {% for group in elem %}
                                 <div class="card">
                                    <div class="card-body">
                                       <p class="card-text">
                                           <div class="col-auto">
                                               <label for="{{ group }}" class="col-form-label"><b>{{ group }}</b></label>
                                           </div>
                                           {% if elem[group][-1]["is_mutually_exclusive"] %}
                                                {% for args in elem[group] %}
                                                <div class="form-check">
                                                   {% if args["default"] %}
                                                         <input class="form-check-input"  aria-describedby="{{ args["name"] }}Help" type="radio" name="{{ args["description"] }}" value={{ args["name"] }} id={{ args["name"] }} checked>
                                                   {% else %}
                                                         <input class="form-check-input"  aria-describedby="{{ args["name"] }}Help" type="radio" name="{{ args["description"] }}" value={{ args["name"] }} id={{ args["name"] }}>
                                                   {% endif %}
                                                   <label class="form-check-label" for={{ args["name"] }}>
                                                   {{ args["name"] }}
                                                   </label>
                                                   <div id="{{ args["name"] }}Help" class="form-text">{{ args["help"] }}</div>
                                                </div>
                                                {% endfor %}
                                           {% else %}
                                           {% for args in elem[group] %}
                                                {% if args["type"] == "<class 'int'>" %}
                                                   <row>
                                                      {% if "choices" in args and args["choices"] %}
                                                         <label for="{{ args["name"] }}" class="form-label">{{ args["name"] }}</label>
                                                         <input type="range" aria-describedby="{{ args["name"] }}Help" value="{{ args["choices"][0] }}" min="{{ args["choices"][0] }}" max="{{ args["choices"]|length }}" class="form-range" list="markers_{{args["name"]}}" name="{{ args["name"] }}" id={{ args["name"] }}>
                                                         <datalist id="markers_{{args["name"]}}">
                                                            {% for choice in args["choices"] %}
                                                            <option label="{{ choice }} "value="{{ choice }}"></option>
                                                            {% endfor %}
                                                         </datalist>
                                                      {% else %}
                                                         <label for="{{ args["name"] }}" class="form-label">{{ args["name"] }}</label>
                                                         <input type="range" aria-describedby="{{ args["name"] }}Help" class="form-range" value="{{ args["default"] }}" min="0" max="{{ (args["default"]|int+1)*5 }}" name="{{ args["name"] }}" id={{ args["name"] }} oninput="this.nextElementSibling.value = this.value">
                                                         <output>{{ args["default"] }}</output>
                                                      {% endif %}
                                                      <div id="{{ args["name"] }}Help" class="form-text">{{ args["help"] }}</div>
                                                   </row>
                                                {% elif  args["type"] == "<class 'float'>" %}
                                                   <row>
                                                      <label for="{{ args["name"] }}" class="form-label">{{ args["name"] }}</label>
                                                      <input type="range" aria-describedby="{{ args["name"] }}Help" class="form-range" value="{{ args["default"] }}" step="0.25" min="0" max="100" name="{{ args["name"] }}" id={{ args["name"] }} oninput="this.nextElementSibling.value = this.value">
                                                      <output>{{ args["default"] }}</output>
                                                      <div id="{{ args["name"] }}Help" class="form-text">{{ args["help"] }}</div>
                                                   </row>
                                                {% elif  args["type"] == "bool" %}
                                                   <div class="form-check">
                                                      {% if args["default"] %}
                                                         <input class="form-check-input"  aria-describedby="{{ args["name"] }}Help" type="checkbox" name="{{ args["name"] }}" value=true id={{ args["name"] }} checked>
                                                         <!-- <input type="hidden"   name="{{ args["name"] }}" value="false" /> -->
                                                      {% else %}
                                                         <input class="form-check-input"  aria-describedby="{{ args["name"] }}Help" type="checkbox" name="{{ args["name"] }}" value=true id={{ args["name"] }}>
                                                         <!-- <input type="hidden"   name="{{ args["name"] }}" value="false" /> -->
                                                      {% endif %}
                                                      <label class="form-check-label" for={{ args["name"] }}>
                                                      {{ args["name"] }}
                                                      </label>
                                                      <div id="{{ args["name"] }}Help" class="form-text">{{ args["help"] }}</div>
                                                   </div>
                                                {% elif  "dir" in args["name"]  %}
                                                   <div class="mb-3">
                                                      <label for="{{ args["name"] }}" class="form-label">{{ args["name"] }}</label>
                                                      <input class="form-control" aria-describedby="{{ args["name"] }}Help" name="{{ args["name"] }}" type="file" id="{{ args["name"] }}" multiple>
                                                      <div id="{{ args["name"] }}Help" class="form-text">
                                                         {{ args["help"] }}
                                                         Please select files from the database directory
                                                      </div>
                                                      <input class="form-control"  name="{{ args["name"] }}" value="" type="text" id="{{ args["name"] }}">
                                                   </div>
                                                {% else %}
                                                   {% if "choices" in args and args["choices"] %}
                                                         <label for="{{ args["name"] }}" class="form-label">{{ args["name"] }}</label>
                                                         <input type="range" aria-describedby="{{ args["name"] }}Help" value="{{ args["choices"][0] }}" min="1" max="{{ args["choices"]|length }}" class="form-range" list="markers_{{args["name"]}}" name="{{ args["name"] }}" id={{ args["name"] }}>
                                                         <datalist class="datalist-text" id="markers_{{args["name"]}}">
                                                            {% for choice in args["choices"] %}
                                                            <option label="{{ choice }} "value="{{ choice }}"></option>
                                                            {% endfor %}
                                                         </datalist>
                                                   {% else %}
                                                      <input class="form-control" aria-describedby="{{ args["name"] }}Help" type="text" name="{{ args["name"] }}" aria-label="{{ args["help"] }}">
                                                      <div id="{{ args["name"] }}Help" class="form-text">{{ args["help"] }}</div>
                                                   {% endif %}
                                                {% endif %}
                                                <hr>
                                             {% endfor %}
                                           {% endif %}
                                       </p>
                                    </div>
                                 </div>
                                 {% endfor %}
                              </div>
                           {% endfor %}
                           </div>
                           <div class="card-body">
                              <div class="card-group">
                                 {% for group in tests_enable %}
                                 <div class="card">
                                    <div class="card-body">
                                       <p class="card-text">
                                          <div class="col-auto">
                                             <label for="{{ group }}" class="col-form-label"><b>{{ group | replace("_"," ") | upper }}</b></label>
                                          </div>
                                       </p>
                                       {% for args in tests_enable[group] %}
                                       <div class="form-check">
                                       <input class="form-check-input"  aria-describedby="{{ args }}Help" type="checkbox" name="{{ args }}" value=true id={{ args }}>
                                       <input type="hidden"   name="{{ args }}" value="false" />
                                       <label class="form-check-label" for={{ args }}>
                                          {{ args }}
                                       </label>
                                       <div id="{{ args }}Help" class="form-text">TODO (parse from config) </div>
                                       </div>
                                       {% endfor %}
                                    </div>
                                 </div>
                                 {% endfor %}
                              </div>
                           </div>
                           <div class="card-body">
                              <div class="card-group">
                                 <div class="card">
                                    <div class="card-body">
                                       <p class="card-text">
                                          <div class="col-auto">
                                             <label for="implem" class="col-form-label"><b>Implementation to test</b></label>
                                          </div>
                                       </p>
                                       <div class="col-auto">
                                          {% for group in implementation_enable %}
                                          <div class="form-check">
                                             {% if implementation_enable[group] %}
                                             <input class="form-check-input"  aria-describedby="{{ group }}Help" type="checkbox" name="{{ group }}" value=true id={{ group }}>
                                             <input type="hidden"   name="{{ group }}" value="false" />
                                             <label class="form-check-label" for={{ group }}>
                                                {{ group }}
                                             </label>
                                             <div id="{{ group }}Help" class="form-text">TODO (parse from config) </div>
                                             </div>
                                             {% else %}
                                             <input disabled class="form-check-input"  aria-describedby="{{ group }}Help" type="checkbox" name="{{ group }}" value=true id={{ group }}>
                                             <input disabled type="hidden"   name="{{ group }}" value="false" />
                                             <label class="form-check-label" for={{ group }}>
                                                {{ group }}
                                             </label>
                                             <div id="{{ group }}Help" class="form-text">TODO (parse from config) </div>
                                             </div>
                                             {% endif %}
                                          {% endfor %}
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <p class="card-text">
                              {% if iteration and iteration > 0 %}
                                 <div class="d-grid gap-2">
                                    <button class="btn btn-primary submitter" disabled type=submit>Start Experiments</button>
                                 </div>
                              {% else %}
                                 <div class="d-grid gap-2">
                                    <button class="btn btn-primary submitter" type=submit>Start Experiments</button>
                                 </div>
                              {% endif %}
                              </p>
                        </form>
               <footer class="py-4 bg-light mt-auto">
                  <div class="container-fluid px-4">
                     <div class="d-flex align-items-center justify-content-between small">
                        <div class="text-muted">Copyright &copy; QUIC Ivy 2022 - Christophe Crochet</div>
                        <div>
                           <a href="#">Privacy Policy</a>
                           &middot;
                           <a href="#">Terms &amp; Conditions</a>
                        </div>
                     </div>
                  </div>
               </footer>
            </main>
         </div>
      </div>
      </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
      <script src="/static/js/scripts.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
      <script src="/static/js/datatables-simple-demo.js"></script>
   </body>
</html>
