{if $tab eq 'home'}
<h1>{$text}</h1>
<div id='ipam_page' class='container'>
    <div id='ipam_page_header' class="ipam_net">
        <div id='ipam_net_info' class="item">
            <div class="tableview_title">
                <h1>{$lang.IPAM_NETWORK_INFO_TITLE} : {$network.name}</h1>
				{if $privileges.ipam_net_access_all || $privileges.ipam_net_access_by_group}
                <a class="adminTabs ipam_updateNetwork" href="{$apache_path}/dialog_netadm.php?source_id={$id}&amp;action=updateNet&amp;net_id={$network.net_id}" title="{$lang.IPAM_UPDATE_NET_DIALOG_TITLE}">
                    <img class="button" src="/theme/default/images/modify-dash.png" alt="{$lang.IPAM_UPDATE_NET_DIALOG_TITLE}">
                </a>
				{/if}
                <div class="clearFix"></div>
            </div>
            <div class="section-content">
                <table class="tab">
                    <tr><td>{$lang.IPAM_SCAN_PLANIF_NEXT_DATE}</td>
                        <td>
                            {if !$network.next_scan}
                                <span>{$lang.IPAM_UNSELECT_ALL}
                                {if isset($network.last_scan)}
                                	{if $privileges.ipam_net_rescan || $privileges.esia_import}
                                        <!-- CREATE planif -->
                                        <a class="planifScan" title='{$lang.IPAM_SCAN_TITLE_DIALOG_PLANIF}' href='{$plugin_url}/dialog_scanadm.php?action=showPlanified&scan_id={$network.last_scan}'>
                                            <img style="width: 18px;margin-bottom:-4px;" class="button svg" src="/theme/default/images/circle-calendar.svg" alt='search'>
                                        </a>
                                	{/if}
                                {else}
                                	<a href="{$plugin_url}/control_import.php?resetTab=1" title="{$lang.IPAM_SCAN_ADD_SCAN_URL}">
                                  	  <img style="height: 40px;margin-bottom:-14px;" class="button" src="/plugin/ipam/img/menu_ipam.png" alt='search'>
                               		</a>
                                {/if}
                                </span>
                            {else}
                            {$network.next_scan}
                            {/if}
                        </td>
                    </tr>
                    <tr><td>{$lang.IPAM_NETWORK_TABLE_NAME}</td><td>{$network.name}</td></tr>
                    <tr><td>{$lang.IPAM_NETWORK_TABLE_DESC}</td><td>{$network.desc}</td></tr>
                    <tr><td>{$lang.IPAM_NETWORK_TABLE_VLAN}</td><td>{$network.vlan_id}</td></tr>
                    <tr><td>{$lang.IPAM_NETWORK_TABLE_SITE}</td><td>{$network.site}</td></tr>
                    <tr><td>{$lang.IPAM_NETWORK_ADDR}</td><td>{$network.net_addr}</td></tr>
                    <tr><td>{$lang.IPAM_NETWORK_TABLE_GW}</td><td>{$network.gateway}</td></tr>
					<tr>
						<td>{$lang.IPAM_NETWORK_INFO_FREEADDR}</td>
						<td><span id="free_add_button">{$free_addr}</span>
							<a href="" onclick="copy_to_clipboard('#free_add_button','{$free_addr}','Text copied');return false;" title="{$lang.IPAM_NETWORK_INFO_FREEADDR_TOOLTIP}"><img style="width:21px;margin-bottom:-4px;" class="button" src="/theme/default/images/clone.svg" alt="{$lang.IPAM_NETWORK_INFO_FREEADDR_TOOLTIP}">
							</a>
						</td>
					</tr>
                </table>
            </div>
        </div>
		{if $privileges.esia_device && $privileges.esia_administration}
        <div id='ipam_net_busy' class="item">
            <div class="tableview_title">
                <h1>{$lang.IPAM_TITLE_BUSY_ADDR}</h1>
            </div>
            <div class="section-content">
                <table class="tab">
                {foreach $busy_addr item=addr_info}
                <tr class="busy">
                    <td>
                        {$addr_info.addr}
                    </td>
                    <td>
                    <a title="{$lang.ADM_NODE_ADD}" href="{$apache_path}/adv_device_add.php?admin=device&amp;action=create&amp;addr={$addr_info.addr}" onclick="Adm.openDialog(this,'{$lang.ADM_ADD_DEV}',reload_active_tabs); return false;" style="margin-right:5px;margin-left:5px;">
                        <img class="btn_img" src="/theme/default/images/adm-add-node2.png" alt="add node">
                    </a>
                    </td>
                </tr>
                {/foreach}
                </table>
            </div>
        </div>
		{/if}
        <div id='ipam_net_circle' class="item">
            <div class="tableview_title">
                <h1>{$lang.IPAM_NETWORK_GRAPH_IPLIST}</h1>
            </div>
            <div class="section-content">
                <div class="tableview" style="padding:10px;">
    				<div id="ipCountChart"></div>
    			</div>
            </div>
        </div>
    </div>
    <div id='ipam_page_content'>
        <div id='ipam_scan_grid' class="item">
            <div class="tableview_title" style="display:flex;flex-direction:row;justify-content:space-between;align-items:center;align-content:stretch;">
                {if $network.changed_time}
                <h1>{$lang.IPAM_NETWORK_IPGRID_TITLE}</h1>{$lang.IPAM_SCAN_PLANIF_LAST_SCAN} : {$network.changed_time}
                {else}
                <h1>{$lang.IPAM_NETWORK_IPGRID_TITLE}</h1>
                {/if}
                <div class="ipam_scanGridActions">
					{if $privileges.ipam_net_reserved}
					<a class="reserveAddr" href="{$apache_path}/dialog_addr_range.php?net_id={$network.net_id}" title="{$lang.IPAM_ADDR_RESERVE_BUTTON}">
						<img class="button" src="/theme/default/images/adm-reserved.svg" height="31" alt="{$lang.IPAM_ADDR_RESERVE_BUTTON}">
					</a>
					{/if}
					<select required name="select_sub_range" id="select_sub_range">
					{foreach from=$sub_range_list item=sub_range}
						{if isset($sub_range_selected) && $sub_range_selected == $sub_range}
						<option selected>{$sub_range}</option>
						{else}
						<option>{$sub_range}</option>
						{/if}
					{/foreach}
					</select>
                </div>
            </div>
            <div class="section-content">
                <div class="case-grid">
                    <ol class="case-grid-content">
                        {foreach $addr_list as $addr}
                            <li class="{$addr.type}">.{$addr.tail}</li>
                        {/foreach}
                    </ol>

                <div class= 'legend'>
        <!--      <h1>{$lang.IPAM_ADDR_LEGEND_TITLE}</h1> -->
                  <p class="online">{$lang.IPAM_ADDR_ONLINE_STATE}</p>
                  <p class="unknown">{$lang.IPAM_ADDR_UNKNOWN_STATE}</p>
                  <p class="offline">{$lang.IPAM_ADDR_OFFLINE_STATE}</p>
                  <p class="busy">{$lang.IPAM_ADDR_BUSY_STATE}</p>
                  <p class="dhcp">{$lang.IPAM_ADDR_DHCP_STATE}</p>
                  <p class="reserved">{$lang.IPAM_ADDR_RESERVED_STATE}</p>
                  <p class="none">{$lang.IPAM_ADDR_NONE_STATE}</p>
                  <p class="disabled">{$lang.IPAM_ADDR_DISABLED_STATE}</p>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$( function() {
    var addr_count = [
	    ["{$lang.IPAM_ADDR_ONLINE_STATE}", {$addr_count['online']}],
        ["{$lang.IPAM_ADDR_UNKNOWN_STATE}", {$addr_count['unknown']}],
	    ["{$lang.IPAM_ADDR_OFFLINE_STATE}", {$addr_count['offline']}],
		["{$lang.IPAM_ADDR_BUSY_STATE}",  {$addr_count['busy']}],
		["{$lang.IPAM_ADDR_DHCP_STATE}",{$addr_count['dhcp']}],
        ["{$lang.IPAM_ADDR_RESERVED_STATE}",{$addr_count['reserved']}],
        ["{$lang.IPAM_ADDR_NONE_STATE}",{$addr_count['none']}],
	];

    var addr_color = [
        '#4CAF50',
        '#575759',
        '#f44336',
        '#ff9800',
        '#607d8b',
        '#008CBA',
        '#DFDFDF',
    ];
	chartIPCount("ipCountChart",addr_count,addr_color,'{$lang.IPAM_IP_ADDR}');
	configure_networkGrid('#ipamNetTab','#ipamNetTab .tab-home a');

    $("#ipam_net_info .planifScan").on('click',function()
    {
        Adm.openDialog($(this).prop('href'),$(this).attr('title'),reload_active_tabs,'planifScanDialog',1000,500);
        return false;
    });
});
{literal}
$(".adminTabs").on('click',function()
{
    Adm.openDialog($(this).prop('href'),$(this).attr('title'),reload_active_tabs,'networkChangeDialog',450,500);
    return false;
});

$(".reserveAddr").on('click',function()
{
    Adm.openDialog($(this).prop('href'),$(this).attr('title'),reload_active_tabs,'networkChangeDialog',1280,720);
    return false;
});
{/literal}
</script>
{elseif $tab eq 'iplist'}
<div class="tableview_title">
		<h1>{$lang.IPAM_NETWORK_ADDR_TITLE}</h1>
	{esia_pager divid="pager_iplist"
				tablesorterid="iplist"
				langprint="{$lang.ADM_PRINT_BOARD}"
				langcolumn="{$lang.ADM_SHOW_HIDDEN_COLUMN}"
				divcss="pager"
				height="22px"
				ulclass="triList"
				liclass="triElement"
				icn_printer="/theme/default/images/table-print.jpg"
				icn_column="/theme/default/images/table-change-order.jpg"
				icn_columnselect="/theme/default/images/table-change-order.jpg"}
	{/esia_pager}
</div>
<table id="iplist" class="tab tablesorter ipam-state">
	<thead>
		<th>{$lang.IPAM_ADDR_TABLE_STATE}</th>
		<th>{$lang.IPAM_ADDR_TABLE_USAGEDATE}</th>
		<th>{$lang.IPAM_ADDR_TABLE_ADDR}</th>
		<th>{$lang.IPAM_ADDR_TABLE_NAME}</th>
		<th>{$lang.IPAM_ADDR_TABLE_TYPE}</th>
		<th>{$lang.IPAM_ADDR_TABLE_DESC}</th>
		<th>{$lang.LGD_OK}</th>
		<th>{$lang.LGD_WARNING}</th>
		<th>{$lang.LGD_CRITICAL}</th>
		<th>{$lang.LGD_UNKNOWN}</th>
	</thead>
	<tbody>
	{foreach $iplist item=row}
		<tr>
			<td class="{$row.type_class} EventNone" nowrap>{$row.type_desc}</td>
            <td nowrap>{$row.last_usage}</td>
			<td nowrap>{$row.addr}</td>
			{if $row.type eq 'reserved'}
				{if $row.reserved_type eq 'reserved'}
					{if !empty($row.reserved_user)}
					<td nowrap>{$row.reserved_name} ( for {$row.reserved_user})</td>
					{else}
					<td nowrap>{$row.reserved_name}</td>
					{/if}
				{else if $row.reserved_type eq 'GATEWAY'}
					<td nowrap>{$row.reserved_type}</td>
				{/if}
			{else}
			<td nowrap>{$row.device_name}</td>
			{/if}
			<td nowrap>{$row.device_type}</td>
			{if $row.type eq 'reserved'}
			<td nowrap>{$row.reserved_desc}</td>
			{else}
			<td nowrap>{$row.device_desc}</td>
			{/if}
			{if $row.OK > 0}
				<td nowrap class="EventOK">{$row.OK}</td>
			{else}
				<td nowrap class="EventNone">{$row.OK}</td>
			{/if}
			{if $row.warning > 0}
				<td nowrap class="EventWarning">{$row.warning}</td>
			{else}
				<td nowrap class="EventNone">{$row.warning}</td>
			{/if}
			{if $row.critical > 0}
				<td nowrap class="EventCritical">{$row.critical}</td>
			{else}
				<td nowrap class="EventNone">{$row.critical}</td>
			{/if}
			{if $row.unknown > 0}
				<td nowrap class="EventUnknown">{$row.unknown}</td>
			{else}
				<td nowrap class="EventNone">{$row.unknown}</td>
			{/if}
		</tr>
	{/foreach}
	</tbody>
</table>

<script type="text/javascript">
$( function() {
	create_ipam_table('iplist');
});
</script>
{/if}