<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>
    </select>
    </p>
    
    <p> &nbsp </p>
    
    <p>
    <label for="cores">Cores </label> max 64
    <br/>
    <input type="range" name="cores" value="4" min="4" max="64" step="4" oninput="this.nextElementSibling.value = this.value"/>
    <output> default 4 </output>
    </p>
    
    <p> &nbsp </p>
    
    <p>
    <label for="ram">RAM, GB </label> max 216
    <br/>
    <input type="range" name="ram" value="16" min="8" max="216" step="8" oninput="this.nextElementSibling.value = this.value"/>
    <output> default 16 </output>
    </p>
    
    <!-- <label for="cephfscourse">Test course shared PVC </label> 
    <input style="display: inline" type="checkbox" name="cephfscourse"> -->
    
    <!--
    <label for="cephfs">Mount CephFS (if assigned)</label> 
    <input style="display: inline" type="checkbox" name="cephfs">
    <br/>
    -->
    
    </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>