my_spawner.html

<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'>
<label style="font-size: 150%; font-weight: normal;">Image</label>
{% for profile in profile_list %}
<label style="font-weight: normal;" for='profile-item-{{ loop.index0 }}' class='form-control input-group'>
    <div class='col-md-1'>
        <input type='radio' name='profile' id='profile-item-{{ loop.index0 }}' value='{{ loop.index0 }}' {% if profile.default %}checked{% endif %} />
    </div>
    <div class='col-md-11'>
        <strong>{{ profile.display_name }}</strong>
        {% if profile.description %}
        <p>{{ profile.description }}</p>
        {% endif %}
    </div>
</label>
{% endfor %}
</div>