<style>
input[type="range"] {
    display: inline;
    width: 40%;
}

output {
    display: inline;
    width: 20%;
}
</style>

<p> &nbsp </p>
<div class="text-center" style="width: 100%; text-align: center">
<details open>
    <summary> 
    <p style="font-size: 150%; text-align: left">Advanced Options </p>
    </summary>
    <p>Click the slider to adjust values; once clicked arrow keys can be used</p>

    <div style="margin-right: 20%; margin-left: 20%;">
    <p>
    <label for="gpus">GPUs </label> max 4
    <br/>
    <input type="range" name="gpus" value="0" min="0" max="4" oninput="this.nextElementSibling.value = this.value"/>
    <output> default 0 </output>
    </p>
    
    <p>
    <label for="gputype">GPU type</label>
    <br/>
    <select name="gputype" style="display: inline">
    <option value="" selected="selected">Any</option>
    <option value="NVIDIA-GeForce-GTX-1080">NVIDIA-GeForce-GTX-1080</option>
    <option value="NVIDIA-GeForce-GTX-1080-Ti">NVIDIA-GeForce-GTX-1080-Ti</option>
    <option value="NVIDIA-GeForce-RTX-2080-Ti">NVIDIA-GeForce-RTX-2080-Ti</option>
    <option value="NVIDIA-GeForce-RTX-3090">NVIDIA-GeForce-RTX-3090</option>
    <option value="NVIDIA-A10">NVIDIA-A10 Tensorcore</option>
    <option value="NVIDIA-L40">NVIDIA-L40-48GB</option>
    <option value="NVIDIA-A100-PCIE-40GB-MIG-2g.10gb">NVIDIA-A100-PCIE-40GB-MIG-2g.10gb</option>    
    <option value="NVIDIA-A100-SXM4-80GB">NVIDIA-A100-SXM4-80GB</option>
    </select>
    </p>
    
    <p> &nbsp </p>
    
    <p>
    <label for="cores">Cores </label> max 128
    <br/>
    <input type="range" name="cores" value="8" min="4" max="128" step="4" oninput="this.nextElementSibling.value = this.value"/>
    <output> default 8 </output>
    </p>
    
    <p> &nbsp </p>
    
    <p>
    <label for="ram">RAM, GB </label> max 256
    <br/>
    <input type="range" name="ram" value="16" min="16" max="256" step="8" oninput="this.nextElementSibling.value = this.value"/>
    <output> default 16 </output>
    </p>    
    </div>
</details>
</div>
<br/>

<div class='form-group' id='kubespawner-profiles-list'>
<p>Refer to the <a href="https://docs.nrp.ai/userdocs/running/sci-img/">documentation</a> for images description.</p>

<label>Image</label>
{%- for profile in profile_list %}
  {#- Wrap everything in a label tag so clicking anywhere selects the option #}
  <label for="profile-item-{{ profile.slug }}"
   class="profile js-profile-label">
    <div class="radio">
 <input type="radio"
  name="profile"
       id="profile-item-{{ profile.slug }}"
                 value="{{ profile.slug }}"
                 {% if profile.default %}checked{% endif %} />
         </div>
         <div>
           <h3>{{ profile.display_name }}</h3>
           {%- if profile.description %}<p>{{ profile.description }}</p>{%- endif %}
           {%- if profile.profile_options %}
             <div>
               {%- for k, option in profile.profile_options.items() %}
                 <div class="js-options-container">
                   <div class="option">
                <label for="profile-option-{{ profile.slug }}--{{ k }}"
                      class="js-profile-option-label">{{ option.display_name }}</label>
                <select name="profile-option-{{ profile.slug }}--{{ k }}"
                        class="form-control js-profile-option-select">
                  {%- for k, choice in option['choices'].items() %}
                    <option value="{{ k }}" {% if choice.default %}selected{% endif %}>{{ choice.display_name }}</option>
                  {%- endfor %}
                  {%- if option['unlisted_choice']['enabled'] %}
                    <option value="unlisted-choice">{{ option['unlisted_choice']['display_name_in_choices'] }}</option>
                  {%- endif %}
                </select>
              </div>
              {%- if option['unlisted_choice']['enabled'] %}
                <div class="option hidden js-other-input-container">
                  <label for="profile-option-{{ profile.slug }}--{{ k }}--unlisted-choice">
                {{ option['unlisted_choice']['display_name'] }}
                  </label>
                  <input data-name="profile-option-{{ profile.slug }}--{{ k }}--unlisted-choice"
                        {%- if option['unlisted_choice']['validation_regex'] %}
                        pattern="{{ option['unlisted_choice']['validation_regex'] }}"
                        {%- endif %}
                        title="{{ option['unlisted_choice']['validation_message'] }}"
                        class="form-control js-other-input" />
                </div>
              {%- endif %}
            </div>
          {%- endfor %}
        </div>
      {%- endif %}
</div>
</label>
{%- endfor %}
</div>


<div id="note:">
    <span style="color: tomato"><i>Important Note:</i></span>
    <i>When this server is longer needed, or if you want to launch a different stack, please stop it as follows:</i>
    <span style="color:SlateBlue;"><i>Go to File > Hub Control Panel > Stop Server<i></span>
</div>