<style>
    #addvlanmodal {
        overflow: visible;
    }
    input {
        margin-top: 5px;
    }
    .button-bar {
        padding-top: 20px;
    }
</style>

<div id="addvlanmodal" class="lms-ui-modal-dialog">
    <form method="POST" action="?m=vlanlist&action={if $action == 'modify'}modify&id={$vlaninfo.id}{else}add{/if}"
              name="addvlan" id="addvlan-form">
        <table>
            <tbody>
                <tr>
                    {if $action == 'modify'}
                    <td>
                        <input type="text" name="addvlan[id]" value="{$vlaninfo.id}" hidden>
                    </td>
                    {/if}
                </tr>
                <tr>
                    <td>
                        {icon name="vlan" label="VLAN ID"}
                    </td>
                    <td>
                        <input type="number" min="0" max="4096" step="1" id="dialog-vlanid" name="addvlan[vlanid]" value="{$vlaninfo.vlanid}" required>
                    </td>
                </tr>
                <tr>
                    <td class="nobr">
                        {icon name="description" label="VLAN Description"}
                    </td>
                    <td>
                        <input type="text" id="dialog-description" name="addvlan[description]" value="{$vlaninfo.description}">
                    </td>
                </tr>
                <tr>
                    <td>
                        {icon name="customer" label="Customer"}
                    </td>
                    <td>
                        {customerlist input_id="dialog-customer_selector" form="addvlan-form" selected="{$vlaninfo.customerid}" inputname="addvlan[customerid]" version=2}
                    </td>
                </tr>
                <tr>
                    <td class="nobr">
                        {icon name="netnode" label="Network Node"}
                    </td>
                    <td>
                        <select name="addvlan[netnodeid]" class="lms-ui-advanced-select-test" id="dialog-netnode_selector">
                            <option value="">{trans("— none —")}</option>
                            {foreach $netnodelist as $nn}
                                <option value="{$nn.id}" {if $nn.id == $vlaninfo.netnodeid} selected{/if}>{$nn.name|escape} ({$nn.id})</option>
                            {/foreach}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="button-bar text-center">
                        {button id="submit-modal-button" type="submit" label="{if $action == 'modify'}Submit{else}Add{/if}" icon="submit"}
                        {button label="Cancel" icon="cancel" id="close"}
                    </td>
                </tr>
            </tbody>
        </table>
        </form>
</div>

<script>
    $( "#addvlanmodal" ).dialog( {
        autoOpen: {if $action}true{else}false{/if},
        resizable: false,
        width: 'auto',
        modal: true,
        title: "{if $action == 'modify'}{trans("Modify VLAN")} {$vlaninfo.id}{else}{trans("Add VLAN")}{/if}"
    });

    $( "#close" ).click(function() {
        $( "#addvlanmodal" ).dialog( "close" );
    });

    function open_add_dialog() {
        $( "#addvlan-form" ).attr('action', '?m=vlanlist&action=add');
        $( "#submit-modal-button" ).html('<i class="lms-ui-icon-submit"></i><span class="lms-ui-label">{trans("Add")}</span>');

        $( "dialog-vlanid", "dialog-description", "dialog-netnode_selector").val();
        updateAdvancedSelectsTest("#dialog-netnode_selector");

        $( "#dialog-customer_selector" ).val('').trigger('input');
        $( "#addvlanmodal" ).dialog( "option", "title", "{trans("Add VLAN")}").dialog( "open" );
    };

    function open_modify_dialog (template_id) {
        $( "#submit-modal-button" ).html('<i class="lms-ui-icon-submit"></i><span class="lms-ui-label">{trans("Submit")}</span>');
        $( "#addvlan-form" ).attr('action', '?m=vlanlist&action=modify&id=' + template_id);
        if (template_id) {
            var row = $('[data-template-id=' + template_id + ']');
            $("#dialog-vlanid").val($(row).find("[data-template-vlanid]").attr('data-template-vlanid'));
            $("#dialog-description").val($(row).find("[data-template-description]").attr('data-template-description'));
            $("select#dialog-netnode_selector").val( $(row).find("[data-template-netnodeid]").attr('data-template-netnodeid'));
            updateAdvancedSelectsTest("#dialog-netnode_selector");

            var customeridedit = $(row).find("[data-template-customerid]").attr('data-template-customerid');
            $( "#dialog-customer_selector" ).removeAttr('data-customer-name', 'data-prev-value').val(customeridedit).trigger('input');
        }
        $( "#addvlanmodal" ).dialog( "option", "title", "{trans("Modify VLAN")} " + template_id).dialog( "open" );
    };
</script>
