spawner/src/glicid_spawner/templates/interactive.html

<div class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-3 control-label">Username:</label>
        <div class="col-sm-9">
            <div class="form-control-static">{{ username }}</div>
        </div>
    </div>
    <div class="form-group">
        <label for="username" class="col-sm-3 control-label">Python environment:</label>
        <div class="col-sm-9">
            <select class="form-control" name="python-env">
                {%- for pyenv in python_envs -%}
                <option value="{{ pyenv.path }}">{{ pyenv.name }} ({{ pyenv.scope | upper }})</option>
                {% endfor -%}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="cpu" class="col-sm-3 control-label">CPU:</label>
        <div class="col-sm-9">
            {%- for cpu in cpu_available -%}
            <label class="radio-inline">
                <input type="radio" name="cpu"
                    value="{{loop.index0}}"
                    data-max-duration="{{cpu.max_duration}}"
                    {%- if loop.first -%}checked{%- endif -%}
                > {{ cpu.description }}
            </label>
            {% endfor -%}
        </div>
    </div>
    <div class="form-group">
        <label for="ram" class="col-sm-3 control-label">Memory:</label>
        <div class="col-sm-9">
            {%- for ram in ram_available -%}
            <label class="radio-inline">
                <input type="radio" name="ram"
                    value="{{loop.index0}}"
                    data-max-duration="{{ram.max_duration}}"
                    {%- if loop.first -%}checked{%- endif -%}
                > {{ ram.description }} GB
            </label>
            {% endfor -%}
        </div>
    </div>
    <div class="form-group">
        <label for="gpu" class="col-sm-3 control-label">GPU:</label>
        <div class="col-sm-9">
            {%- for gpu in gpu_available -%}
            <label class="radio-inline">
                <input type="radio" name="gpu"
                    value="{{loop.index0}}"
                    data-max-duration="{{gpu.max_duration}}"
                    {%- if loop.first -%}checked{%- endif -%}
                > {{ gpu.description }}
            </label>
            {% endfor -%}
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">Session duration:</label>
        <div class="col-sm-9">
            <div class="form-control-static"><span id="time-max-duration">24</span> h</div>
        </div>
    </div>
</div>

<script>
    var $reservations_dropdown = $("#time-max-duration");

    $('input[type=radio]').change(function() {
        var cpu = $('input[name=cpu]:checked').data('max-duration');
        var ram = $('input[name=ram]:checked').data('max-duration');
        var gpu = $('input[name=gpu]:checked').data('max-duration');

        $reservations_dropdown.text(Math.min(cpu, ram, gpu));
    })
</script>