{extends file="layout.html"}
{block name=title}{$layout.pagetitle|striphtml}{/block}
{block name=module_content}

<h1>{$pagetitle|escape}</h1>

<table class="lmsbox lms-ui-background-cycle lms-ui-datatable" data-page-length="{$pagelimit}">
    <thead>
        <tr class="bold">
            <td>
                {icon name="id" label="ID"}
            </td>
            <td>
                {icon name="vlan" label="VLAN ID"}
            </td>
            <td>
                {icon name="description" label="Description"}
            </td>
            <td>
                {icon name="customer" label="Assigned Customer"}
            </td>
            <td>
                {icon name="netnode" label="Assigned Network node"}
            </td>
            <td class="text-right" class="lms-ui-box-buttons">
                {button name="addvlan" id="addvlanbtn" icon="add" accesskey="v" label="Add" onclick="open_add_dialog()"}
            </td>
        </tr>
    </thead>
    <tbody>
        {foreach $vlanlist as $v}
        <tr class="highlight" data-template-id="{$v.id}">
            <td data-order="{$v.id}">
                {$v.id}
            </td>
            <td data-template-vlanid="{$v.vlanid}" data-order="{$v.vlanid}">
                {$v.vlanid}
            </td>
            <td data-template-description="{$v.description}" {tip text=$v.description}>
                {$v.description|trunescape:40}
            </td>
            <td data-template-customerid="{$v.customerid}" {tip text=$v.customername}>
                <a href="?m=customerinfo&id={$v.customerid}">{$v.customername|truncate:20:"&hellip;":true}</a>
            </td>
            <td data-template-netnodeid="{$v.netnodeid}" {tip text=$v.netnodename}>
                <a href="?m=netnodeinfo&id={$v.netnodeid}">{$v.netnodename|truncate:20:"&hellip;":true}</a>
            </td>
            <td class="buttons">
                {button type="link" icon="edit" tip="Edit" onclick="open_modify_dialog({$v.id})"}
                {button type="link" icon="delete" href="?m=vlanlist&action=delete&id={$v.id}" tip="Delete" class="delete-vlan"}
            </td>
        </tr>
        {/foreach}
    </tbody>
</table>

{include file="vlan/vlanmodify-dialog.html"}

<script>
    $(function() {
        $( '.delete-vlan' ).click(function() {
            confirmDialog( $t("Are you sure, you want to delete that VLAN?") , this).done(function() {
                location.href = $(this).attr('href');
            });
            return false;
        });
    });
</script>

{/block}