<noscript><h3>{{ step }}</h3></noscript>
{#<table class="table-fixed">#}
{#  <tbody>#}
{#    <tr>#}
{#      <td class="actions">#}
{#          {% include "horizon/common/_form_fields.html" %}#}
{#      </td>#}
{#      <td class="help_text">#}
{#          {{ step.get_help_text }}#}
{#      </td>#}
{#    </tr>#}
{#  </tbody>#}
{#</table>#}
    <div class="col-sm-6">
        {% include "horizon/common/_form_fields.html" %}
    </div>
    <div class="col-sm-6">
        {{ step.get_help_text }}
    </div>

<script>

    horizon.modals.addModalInitFunction(function (modal) {
        var $protocol_type = $('#id_source_type');
        var old_value = $protocol_type.val();

        if (old_value == "HTTP" || old_value == "TCP") {
            var options_all = {"HTTP": "HTTP", "TCP": "TCP"};
        } else {
            var options_all = {"HTTPS": "HTTPS", "SSL": "SSL"};
        }

        setOptions($protocol_type, options_all);

        function setOptions($protocol_type, newOptions) {
            $("#id_" + $protocol_type.val()).closest(".control-group").hide();
            $protocol_type.empty();

            $.each(newOptions, function (key, value) {
                $protocol_type.append($("<option></option>")
                        .attr("value", value).text(key));
            });
            $protocol_type.val(old_value);
            refresh($protocol_type);
        };

        function refresh($protocol_type) {
            var $this = $protocol_type,
                    base_type = $this.val();

            $this.find("option").each(function () {
                if (this.value != base_type) {
                    $("#id_" + this.value).closest(".control-group").hide();
                } else {
                    $("#id_" + this.value).closest(".control-group").show();
                }
            });
            $this.trigger('change');
        };

    });

</script>
