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

{% block form %}
    <form action="" method="post" class="form-horizontal">
    {% if form.non_field_errors %}
         <div class="alert alert-danger">
             {{ form.non_field_errors }}
         </div>
    {% endif %}
    {% csrf_token %}
    <h3>{% trans 'Basic' %}</h3>
    {% bootstrap_field form.hostname layout="horizontal" %}
    {% bootstrap_field form.ip layout="horizontal" %}
    {% bootstrap_field form.platform layout="horizontal" %}
    {% bootstrap_field form.public_ip layout="horizontal" %}
    {% bootstrap_field form.domain layout="horizontal" %}
    <div class="hr-line-dashed"></div>

    <h3>{% trans 'Protocols' %}</h3>
    <div class="protocols">
        {% for fm in formset.forms %}
        <div class="form-group">
            <div class="col-md-2 col-md-offset-2" style="text-align: right">{{ fm.name }}</div>
            <div class="col-md-6">{{ fm.port }}</div>
            <div class="col-md-1" style="padding: 6px 0">
                <a class="btn btn-danger btn-xs btn-protocol btn-del"><span class="fa fa-minus"></span> </a>
                <a class="btn btn-primary btn-xs btn-protocol btn-add" style="display: none"><span class="fa fa-plus"></span></a>
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="hr-line-dashed"></div>
    <h3>{% trans 'Auth' %}</h3>
    {% bootstrap_field form.admin_user layout="horizontal" %}

    <div class="hr-line-dashed"></div>
    <h3>{% trans 'Node' %}</h3>
    {% bootstrap_field form.nodes layout="horizontal" %}

    <div class="hr-line-dashed"></div>
    <h3>{% trans 'Labels' %}</h3>
    <div class="form-group {% if form.errors.labels %} has-error {% endif %}">
        <label for="{{ form.labels.id_for_label }}" class="col-md-2 control-label">{% trans 'Label' %}</label>
        <div class="col-md-9">
            <select name="labels" class="select2 labels" data-placeholder="{% trans 'Label' %}" style="width: 100%" multiple="" tabindex="4" id="{{ form.labels.id_for_label }}">
                {% for name, labels in form.labels.field.queryset|group_labels %}
                <optgroup label="{{ name }}">
                    {% for label in labels %}
                        {% if label in form.labels.initial %}
                            <option value="{{ label.id }}" selected>{{ label.value }}</option>
                        {% else %}
                            <option value="{{ label.id }}">{{ label.value }}</option>
                        {% endif %}
                    {% endfor %}
                </optgroup>
                {% endfor %}
            </select>
            {% if form.errors.labels %}
                {% for e in form.errors.labels %}
                    <div class="help-block">{{ e }}</div>
                {% endfor %}
            {% endif %}
        </div>
    </div>
    {% block extra %}
    {% endblock %}

    <div class="hr-line-dashed"></div>
    <h3>{% trans 'Other' %}</h3>
    {% bootstrap_field form.comment layout="horizontal" %}
    {% bootstrap_field form.is_active 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>
var instanceId = "{{ object.id }}";
var protocolLen = 0;
function format(item) {
   var group = item.element.parentElement.label;
   return group + ':' + item.text;
}

function protocolBtnShow() {
    $(".btn-protocol.btn-add").hide();
    $(".btn-protocol.btn-add:last").show();
    var btnDel = $(".btn-protocol.btn-del");
    if (btnDel.length === 1) {
        btnDel.addClass("disabled")
    } else {
        btnDel.removeClass("disabled")
    }
}


$(document).ready(function () {
    $('.select2').select2({
        allowClear: true
    });
    $(".labels").select2({
        allowClear: true,
        templateSelection: format
    });
    $('#id_nodes.select2').select2({
        closeOnSelect: false
    });
    protocolBtnShow()
})
.on("change", "#id_platform", function () {
    if (instanceId !== "") {
        return
    }
    var platform = $(this).val();
    var protocolRef = $(".protocols").find("select").first()
    var protocol = protocolRef.val();

    var protocolShould = "";
    if (platform.startsWith("Windows")){
        protocolShould = "rdp"
    } else {
        protocolShould = "ssh"
    }
    if (protocol !== protocolShould) {
        protocolRef.val(protocolShould);
        protocolRef.trigger("change")
    }

})
.on("click", ".btn-protocol.btn-del", function () {
    $(this).parent().parent().remove();
    protocolBtnShow()
})
.on("click", ".btn-protocol.btn-add", function () {
    var protocol = "";
    var protocolsRef = $(".protocols");
    var firstProtocolForm = protocolsRef.children().first();
    var newProtocolForm = firstProtocolForm.clone();
    var protocolChoices = $.map($(firstProtocolForm.find('select option')), function (option) {
        return option.value
    });
    var protocolsSet = $.map(protocolsRef.find('select option:selected'), function(option) {
        return option.value
    });
    for (var i=0;i<protocolChoices.length;i++) {
        var p = protocolChoices[i];
        if (protocolsSet.indexOf(p) === -1) {
            protocol = p;
            break
        }
    }
    if (protocol === "") {
        return
    }
    if (protocolLen === 0) {
        protocolLen = protocolsRef.length;
    }
    var selectName = "form-" + protocolLen + "-name";
    var selectId = "id_" + selectName;
    var portName = "form-" + protocolLen + "-port";
    var portId = "id_" + portName;
    newProtocolForm.find("select").prop("name", selectName).prop("id", selectId);
    newProtocolForm.find("input").prop("name", portName).prop("id", portId);
    newProtocolForm.find("option[value='" + protocol + "']").attr("selected", true);
    protocolsRef.append(newProtocolForm);
    protocolLen += 1;
    $("#" + selectId).trigger("change");
    protocolBtnShow()
})
.on("change", ".protocol-name", function () {
    var name = $(this).val();
    var port = 22;
    switch (name) {
        case "ssh":
            port = 22;
            break;
        case "rdp":
            port = 3389;
            break;
        case "telnet":
            port = 23;
            break;
        case "vnc":
            port = 5901;
            break;
        default:
            port = 22;
            break
    }
    $(this).parent().parent().find(".protocol-port").val(port);
})
</script>
{% block form_submit %}
    <script>
    $(document).ready(function () {
    })
    .on("submit", "form", function (evt) {
        evt.preventDefault();
        var the_url = '{% url 'api-assets:asset-list' %}';
        var redirect_to = '{% url "assets:asset-list" %}';
        var form = $("form");
        var protocols = {};
        var data = form.serializeObject();
        $.each(data, function (k, v) {
            if (k.startsWith("form")){
                delete data[k];
                var _k = k.split("-");
                var formName = _k.slice(0, 2).join("-");
                var key = _k[_k.length-1];
                if (!protocols[formName]) {
                    protocols[formName] = {}
                }
                protocols[formName][key] = v
            }
        });
        protocols = $.map(protocols, function ( v) {
            return v
        });
        data["protocols"] = protocols;
        if (typeof data.labels === "string") {
            data["labels"] = [data["labels"]];
        }
        if (typeof data["nodes"] == "string") {
            data["nodes"] = [data["nodes"]]
        }
        var props = {
            url: the_url,
            data: data,
            method: "POST",
            form: form,
            redirect_to: redirect_to
        };
        formSubmit(props);
     })
    </script>
{% endblock %}
{% endblock %}