{% extends '_base_create_update.html' %}
{% load static %}
{% load bootstrap3 %}
{% load i18n %}

{% block form %}
    <form id="appForm" method="post" class="form-horizontal">
        {% if form.non_field_errors %}
            <div class="alert alert-danger">
                {{ form.non_field_errors }}
            </div>
        {% endif %}
        {% csrf_token %}
        {% bootstrap_field form.name layout="horizontal" %}
        {% bootstrap_field form.asset layout="horizontal" %}
        {% bootstrap_field form.system_user layout="horizontal" %}
        {% bootstrap_field form.type layout="horizontal" %}
        {% bootstrap_field form.path layout="horizontal" %}

        <div class="hr-line-dashed"></div>

        {# chrome #}
        <div class="chrome-fields">
        {% bootstrap_field form.chrome_target layout="horizontal" %}
        {% bootstrap_field form.chrome_username layout="horizontal" %}
        {% bootstrap_field form.chrome_password layout="horizontal" %}
        </div>

        {# mysql workbench #}
        <div class="mysql_workbench-fields">
            {% bootstrap_field form.mysql_workbench_ip layout="horizontal" %}
            {% bootstrap_field form.mysql_workbench_name layout="horizontal" %}
            {% bootstrap_field form.mysql_workbench_username layout="horizontal" %}
            {% bootstrap_field form.mysql_workbench_password layout="horizontal" %}
        </div>

        {# vmware #}
        <div class="vmware_client-fields">
        {% bootstrap_field form.vmware_target layout="horizontal" %}
        {% bootstrap_field form.vmware_username layout="horizontal" %}
        {% bootstrap_field form.vmware_password layout="horizontal" %}
        </div>

        {# custom #}
        <div class="custom-fields">
        {% bootstrap_field form.custom_cmdline layout="horizontal" %}
        {% bootstrap_field form.custom_target layout="horizontal" %}
        {% bootstrap_field form.custom_username layout="horizontal" %}
        {% bootstrap_field form.custom_password layout="horizontal" %}
        </div>

        {% bootstrap_field form.comment layout="horizontal" %}
        <div class="hr-line-dashed"></div>
        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-2">
                <button class="btn btn-default" type="reset"> {% trans 'Reset' %}</button>

                <button id="submit_button" class="btn btn-primary" type="submit">{% trans 'Submit' %}</button>
            </div>
        </div>

    </form>
{% endblock %}

{% block custom_foot_js %}
<script type="text/javascript">
var type_id = '#' + '{{ form.type.id_for_label }}';
var all_type_fields = [
    '.chrome-fields',
    '.mysql_workbench-fields',
    '.vmware_client-fields',
    '.custom-fields'
];
function appTypeChange(){
    $.each(all_type_fields, function(index, value){
        $(value).addClass('hidden')
    });
    var type = $(type_id+ " option:selected").val();
    $('.' + type + '-fields').removeClass('hidden');
}
$(document).ready(function () {
    $('.select2').select2({
        closeOnSelect: true
     });
    appTypeChange()
})
.on('change', type_id, function(){
    appTypeChange();
});
</script>
{% endblock %}