{% macro resource_tab_footer(partitions, simple_only) %}
<h4 class="subheading">Available resources</h4>
<table class="table">
  <tr class="active">
    <th style="padding-right: 10rem;">Partition</th>
    <th style="text-align: center; width: 50%;">Idle CPU cores</th>
    <th style="text-align: center; width: 50%;">Idle nodes</th>
  </tr>
  {% for name, partition in partitions.items() %}
  {% if partition.simple or not simple_only %}
  <tr>
    <th>{{ name }}</th>
    <th style="text-align: center">{{ partition['ncores_idle'] }} <small>/ {{ partition['ncores_total'] }}</small></th>
    <th style="text-align: center">{{ partition['nnodes_idle'] }} <small>/ {{ partition['nnodes_total'] }}</small></th>
  </tr>
  {% endif %}
  {% endfor %}
</table>
{% endmacro %}

{% block stylesheet %}
<link href="/hub/form/option_form.css?v={{hash_option_form_css}}" rel="stylesheet" />
{% endblock %}

<script>
window.SLURM_DATA = JSON.parse('{{ jsondata }}');
</script>
<script
  src="/hub/form/option_form.js?v={{hash_option_form_js}}"
  type="text/javascript"
  charset="utf-8"
></script>
<ul class="nav nav-tabs nav-justified">
  <li class="active">
    <a data-toggle="tab" href="#home" id="simple_tab_link">
      Simple
    </a>
  </li>
  <li><a data-toggle="tab" href="#menu1" id="advanced_tab_link">Advanced</a></li>
</ul>
<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h4 class="subheading">Partition</h4>
    <div class="radio-toolbar">
      {% for name, partition in partitions.items() %}
      {% if partition.simple %}
      <input
        type="radio"
        name="partition_simple"
        id="{{ name }}"
        value="{{ name }}"
        {% if name == default_partition %}
        checked
        {% endif %}
      />
      <label for="{{ name }}">
        <p>{{ partition.description }} <span class="label-extra-info">({{ partition.architecture }})</span></p>
        <p class="label-extra-info">Partition: {{ name }}</p>
      </label>
      {% endif %}
      {% endfor %}
    </div>
    <h4 class="subheading">CPUs</h4>
    <div class="radio-toolbar">
      <input
        type="radio"
        id="minimumCore"
        name="nprocs_simple"
        value="1"
        checked
      />
      <label for="minimumCore">1 core</label>

      <input
        type="radio"
        id="twoCores"
        name="nprocs_simple"
        value="2"
      />
      <label for="twoCores">2 cores</label>

      <input
        type="radio"
        id="fourCores"
        name="nprocs_simple"
        value="4"
      />
      <label for="fourCores">4 cores</label>

      <input
        type="radio"
        id="quarterCore"
        name="nprocs_simple"
      />
      <label for="quarterCore"></label>
    </div>

    <div id="gpu_simple" hidden>
    <h4 class="subheading">GPUs</h4>
    <div class="radio-toolbar">
      {% set ns = namespace(max_ngpus=0) %}
      {% for partition in partitions.values() %}
        {% if partition.simple and ns.max_ngpus <= partition.max_ngpus %}
          {% set ns.max_ngpus = partition.max_ngpus %}
        {% endif %}
      {% endfor %}
      {% for index in range(ns.max_ngpus+1) %}
      <input
        type="radio"
        id="{{ index }}Gpu"
        name="ngpus_simple"
        value="{{ index }}"
      />
      <label for="{{ index }}Gpu">{{ index }}</label>
      {% endfor %}
    </div>
    </div>
    <h4 class="subheading">Options</h4>
    <div class="form-container">
      <label for="environment_simple" accesskey="e">
        Jupyter environment:
      </label>
      <select
        name="environment_simple"
        id="environment_simple"
      >
      <optgroup id="environment_simple_default" label="Default"></optgroup>
      <optgroup id="environment_simple_custom" label="Custom" hidden></optgroup>
      </select>
      <label for="jupyterlab_simple">Launch JupyterLab:</label>
      <input
        type="checkbox"
        id="jupyterlab_simple"
        name="jupyterlab_simple"
        checked
      />
      <label for="runtime_simple">Job duration:</label>
      <select
        name="runtime_simple"
        id="runtime_simple"
      >
        <option value="1" selected>1 hour</option>
        <option value="2">2 hours</option>
        <option value="4">4 hours</option>
        <option value="6">6 hours</option>
        <option value="8">8 hours</option>
        <option value="12">12 hours</option>
      </select>
    </div>
    {% block simple_tab_footer %}
    {{ resource_tab_footer(partitions, simple_only=true) }}
    {% endblock simple_tab_footer %}
  </div>
  <div id="menu1" class="tab-pane fade indent-right" align="right">
    <div class="form-container">
    <label for="partition" accesskey="p">
      Partition <span class="label-extra-info">(--partition)</span>:
    </label>
    <select
      name="partition"
      id="partition"
    >
      {% for name in partitions.keys() %}
      <option value="{{ name }}">{{ name }}</option>
      {% endfor %}
    </select>
    <label for="nprocs" accesskey="c">
      Number of CPUs <span class="label-extra-info">(--cpus-per-task)</span>:
    </label>
    <div class="form-field-div">
      <input
        type="number"
        id="nprocs"
        name="nprocs"
        min="1"
        value="1"
      />
      <span class="label-extra-info">&nbsp;/&nbsp;<span id="max_nprocs_span">-</span></span>
    </div>
    <label for="mem">
      Total memory <span class="label-extra-info">(--mem)</span>:
    </label>
    <div class="form-field-div" title="Memory in GigaBytes">
      <input type="hidden" id="mem" name="mem" value=""/>
      <input
        type="number"
        id="mem_input"
        min="0"
        value=""
        placeholder="Default"
      />
      <span class="label-extra-info">&nbsp;/&nbsp;<span id="max_mem_span">-</span></span>
    </div>
    <label for="ngpus">
      Number of GPUs <span class="label-extra-info">(--gres:&lt;gpu&gt;:)</span>:
    </label>
    <div class="form-field-div">
      <input
        type="number"
        id="ngpus"
        name="ngpus"
        min="0"
        value="0"
      />
      <span class="label-extra-info">&nbsp;/&nbsp;<span id="max_ngpus_span">-</span></span>
    </div>
    <label for="runtime" accesskey="r">
      Job duration <span class="label-extra-info">(as hh:mm:ss, --time)</span>:
    </label>
    <input
      type="text"
      id="runtime"
      name="runtime"
      value="1:00:00"
      placeholder="hh:mm:ss"
      pattern="[0-9]+:[0-5][0-9]:[0-5][0-9]"
    />
    <label for="default_url">Launch JupyterLab:</label>
    <input
      type="hidden"
      id="default_url_hidden_input"
      name="default_url"
      value="/lab"
    />
    <input
      type="checkbox"
      id="default_url"
      checked
    />
    <label>Jupyter environment:</label>
    <div id="jupyter_environments" class="form-offset-row">
      <input type="hidden" id="environment_path" name="environment_path"/>
      <input type="hidden" id="environment_modules" name="environment_modules"/>
      <div id="jupyter_environments_default"></div>
      <div>Custom:</div>
      <div id="jupyter_environments_custom"></div>
      <div class="environment-div">
        <input type="hidden" value="custom"/>
        <input
          type="radio"
          id="environment_add_radio"
          name="environment_id"
          value=""
        />
        <div>
          <div class="environment-add-div">
            <input
              type="text"
              id="environment_add_name"
              placeholder="Environment name"
            />
            <input
              type="text"
              id="environment_add_path"
              placeholder="/path/to/jupyter/env/bin *"
            />
            <input
              type="text"
              id="environment_add_modules"
              placeholder="List of modules (space-separated)"
            />
            <button
              type="button"
              id="environment_add_button"
              title="Add this environment to &#13;the list of custom environments"
              disabled
            >
              Add custom environment
            </button>
          </div>
          <div>
            &#9888; Required packages in custom environments:<br>
            <a href="https://pypi.org/project/batchspawner/">batchspawner</a>~={{batchspawner_version}} and
            <a href="https://pypi.org/project/jupyterhub/">jupyterhub</a>~={{jupyterhub_version}}.
          </div>
        </div>
      </div>
    </div>
    <hr />
    <label for="output">Save session logs <span class="label-extra-info">to slurm-*.out</span>:</label>
    <input
      type="checkbox"
      id="output"
      name="output"
      value="true"
    />
    <label for="reservation" accesskey="v">
      Reservation <span class="label-extra-info">(--reservation)</span>:
    </label>
    <input
      type="text"
      id="reservation"
      name="reservation"
      placeholder="no reservation"
    />
    <label for="options">
      Extra options <span class="label-extra-info">(space-separated)</span>:
    </label>
    <input
      type="text"
      id="options"
      name="options"
      placeholder="--option1=v1 --option2=v2"
    />
    </div>
    {% block advanced_tab_footer %}
    {{ resource_tab_footer(partitions, simple_only=false) }}
    {% endblock advanced_tab_footer %}
  </div>
</div>