{% extends _layout %}

{% block head %}
<script type="text/javascript">
    $(function(){
        $("#valFieldText").show();
        $("#valFieldBool").hide();
        $("#valFieldInt").hide();

        $("#inputVarType").change(function(){
            var val = $("#inputVarType").val();

            if(val == 1)
            {
                $("#valFieldText").show();
                $("#valFieldBool").hide();
                $("#valFieldInt").hide();
            }
            else if(val == 2)
            {
                $("#valFieldText").hide();
                $("#valFieldBool").show();
                $("#valFieldInt").hide();
            }
            else if(val == 3)
            {
                $("#valFieldText").hide();
                $("#valFieldBool").hide();
                $("#valFieldInt").show();
            }
        });
    });
</script>
{% endblock %}

{% block content %}
<div class="container">
    <h1>Create Variable</h1>

    {% if success %}
    <p class="bg-success"><strong>{{smessage}}</strong></p>
    {% else %}
    <form role="form" method="post" action="">
        <div class="form-group {{error1}}" id="fgName">
            <label class="control-label" for="inputUsername">Name</label>
            <input type="text" class="form-control" id="inputName" name="inputName" placeholder="Variable Name" value="{{ set_value('inputName') }}">
            {{ form_error('inputName') }}
        </div>

        <div class="form-group {[error2}}">
            <label class="control-label" for="inputVarType">Variable Type</label>
            <select class="form-control" name="inputVarType" id="inputVarType">
                <option value="1" {{ set_select("inputVarType", "1", true) }}>Text</option>
                <option value="2" {{ set_select("inputVarType", "2") }}>Boolean</option>
                <option value="3" {{ set_select("inputVarType", "3") }}>Integer</option>
            </select>
        </div>

        <noscript>
            <strong>WARNING</strong>: You seem to have javascript enabled, so below you see 3 fields.<br/>
            One for text, one for bool and one for int. You only need to fill out one, depending on the value you chose above.<br/>
            So, if you choose text, fill out "Value - Text", if you choose boolean then tick true or false and if you choose Integer, fill out "Value = Integer".<br/>
        </noscript>
        <div id="valFieldText">
            <div class="form-group {{error3}}" id="fgValField1">
                <label class="control-label" for="inputValText">Value<noscript> - Text</noscript></label>
                <input type="text" class="form-control" id="inputValText" name="inputValText" placeholder="Variable Value" value="{{ set_value('inputValText') }}">
                {{ form_error('inputName') }}
            </div>
        </div>
        <div id="valFieldBool">
            <div class="form-group {{error3}}" id="fgValField2">
                <label class="control-label" for="inputValBool">Value<noscript> - Boolean</noscript></label><br/>
                <label>
                    <input type="radio" name="inputValBool" id="inputValBool" value="true" checked>
                    True
                </label>
                <label>
                    <input type="radio" name="inputValBool" id="inputValBool" value="false">
                    False
                </label>
            </div>
        </div>
        <div id="valFieldInt">
            <div class="form-group {{error3}}" id="fgValField3">
                <label class="control-label" for="inputValInt">Value<noscript> - Integer</noscript></label>
                <input type="text" class="form-control" id="inputValInt" name="inputValInt" placeholder="Variable Value" value="{{ set_value('inputValText') }}">
                {{ form_error('inputName') }}
            </div>
        </div>

        {% if public_allowed %}
            <div class="form-group {{error4}}" id="fgValField2">
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox1" value="option1"> Is Public
                </label>
            </div>
        {% endif %}

        <button type="submit" class="btn btn-default">Add</button><br/>
    </form>
    {% endif %}
</div>


{% endblock %}