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 -%}
            <div class="col-sm-2">
                <input type="radio" name="cpu" id="cpu_{{loop.index0}}" value="{{loop.index0}}"
                    data-max-duration="{{cpu.max_duration}}" {%- if loop.first -%}checked{%- endif -%}>
                <label for="cpu_{{loop.index0}}" class="btn btn-default btn-block">
                    {{ cpu.description }}
                </label>
            </div>
            {% 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 -%}
            <div class="col-sm-2">
                <input type="radio" name="ram" id="ram_{{loop.index0}}" value="{{loop.index0}}"
                    data-max-duration="{{ram.max_duration}}" {%- if loop.first -%}checked{%- endif -%}>
                <label for="ram_{{loop.index0}}" class="btn btn-default btn-block">
                    {{ ram.description }}
                </label>
            </div>
            {% 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 -%}
            <div class="col-sm-2">
                <input type="radio" name="gpu" id="gpu_{{loop.index0}}" value="{{loop.index0}}"
                    data-max-duration="{{gpu.max_duration}}" {%- if loop.first -%}checked{%- endif -%}>
                <label for="gpu_{{loop.index0}}" class="btn btn-default btn-block">
                    {{ gpu.description }}
                </label>
            </div>
            {% 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>
    // Append button style
    var $style = $(`<style>
    input[type=radio] {
        display: none;
    }
    input[type=radio]:checked + label {
        background-color: #f37524;
        border-color: #e34f21;
        color: #fff;
    }
</style>`)
    $('html > head').append($style);

    // Adjust time duration
    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>