{% load i18n %}

{% block main %}
{#<table class="table-fixed" id="sslCertContainer">#}
{#  <tbody>#}
{#    <tr>#}
{#      <td class="actions">#}
{#          <div class="row">#}
{#            <div class="col-sm-12">#}
{#                {% include "horizon/common/_form_fields.html" %}#}
{#            </div>#}
{#          </div>#}
{#      </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>
{% endblock %}


<script>

    horizon.modals.addModalInitFunction(function (modal) {
        var $address = $('#id_address');
        var $name = $('#id_name');
        var $name_label = $('label[for="id_name"]');
        var $protocol_type = $('#id_protocol_type');

        $address.change(function () {
            var options_all = {"HTTP": "HTTP", "HTTPS": "HTTPS", "TCP": "TCP", "SSL": "SSL"};
            setOptions($protocol_type, options_all);

            if ($address.val() == 'new') {
                $name.removeAttr('disabled');
                $name.removeAttr('readonly');
                $name.attr('value', '');
            } else {
                var key_token = $address.val().split(':');
                $name.attr('value', key_token[1]);
                $name.attr('readonly', 'true');
            }
        }).trigger('change');

        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));
            });
            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();
                }
            });
        };

        $protocol_type.on('change', function(evt){
            refresh($(this));
            //prevent the default handler in horizon.instances.js
            evt.stopPropagation();
        }).trigger('change');
    });

</script>
