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

{% block form %}
<form id="groupForm" method="post" class="form-horizontal">
    {% csrf_token %}
    {% bootstrap_field form.name layout="horizontal" %}
    {% bootstrap_field form.assets layout="horizontal" %}
    {% 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>
{% include 'assets/_asset_list_modal.html' %}
{% endblock %}

{% block custom_foot_js %}
<script type="text/javascript">
$(document).ready(function () {
    $('.select2').select2().off("select2:open");
}).on('click', '.select2-selection__rendered', function (e) {
    e.preventDefault();
    $("#asset_list_modal").modal();
    initSelectedAssets2Table();
})
.on('click', '#btn_asset_modal_confirm', function () {
    var assets = asset_table2.selected;
    var options = [];
    $('#id_assets option').each(function (i, v) {
        options.push(v.value)
    });
    asset_table2.selected_rows.forEach(function (i) {
        var name = i.hostname + '(' + i.ip + ')';
        var option = new Option(name, i.id, false, true);

        if (options.indexOf(i.id) === -1) {
            $('#id_assets').append(option).trigger('change');
        }
    });
    $('.select2').val(assets).trigger('change');
    $("#asset_list_modal").modal('hide');

})
</script>
{% endblock %}