{% extends "basic_template.html" %}
{% block title %}
{{ super() }}
{% endblock %}
{% block head %}
{{ super() }}
<script>

  function trace_nearby_on() {
    var button = document.getElementById('trace-nearby');
    button.disabled = false;
  }

  function trace_nearby_off() {
    var button = document.getElementById('trace-nearby');
    button.disabled = true;
  }

  function toggle_cont(source) {
    var checkboxes = document.getElementsByClassName("continuity");
    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i] != source)
        checkboxes[i].checked = source.checked;
    }
  }

  function toggle_viz(source) {
    var checkboxes = document.getElementsByClassName("visualization");
    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i] != source)
        checkboxes[i].checked = source.checked;
    }
  }


  function uncheck(targetName) {
    var checkbox = document.querySelector('input[name="' + targetName + '-continuous"]');
    checkbox.checked = false;
    var checkbox = document.querySelector('input[name="all-continuous"]');
    checkbox.checked = false;
  }

  function unset(targetName) {
    var selector = document.querySelector('select[name="' + targetName + '-KO"]');
    selector.selectedIndex = "0";
  }

  function hide_init_column() {
    for (let button of document.getElementsByClassName('init-state-select'))
      button.setAttribute("disabled", "disabled");
  }

  function show_init_column() {
    for (let button of document.getElementsByClassName('init-state-select')) {
      button.removeAttribute("disabled");
      if (button.selectedIndex == 0)
        button.selectedIndex = 2; // i.e. select '1'
    }
  }


</script>
{% endblock %}
{% block content %}

<h1>Model Options</h1>

<center>
    <div class="w3-container w3-margin w3-left-align" style="width:80%">
        <form class="w3-container" method="post" action="/compute/">
            <div class="w3-row-padding">
                <table id='config-table' class="w3-table-all w3-margin w3-hoverable">
                    <tr class="w3-us-blue">
                        <th>Variable</th>
                        <th><input type="checkbox" name="all-continuous" onClick="toggle_viz(this)"> Visualize</th>
                        <th><input type="checkbox" name="all-continuous" onClick="toggle_cont(this)"> Continuous</th>
                        <th>Forcing</th>
                        <th>Initial State</th>
                    </tr>
                    {% for variable in variables %}
                    <tr>
                        <td>{{ variable }}</td>
                        <td>
                            <input type="checkbox"
                                   name="{{variable}}-visualized"
                                   class="visualization"
                                   value="{{variable}}">
                        </td>
                        <td>
                            <input type="checkbox"
                                   name="{{variable}}-continuous"
                                   class="continuity"
                                   value="{{variable}}"
                                   onclick="unset('{{variable}}')">
                        </td>
                        <td>
                            <select name="{{variable}}-KO" onchange="uncheck('{{variable}}')">
                                <option selected value="None"></option>
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select>
                        </td>
                        <td>
                            <select class="init-state-select" name="{{variable}}-init">
                                <option selected disabled value="None"></option>
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="*">*</option>
                            </select>
                        </td>
                    </tr>
                    {% endfor %}
                </table>
                <div class="w3-cell-row w3-us-blue w3-margin">
                    <div class="w3-container w3-cell w3-mobile">
                        <div class="w3-container">
                            <input type="radio" class="w3-radio w3-margin" id="cycles" name="action" value="cycles"
                                   onclick="hide_init_column(); trace_nearby_off()"
                                   checked>
                            <label for="cycles">Sample fixed points and cycles <select name="num_samples">
                                <option selected value="1000">1,000</option>
                                <option value="10000">10,000</option>
                                <option value="100000">100,000</option>
                                <option value="1000000">1,000,000</option>
                                <option value="10000000">10,000,000</option>
                                <option value="100000000">100,000,000</option>
                                <option value="1000000000">1,000,000,000</option>
                            </select> times </label>
                        </div>
                    </div>
                    <div class="w3-container w3-cell w3-mobile">
                        <input type="radio" class="w3-radio w3-margin" id="fixed_points" name="action"
                               onclick="hide_init_column(); trace_nearby_off()"
                               value="fixed_points">
                        <label for="fixed_points">Find all fixed points</label>
                    </div>
                    <div class="w3-container w3-cell w3-mobile">
			<div class="w3-container w3-mobile">
			  <input type="radio" class="w3-radio w3-margin" id="trace" name="action"
				 onclick="show_init_column(); trace_nearby_on()"
				 value="trace">
                          <label for="trace" >Trace state(s)</label>
			</div>
			<div class="w3-container w3-mobile">
			  <input type="checkbox" class="w3-check" id="trace-nearby" name="trace-nearby-checkbox" value="Yes" disabled>
			  <label for="trace-nearby">Include nearby states</label>
			</div>
                    </div>
                </div>
                <input class="w3-btn w3-us-red w3-margin w3-round" type="submit" value="Compute">
            </div>
        </form>
    </div>
</center>

<script>
    hide_init_column()
</script>

{% endblock %}
