{% if bootstrap_version >= 5 -%}
    {% set field_cls = "col-md-auto" -%}
{% else -%}
    {% set field_cls = "col-md-6" -%}
{% endif -%}

{% if profile_params|length  > 1 -%}
<script type="text/javascript">
profile_map = {{ profile_params | tojson }};
function onChange() {
  profile = document.getElementById("profile").value;
  set_profile_params('default')
  set_profile_params(profile)
}
function set_profile_params(profile) {
  for (const [key, value] of Object.entries(profile_map[profile]['params'])) {
    if (value.constructor === Array) {
      for (const elem of value) {
        // first, set all elements to false
        const all_elements = document.getElementsByName(key);
        for (const element of all_elements) {
          element.checked = false;
        }
        // then set only the ones listed to true
        const element = document.getElementById(key + "-" + elem);
        if (element) { // Check if the element exists
          element.checked = true;
        } else {
          console.warn(`Element with ID '${key}-${elem}' not found. Skipping property assignment.`); // Log a warning instead of erroring
        }
      }
    }
    else {
      const element = document.getElementById(key); // Get the element once
      if (element) { // Check if the element exists
        if (typeof value == "boolean") {
          element.checked = value;
        } else {
          element.value = value;
        }
      } else {
        console.warn(`Element with ID '${key}' not found. Skipping property assignment.`); // Log a warning instead of erroring
      }
    }
  }
}
document.addEventListener("DOMContentLoaded", function() {onChange();});
</script>

<div class="form-group">
    {{ form.profile.label(class_="col-form-label") }}
    {{ form.profile(class_="form-control", onChange="onChange();") }}
</div>
{% endif -%}
<div class="row">
    <div class="col">
        <div class="form-group {{field_cls}}">
            {{ form.reservation.label(class_="col-form-label") }}
            {{ form.reservation(class_="form-control") }}
        </div>
    </div>
    <div class="col">
        <div class="form-group {{field_cls}}">
            {{ form.partition.label(class_="col-form-label") }}
            {{ form.partition(class_="form-control") }}
        </div>
    </div>
</div>
<div class="row">
    <div class="col">
        <div class="form-group {{field_cls}}">
            {{ form.account.label(class_="col-form-label") }}
            {{ form.account(class_="form-control") }}
        </div>
    </div>
    <div class="col">
        <div class="form-group {{field_cls}}">
            {{ form.runtime.label(class_="col-form-label") }}
            {{ form.runtime(class_="form-control") }}
        </div>
    </div>
</div>
<div class="row">
    <div class="col">
        <div class="form-group {{field_cls}}">
            {{ form.nprocs.label(class_="col-form-label") }}
            {{ form.nprocs(class_="form-control") }}
        </div>
        <div class="form-check">
            {{ form.oversubscribe(class_="form-check-input") }}
            {{ form.oversubscribe.label(class_="form-check-label") }}
            <span data-toggle="tooltip" data-placement="top" title="{{ form.oversubscribe.description }}">
                <i class="fa fa-question-circle"></i>
            </span>
        </div>
    </div>
    <div class="col">
        <div class="form-group {{field_cls}}">
            {{ form.memory.label(class_="col-form-label") }}
            {{ form.memory(class_="form-control") }}
        </div>
    </div>
</div>
<div class="form-group">
    {{ form.gpus.label(class_="col-form-label") }}
    {{ form.gpus(class_="form-control") }}
</div>
<div class="form-group">
    {{ form.ui.label(class_="col-form-label") }}
    {{ form.ui(class_="form-control") }}
</div>
{% if form.feature.choices %}
<div class="form-group">
    <fieldset>
    <legend class="col-form-label">{{ form.feature.label.text }}</legend>
    {{ form.feature() }}
    </fieldset>
</div>
{% endif %}