Menu="NetworkSettings:100"
Title="Interface eth0"
Tag="tag"
---
<?PHP
/* Copyright 2005-2017, Lime Technology
 * Copyright 2012-2017, Bergware International.
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License version 2,
 * as published by the Free Software Foundation.
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 */
?>
<?
$members = parse_ini_file('state/network.ini',true);

$build = false;
$template = "$docroot/webGui/EthX.page";
$ini = '/var/local/emhttp/network.ini';
$validIP4 = '((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)';
$validIP6 = '((?:[0-9A-Fa-f]{1,4}))((?::[0-9A-Fa-f]{1,4}))*::((?:[0-9A-Fa-f]{1,4}))((?::[0-9A-Fa-f]{1,4}))*|((?:[0-9A-Fa-f]{1,4}))((?::[0-9A-Fa-f]{1,4})){7}';
$width = strstr('gray,azure',$display['theme']) ? [166,305]:[131,300];

// get available ethernet ports (excluding eth0)
exec("ls --indicator-style=none  /sys/class/net|grep -P '^eth[1-9][0-9]*$'",$ports);

function locked($source,$port) {
  global $members;
  foreach ($members as $member => $value) {
    if ($member == $source) continue;
    if ($value['BONDING']=='yes' && in_array($port,explode(',',$value['BONDNICS']))) return $value['BONDNAME'].' '.$member;
    if ($value['BRIDGING']=='yes' && in_array($port,explode(',',$value['BRNICS']))) return $value['BRNAME'].' '.$member;
  }
  return false;
}
// remove non-existing ethernet ports
foreach (glob("$docroot/webGui/Eth[1-9]*.page",GLOB_NOSORT) as $port) {
  if (!in_array(strtolower(basename($port,'.page')), $ports)) {
    @unlink($port);
    $build = true;
  }
}
// add new ethernet ports
foreach ($ports as $ethX) {
  $file = "$docroot/webGui/".ucfirst($ethX).".page";
  if (!file_exists($file)) {
    $X = filter_var($ethX,FILTER_SANITIZE_NUMBER_INT);
    $nnn = 100 + $X;
    $tabX = 'tab'.($X+1);
    $bondX = 'bond'.$X;
    $brX = 'br'.$X;
    copy($template, $file);
    exec("sed -i 's/parentname:nnn/NetworkSettings:$nnn/;s/tabX/$tabX/;s/bondX/$bondX/g;s/brX/$brX/g;s/ethX/$ethX/g' $file");
    $build = true;
  }
}
// enable interface only when VMs and Docker are stopped
$service = exec("pgrep libvirt") ? 'VM manager' : '';
$service .= exec("pgrep docker") ? ($service ? ' and ' : '').'Docker service' : '';

// eth0 port status
$no_eth0 = exec("ip link show eth0|grep -Pom1 '(NO-CARRIER|state DOWN)'");

// get VLAN interfaces
$vlan_id = 'VLANID:';
$vlan_eth0 = [0];
if (isset($eth0)) foreach ($eth0 as $key => $val) if (strpos($key,$vlan_id)===0) $vlan_eth0[] = substr($key,strlen($vlan_id));
?>
<style>
span.pin i{font-size:16px;cursor:pointer;}
span.red{color:#E68A00;}
span.blue{color:#00529B;}
span.green{color:#4F8A10;}
div.shade-white{background-color:#F8F8F8;}
div.shade-black{background-color:#0C0C0C;}
</style>
<script>
<?if ($build):?>
refresh(); // automatically include new ethernet ports
<?endif;?>
Array.prototype.same = function(){return this.sort().filter(function(v,i,o){return i&&v===o[i-1]?v:0;}).length;}

function prepareSettings(form) {
  var dns = form.DHCP_KEEPRESOLV !== undefined;
  var metrics = [];
  $(form).find('input[name^="METRIC:"]').each(function(){metrics.push($(this).val());});
  if (metrics.same()) {
    swal('Duplicate metrics','List of default gateways contains duplicate metric values','error');
    return false;
  }
  if (form.TYPE.value == 'access') {
    $(form).find('input[name^="VLANID:"]').prop('disabled',true);
    $(form).find('input[name^="DESCRIPTION:"]').not('input[name$=":0"]').prop('disabled',true);
    $(form).find('select[name^="PROTOCOL:"]').not('select[name$=":0"]').prop('disabled',true);
    $(form).find('select[name^="USE_DHCP:"]').not('select[name$=":0"]').prop('disabled',true);
    $(form).find('input[name^="IPADDR:"]').not('input[name$=":0"]').prop('disabled',true);
    $(form).find('input[name^="IPADDR6:"]').not('input[name$=":0"]').prop('disabled',true);
    $(form).find('select[name^="NETMASK:"]').not('select[name$=":0"]').prop('disabled',true);
    $(form).find('input[name^="NETMASK6:"]').not('input[name$=":0"]').prop('disabled',true);
    $(form).find('select[name^="GATEWAY:"]').not('select[name$=":0"]').prop('disabled',true);
    $(form).find('input[name^="GATEWAY6:"]').not('input[name$=":0"]').prop('disabled',true);
    $(form).find('input[name^="METRIC:"]').not('input[name$=":0"]').prop('disabled',true);
    $(form).find('select[name^="PRIVACY6:"]').not('select[name$=":0"]').prop('disabled',true);
  } else {
    var vlans = [];
    $(form).find('input[name^="VLANID:"]').each(function(){vlans.push($(this).val());});
    if (vlans.same()) {
      swal('VLAN assignment mismatch','List of VLANs contains duplicate VLAN numbers','error');
      return false;
    }
  }
  var member = '';
  for (var i=0,item; item=form.BONDNICS.options[i]; i++) {
    if (item.selected) {
      if (member.length) member += ',';
      member += item.value;
      item.selected = false;
    }
  }
  item = form.BONDNICS.options[0];
  item.value = member;
  item.selected = true;
  item.disabled = false;
  var member = '';
  for (var i=0,item; item=form.BRNICS.options[i]; i++) {
    if (item.selected) {
      if (member.length) member += ',';
      member += item.value;
      item.selected = false;
    }
  }
  item = form.BRNICS.options[0];
  item.value = form.BONDING.value=='yes' ? form.BONDNAME.value : member;
  item.selected = true;
  item.disabled = false;
  if (member.indexOf(',')>0) form.BRSTP.value = 'yes';
  $(form).find('select[name^="PROTOCOL:"]').each(function() {
    var protocol = $(this).val() || 'ipv4';
    var i = $(this).attr('name').split(':')[1];
    if (protocol == 'ipv6') {
      $(form).find('input[name="IPADDR:'+i+'"]').prop('disabled',true);
      $(form).find('select[name="NETMASK:'+i+'"]').prop('disabled',true);
      $(form).find('input[name="GATEWAY:'+i+'"]').prop('disabled',true);
      $(form).find('input[name="METRIC:'+i+'"]').prop('disabled',true);
      if (i==0) $(form).find('input[name^="DNS_SERVER"]').prop('disabled',true);
    }
    if (protocol == 'ipv4') {
      $(form).find('input[name="IPADDR6:'+i+'"]').prop('disabled',true);
      $(form).find('input[name="NETMASK6:'+i+'"]').prop('disabled',true);
      $(form).find('input[name="GATEWAY6:'+i+'"]').prop('disabled',true);
      $(form).find('select[name="PRIVACY6:'+i+'"]').prop('disabled',true);
      if (i==0) $(form).find('input[name^="DNS6_SERVER"]').prop('disabled',true);
    }
    if (protocol != 'ipv6') {
      var metric = $(form).find('input[name="METRIC:'+i+'"]').val();
      var gateway = $(form).find('input[name="GATEWAY:'+i+'"]');
      if (metric) gateway.val(gateway.val()+'#'+metric);
    }
  });
  $(form).find('select[name^="USE_DHCP:"]').each(function() {
    var i = $(this).attr('name').split(':')[1];
    if ($(this).prop('disabled')==false && $(this).val()=='yes') {
      var protocol = $(form).find('select[name="PROTOCOL:'+i+'"]').val() || 'ipv4';
      if (protocol != 'ipv6') {
        $(form).find('input[name="IPADDR:'+i+'"]').val('Obtaining IPv4 address...');
        $(form).find('input[name="GATEWAY:'+i+'"]').val('Obtaining IPv4 gateway...');
      }
      if (protocol != 'ipv4') {
        $(form).find('input[name="IPADDR6:'+i+'"]').val('Obtaining IPv6 address...');
        $(form).find('input[name="GATEWAY6:'+i+'"]').val('Obtaining IPv6 gateway...');
      }
    }
    if ($(this).val()!='yes') $(form).find('input[name="PRIVACY6:'+i+'"]').prop('disabled',true);
  });
  if (dns && form.DHCP_KEEPRESOLV.value=='no') {
    form.DHCP_KEEPRESOLV.disabled = false;
    var protocol = $(form).find('select[name="PROTOCOL:0"]').val() || 'ipv4';
    if (protocol != 'ipv6') $(form).find('input[name^="DNS_SERVER"]').val('Obtaining DNSv4 server...');
    if (protocol != 'ipv4') $(form).find('input[name^="DNS6_SERVER"]').val('Obtaining DNSv6 server...');
  }
  return true;
}
function selectProtocol(form,port,index) {
  if (index == null) {
    $(form).find('select[name^="PROTOCOL:"]').each(function() {
      var protocol = $(this).val() || 'ipv4';
      var i = $(this).attr('name').split(':')[1];
      var net4 = $('.'+port+'-ipv4-'+i);
      var net6 = $('.'+port+'-ipv6-'+i);
      switch (protocol) {
        case 'ipv4': net4.show(); net6.hide(); break;
        case 'ipv6': net4.hide(); net6.show(); break;
        case 'ipv4+ipv6': net4.show(); net6.show(); break;
      }
      checkNetworkSettings(form,i,true);
    });
  } else {
    var protocol = $(form).find('select[name="PROTOCOL:'+index+'"]').val() || 'ipv4';
    var net4 = $('.'+port+'-ipv4-'+index);
    var net6 = $('.'+port+'-ipv6-'+index);
    switch (protocol) {
      case 'ipv4': net4.show(); net6.hide(); break;
      case 'ipv6': net4.hide(); net6.show(); break;
      case 'ipv4+ipv6': net4.show(); net6.show(); break;
    }
    checkNetworkSettings(form,index);
    if (index==0) checkDNSSettings(form);
  }
}
function checkNetworkSettings(form,index,open) {
  var dns = form.DHCP_KEEPRESOLV !== undefined;
  var disabled = $(form).find('select[name="USE_DHCP:'+index+'"]').val()!='no';
  var protocol = $(form).find('select[name="PROTOCOL:'+index+'"]').val() || 'ipv4';
  if (protocol != 'ipv6') {
    $(form).find('input[name="IPADDR:'+index+'"]').prop('disabled',disabled).prop('required',!disabled);
    var netmask = $(form).find('select[name="NETMASK:'+index+'"]');
    var gateway = $(form).find('input[name="GATEWAY:'+index+'"]');
    netmask.prop('disabled',disabled);
    gateway.prop('disabled',disabled);
    if (!disabled) {
      var none = netmask.find('option[value="none"]');
      if (none.length) {netmask.val('255.255.255.0'); none.remove();}
    }
  }
  if (protocol != 'ipv4') {
    $(form).find('input[name="IPADDR6:'+index+'"]').prop('disabled',disabled).prop('required',!disabled);
    var netmask6 = $(form).find('input[name="NETMASK6:'+index+'"]');
    var gateway6 = $(form).find('input[name="GATEWAY6:'+index+'"]');
    var privacy6 = $(form).find('select[name="PRIVACY6:'+index+'"]');
    netmask6.prop('disabled',disabled).prop('required',!disabled);
    gateway6.prop('disabled',disabled);
    privacy6.prop('disabled',!disabled);
    if (!open) privacy6.val(disabled ? 0 : 2);
  }
  if (dns && index==0) {
    if (!open) form.DHCP_KEEPRESOLV.value = disabled ? 'no' : 'yes';
    checkDNSSettings(form);
  }
}
function checkDNSSettings(form) {
  var disabled = form.DHCP_KEEPRESOLV.value=='no';
  var protocol = $(form).find('select[name="PROTOCOL:0"]').val() || 'ipv4';
  if (protocol != 'ipv6') {
    form.DNS_SERVER1.disabled = disabled;
    form.DNS_SERVER1.required = !disabled;
    form.DNS_SERVER2.disabled = disabled;
    form.DNS_SERVER3.disabled = disabled;
    if (!form.DNS_SERVER2.value && disabled) $('#dnsserver2').hide(); else $('#dnsserver2').show();
    if (!form.DNS_SERVER3.value && disabled) $('#dnsserver3').hide(); else $('#dnsserver3').show();
  }
  if (protocol != 'ipv4') {
    form.DNS6_SERVER1.disabled = disabled;
    form.DNS6_SERVER1.required = !disabled;
    form.DNS6_SERVER2.disabled = disabled;
    form.DNS6_SERVER3.disabled = disabled;
    if (!form.DNS6_SERVER2.value && disabled) $('#dns6server2').hide(); else $('#dns6server2').show();
    if (!form.DNS6_SERVER3.value && disabled) $('#dns6server3').hide(); else $('#dns6server3').show();
  }
}
function checkBondingSettings(form,ctrl,port) {
  var disabled = form.BONDING.value=='no';
  var mode = form.BONDING_MODE.value;
  if (ctrl>=0) {
    var me = ctrl==0 ? null : 'slow';
    if (disabled) {
      $('#bond-members-'+port).hide(me);
    } else {
      $('#bond-members-'+port).show(me);
      $('#bond-'+port).dropdownchecklist('destroy').dropdownchecklist({emptyText:'None', width:<?=$width[0]?>});
    }
    if (ctrl==1) checkBridgingSettings(form,1,port);
  }
  if (mode==1 || mode>4 || disabled) {$('#attention0').hide();} else {$('#attention0').show();}
}
function checkBridgingSettings(form,ctrl,port) {
  var me = ctrl==0 ? null : 'slow';
  var i = 0;
  if (form.BRIDGING.value=='yes' && form.BONDING.value=='no') {
    $('#bridge-members-'+port).show(me);
    $('#bridge-'+port).dropdownchecklist('destroy').dropdownchecklist({emptyText:'None', width:<?=$width[0]?>});
  } else {
    $('#bridge-members-'+port).hide(me);
  }
}
function checkNetworkAccess(form,port) {
  if (form.TYPE.value=='access') {
    $('.access-'+port).hide();
    $(form).find('input[name^="VLANID:"]').prop('required',false);
  } else {
    $('.access-'+port).show();
    $(form).find('input[name^="VLANID:"]').prop('required',true);
  }
}
function addVLAN(port,disabled) {
  if (disabled) return;
  var index = 1;
  while ($('#index-'+port+'-'+index).length) index++;
  var template = $($('<div/>').loadTemplate($('#network-template-'+port)).html().replace(/INDEX/g,index));
  var element = $('[id^="index-'+port+'-"]').last();
  $(element).after(template);
  selectProtocol($('form[name="'+$(element).parent().attr('name')+'"]'),port);
  $(element).find('input').first().trigger('change');
}
function removeVLAN(element,disabled) {
  if (disabled) return;
  var id = $(element).attr('id').split('-');
  $(element).remove();
  $('#index-'+id[1]+'-0').find('select').first().trigger('change');
}
function disableForm(form,member) {
  $(form).find('input,select').not('input[value="Done"]').prop('disabled',true);
  if (member) $(form).find('input[name^="DESCRIPTION"],input[name^="#"]').prop('disabled',false);
}
var stopEvent = false;
function exitCode(form,key) {
  if (stopEvent) {stopEvent = false; return;}
  var arg1 = $(form).find('input[name="#arg[1]"]');
  if (!key) {
    arg1.val($(form).find('input[name="#section"]').val());
  } else {
    if (arg1.val()=='') arg1.val('none');
    stopEvent = true;
  }
}
function portcheck_eth0() {
  $.post('/webGui/include/CheckPort.php',{port:'eth0'},function(text) {
    var html = $('#user-notice').html();
    if (!html || html.indexOf('eth0')>0) showNotice(text);
    setTimeout(portcheck_eth0,10000);
  });
}
function portToggle(port,cmd) {
  $.post('/webGui/include/PortToggle.php',{port:port,cmd:cmd},function(){refresh();});
}
$(function() {
  var ctrl = "<span id='wait_eth0' class='status red' style='display:none;font-size:small;font-style:italic'>Please wait... configuring interfaces</span>";
  var form = document.eth0_settings;
<?if ($tabbed && !$service):?>
  $('#tab1').bind({click:function(){
    $('#bond-eth0').dropdownchecklist('destroy').dropdownchecklist({emptyText:'None', width:<?=$width[0]?>});
    $('#bridge-eth0').dropdownchecklist('destroy').dropdownchecklist({emptyText:'None', width:<?=$width[0]?>});
  }});
<?endif;?>
  $('#bond-eth0').dropdownchecklist({emptyText:'None', width:<?=$width[0]?>});
  $('#bridge-eth0').dropdownchecklist({emptyText:'None', width:<?=$width[0]?>});
  checkBondingSettings(form,0,'eth0');
  checkBridgingSettings(form,0,'eth0');
  checkNetworkAccess(form,'eth0');
  selectProtocol(form,'eth0');
<?if ($service):?>
  disableForm(form);
  $('#bond-eth0').dropdownchecklist('disable');
  $('#bridge-eth0').dropdownchecklist('disable');
  if (form.DNS_SERVER2.value) $('#dnsserver2').show(); else $('#dnsserver2').hide();
  if (form.DNS_SERVER3.value) $('#dnsserver3').show(); else $('#dnsserver3').hide();
<?else:?>
  checkDNSSettings(form);
<?endif;?>
<?if ($tabbed):?>
  $('.tabs').append(ctrl);
<?else:?>
  $('div[id=title]').append(ctrl);
<?endif;?>
  portcheck_eth0();
});
</script>
<form markdown="1" name="eth0_settings" method="POST" action="/update.php" target="progressFrame" onchange="exitCode(this,false)" onsubmit="return prepareSettings(this)">
<input type="hidden" name="#file" value="<?=$ini?>">
<input type="hidden" name="#include" value="/webGui/include/update.ethernet.php">
<input type="hidden" name="#section" value="eth0">
<input type="hidden" name="#command" value="/webGui/scripts/netconfig">
<input type="hidden" name="#arg[1]" value="">
<input type="hidden" name="BONDNAME" value="bond0">
<input type="hidden" name="BONDING_MIIMON" value="100">
<input type="hidden" name="BRNAME" value="br0">
<input type="hidden" name="BRSTP" value="no">
<input type="hidden" name="BRFD" value="0">
<?foreach ($vlan_eth0 as $i):?>
<div id="index-eth0-<?=$i?>" markdown="1">
<?if ($i==0):?>
MAC address:
: <span class='big'><?=strtoupper(exec("ip link show eth0|grep -Pom1 'ether \K\S+'"))?></span>

> This is the hardware address of the interface.
> When tagging is enabled all VLANs on this interface will share the same hardware address.

Enable bonding:
: <select name="BONDING" size="1" onchange="checkBondingSettings(this.form,1,'eth0')">
  <?=mk_option($eth0['BONDING'], "no", "No");?>
  <?=mk_option($eth0['BONDING'], "yes", "Yes");?>
  </select>

> Bonding is a feature that combines multiple physical Ethernet interfaces into a single *bonded* interface named **bond0**.
> This can be used to improve the connection redundancy and/or throughput of the system.
> Different bonding modes are supported (see below), but some modes require proper switch support.

<div id="bond-members-eth0" style="display:none" markdown="1">
Bonding mode:
: <select name="BONDING_MODE" size="1" onchange="checkBondingSettings(this.form,-1,'eth0')">
  <?=mk_option($eth0['BONDING_MODE'], "0", "balance-rr (0)");?>
  <?=mk_option($eth0['BONDING_MODE'], "1", "active-backup (1)",isset($eth0['BONDING_MODE'])?'':'selected');?>
  <?=mk_option($eth0['BONDING_MODE'], "2", "balance-xor (2)");?>
  <?=mk_option($eth0['BONDING_MODE'], "3", "broadcast (3)");?>
  <?=mk_option($eth0['BONDING_MODE'], "4", "802.3ad (4)");?>
  <?=mk_option($eth0['BONDING_MODE'], "5", "balance-tlb (5)");?>
  <?=mk_option($eth0['BONDING_MODE'], "6", "balance-alb (6)");?>
  </select>
  <span id="attention0" style="display:none"><b>Attention:</b> this mode requires a network switch with proper setup and support...</span>

> Mode 1 (active-backup) is the recommended default. Other modes allow you to set up a specific environment, but may require proper switch support.
> Choosing a unsupported mode can result in a disrupted communication. Use with caution.

Bonding members of bond0:
: <select id="bond-eth0" name="BONDNICS" size="1" multiple="multiple" style="display:none">
  <?=mk_option($eth0['BONDNICS'],'eth0','eth0','selected disabled')?>
  <?foreach ($ports as $port):?>
  <?if (!locked('eth0',$port)) echo mk_option_check($eth0['BONDNICS'],$port,$port)?>
  <?endforeach;?>
  </select>

> Select which interfaces are member of the *bonded* interface. By default eth0 is a member, while other interfaces are optional.

</div>
Enable bridging:
: <select name="BRIDGING" size="1" onchange="checkBridgingSettings(this.form,1,'eth0')">
  <?=mk_option($eth0['BRIDGING'], "no", "No");?>
  <?=mk_option($eth0['BRIDGING'], "yes", "Yes");?>
  </select>

> Bridging is a feature which creates a virtual bridge and allows VMs to communicate directly with the physical Ethernet port.
> Both bonding and bridging can be combined to let VMs communicate over a *bonded* interface.

<div id="bridge-members-eth0" style="display:none" markdown="1">
Bridging members of br0:
: <select id="bridge-eth0" name="BRNICS" size="1" multiple="multiple" style="display:none">
  <?=mk_option($eth0['BRNICS'],'eth0','eth0','selected disabled')?>
  <?foreach ($ports as $port):?>
  <?if (!locked('eth0',$port)) echo mk_option_check($eth0['BRNICS'],$port,$port)?>
  <?endforeach;?>
  </select>

> Select which interfaces are member of the *bridged* interface. By default eth0 is a member, while other interfaces are optional.

</div>
Interface description:
: <input type="text" name="DESCRIPTION:<?=$i?>" maxlength="80" value="<?=htmlspecialchars($eth0["DESCRIPTION:$i"])?>" onchange="exitCode(this.form,true)">

> Use this optional field to provide addditional information about the purpose of the connection.

Network protocol:
: <select name="PROTOCOL:<?=$i?>" size="1" onchange="selectProtocol(this.form,'eth0',<?=$i?>)">
  <?=mk_option($eth0["PROTOCOL:$i"], 'ipv4', 'IPv4 only');?>
  <?=mk_option($eth0["PROTOCOL:$i"], 'ipv6', 'IPv6 only');?>
  <?=mk_option($eth0["PROTOCOL:$i"], 'ipv4+ipv6', 'IPv4 + IPv6');?>
  </select>

IP address assignment:
: <select name="USE_DHCP:<?=$i?>" size="1" onchange="checkNetworkSettings(this.form,<?=$i?>)">
  <?=mk_option($eth0["USE_DHCP:$i"], 'yes', 'Automatic');?>
  <?=mk_option($eth0["USE_DHCP:$i"], 'no', 'Static');?>
  </select>

> The following settings are possible:
>
> *Automatic* - the server will attempt to obtain its IP address from the local DHCP server (IPv4) or SLAAC (IPv6)<br>
> *Static* - the IP address is manually set for this interface<br>
> *None* - no IP address is assigned to the interface (only available for VLANs)

<div class="eth0-ipv4-<?=$i?>" style="display:none" markdown="1">
IPv4 address:
: <input type="text" name="IPADDR:<?=$i?>" maxlength="15" value="<?=$eth0["IPADDR:$i"]?>" class="narrow" pattern="<?=$validIP4?>" title="IPv4 address A.B.C.D">

> Greyed out when using automatic IP assignment. Otherwise specify here the IPv4 address of the system.

IPv4 network mask:
: <select name="NETMASK:<?=$i?>" size="1">
  <?=mk_option($eth0["NETMASK:$i"], "255.255.0.0", "255.255.0.0");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.252.0", "255.255.252.0");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.254.0", "255.255.254.0");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.0", "255.255.255.0");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.128", "255.255.255.128");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.192", "255.255.255.192");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.224", "255.255.255.224");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.240", "255.255.255.240");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.248", "255.255.255.248");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.252", "255.255.255.252");?>
  </select>

> Greyed out when using automatic IP assignment. Otherwise specify here the associated network mask, by default 255.255.255.0 is selected.

IPv4 default gateway:
: <input type="text" name="GATEWAY:<?=$i?>" maxlength="15" value="<?=$eth0["GATEWAY:$i"]?>" class="narrow" pattern="<?=$validIP4?>" title="IPv4 address A.B.C.D">
  <input type="text" name="METRIC:<?=$i?>" min="1" max="9999" value="<?=$eth0["METRIC:$i"]?>" class="trim"><i class="fa fa-sort-numeric-asc"></i> <em>optional metric (lowest is preferred)</em>

> Greyed out when using automatic IP assignment. Otherwise specify here the IPv4 address of your router.

</div>
<div class="eth0-ipv6-<?=$i?>" style="display:none" markdown="1">
IPv6 address:
: <input type="text" name="IPADDR6:<?=$i?>" maxlength="39" value="<?=$eth0["IPADDR6:$i"]?>" pattern="<?=$validIP6?>" title="IPv6 address nnnn:xxxx::yyyy">

> Greyed out when using automatic IP assignment. Otherwise specify here the IPv6 address of the system.

IPv6 prefix:
: <input type="number" name="NETMASK6:<?=$i?>" min="1" max="128" value="<?=$eth0["NETMASK6:$i"]?>" class="trim">

> Greyed out when using automatic IP assignment. Otherwise specify here the associated prefix value of 1 to 128.

IPv6 default gateway:
: <input type="text" name="GATEWAY6:<?=$i?>" maxlength="39" value="<?=$eth0["GATEWAY6:$i"]?>" pattern="<?=$validIP6?>" title="IPv6 address nnnn:xxxx::yyyy">

> Greyed out when using automatic IP assignment. Otherwise specify here the IPv6 address of your router.

IPv6 privacy extensions:
: <select name="PRIVACY6:<?=$i?>" size="1">
  <?=mk_option($eth0["PRIVACY6:$i"], "0", "Disabled");?>
  <?=mk_option($eth0["PRIVACY6:$i"], "2", "Enabled");?>
  </select>

> Enable or disable the generation of a random IPv6 interface identifier according to RFC4941. This is similar to the temporary IPv6 address generation on Windows machines.

</div>
DNS server assignment:
: <select name="DHCP_KEEPRESOLV" size="1" onchange="checkDNSSettings(this.form)">
  <?=mk_option($eth0['DHCP_KEEPRESOLV'], "no", "Automatic");?>
  <?=mk_option($eth0['DHCP_KEEPRESOLV'], "yes", "Static");?>
  </select>

> If set to *Automatic* the server will use DNS server IP address returned by the local automatic assignment.<br>
> If set to *Static* you may enter your own list.
>
> This is useful in Active Directory configurations where you need to set the first DNS Server entry to the IP address of your AD Domain server.

<div class="eth0-ipv4-<?=$i?>" style="display:none" markdown="1">
IPv4 DNS server:
: <input type="text" name="DNS_SERVER1" maxlength="15" value="<?=$eth0['DNS_SERVER1'];?>" class="narrow" pattern="<?=$validIP4?>" title="IPv4 address A.B.C.D">

> This is the primary DNS server to use. Enter an IPv4 address.
>
> Note: for *Active Directory* you **must** ensure this is set to the IP address of your AD Domain server.

<div id="dnsserver2" style="display:none" markdown="1">
IPv4 DNS server 2:
: <input type="text" name="DNS_SERVER2" maxlength="15" value="<?=$eth0['DNS_SERVER2'];?>" class="narrow" pattern="<?=$validIP4?>" title="IPv4 address A.B.C.D">

> This is the DNS server to use when DNS server 1 is down.

</div>
<div id="dnsserver3" style="display:none" markdown="1">
IPv4 DNS server 3:
: <input type="text" name="DNS_SERVER3" maxlength="15" value="<?=$eth0['DNS_SERVER3'];?>" class="narrow" pattern="<?=$validIP4?>" title="IPv4 address A.B.C.D">

> This is the DNS server to use when DNS servers 1 and 2 are both down.

</div>
</div>
<div class="eth0-ipv6-<?=$i?>" style="display:none" markdown="1">
IPv6 DNS server:
: <input type="text" name="DNS6_SERVER1" maxlength="39" value="<?=$eth0['DNS6_SERVER1'];?>" pattern="<?=$validIP6?>" title="IPv6 address nnnn:xxxx::yyyy">

> This is the primary DNS IPv6 server to use. Enter an IPv6 address.

<div id="dns6server2" style="display:none" markdown="1">
IPv6 DNS server 2:
: <input type="text" name="DNS6_SERVER2" maxlength="39" value="<?=$eth0['DNS6_SERVER2'];?>" pattern="<?=$validIP6?>" title="IPv6 address nnnn:xxxx::yyyy">

> This is the DNS IPv6 server to use when DNS IPv6 server 1 is down.

</div>
<div id="dns6server3" style="display:none" markdown="1">
IPv6 DNS server 3:
: <input type="text" name="DNS6_SERVER3" maxlength="39" value="<?=$eth0['DNS6_SERVER3'];?>" pattern="<?=$validIP6?>" title="IPv6 address nnnn:xxxx::yyyy">

> This is the DNS IPv6 server to use when DNS IPv6 servers 1 and 2 are both down.

</div>
</div>
Desired MTU:
: <input type="number" name="MTU" min="68" max="9198" value="<?=$eth0['MTU']?>" class="narrow">

> This is the MTU size to use on the physical Ethernet interface.
> If left blank, the MTU will automatically be determined (by default 1500 bytes).

Enable VLANs:
: <select name="TYPE" size="1" onchange="checkNetworkAccess(this.form,'eth0')">
  <?=mk_option($eth0['TYPE'], 'access', 'No');?>
  <?=mk_option($eth0['TYPE'], 'trunk', 'Yes');?>
  </select>
  <span class="access-eth0 pin" style="display:none" onclick="addVLAN('eth0',<?=$service?'true':'false'?>)"><i class="fa fa-plus-circle green"></i><em>add VLAN</em></span>
<?else:?>
<div class="access-eth0 shade-<?=$display['theme']?>" style="display:none" markdown="1">
VLAN number:
: <input type="number" name="VLANID:<?=$i?>" min="1" max="4095" value="<?=$eth0["VLANID:$i"]?>" class="narrow" required>
  <span class="pin" onclick="removeVLAN($('#index-eth0-<?=$i?>'),<?=$service?'true':'false'?>)"><i class="fa fa-minus-circle red"></i><em>remove VLAN</em></span>

> Give each VLAN a unique identifier. Numbers range from 1 to 4095.

Interface description:
: <input type="text" name="DESCRIPTION:<?=$i?>" maxlength="80" value="<?=htmlspecialchars($eth0["DESCRIPTION:$i"])?>" onchange="exitCode(this.form,true)">

> Use this optional field to provide addditional information about the purpose of the connection.

Network protocol:
: <select name="PROTOCOL:<?=$i?>" size="1" onchange="selectProtocol(this.form,'eth0',<?=$i?>)">
  <?=mk_option($eth0["PROTOCOL:$i"], 'ipv4', 'IPv4 only');?>
  <?=mk_option($eth0["PROTOCOL:$i"], 'ipv6', 'IPv6 only');?>
  <?=mk_option($eth0["PROTOCOL:$i"], 'ipv4+ipv6', 'IPv4 + IPv6');?>
  </select>

IP address assignment:
: <select name="USE_DHCP:<?=$i?>" size="1" onchange="checkNetworkSettings(this.form,<?=$i?>)">
  <?=mk_option($eth0["USE_DHCP:$i"], 'yes', 'Automatic');?>
  <?=mk_option($eth0["USE_DHCP:$i"], 'no', 'Static');?>
<?if ($i>0):?>
  <?=mk_option($eth0["USE_DHCP:$i"], '', 'None');?>
<?endif;?>
  </select>

> The following settings are possible:
>
> *Automatic* - the server will attempt to obtain its IP address from the local DHCP server (IPv4) or SLAAC (IPv6)<br>
> *Static* - the IP address is manually set for this interface<br>
> *None* - no IP address is assigned to the interface (only available for VLANs)

<div class="eth0-ipv4-<?=$i?>" style="display:none" markdown="1">
IPv4 address:
: <input type="text" name="IPADDR:<?=$i?>" maxlength="15" value="<?=$eth0["IPADDR:$i"]?>" class="narrow" pattern="<?=$validIP4?>" title="IPv4 address A.B.C.D">

> Greyed out when using automatic IP assignment. Otherwise specify here the IPv4 address of the system.

IPv4 network mask:
: <select name="NETMASK:<?=$i?>" size="1">
  <?=mk_option($eth0["NETMASK:$i"], "255.255.0.0", "255.255.0.0");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.252.0", "255.255.252.0");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.254.0", "255.255.254.0");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.0", "255.255.255.0");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.128", "255.255.255.128");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.192", "255.255.255.192");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.224", "255.255.255.224");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.240", "255.255.255.240");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.248", "255.255.255.248");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.252", "255.255.255.252");?>
  </select>

> Greyed out when using automatic IP assignment. Otherwise specify here the associated network mask, by default 255.255.255.0 is selected.

IPv4 default gateway:
: <input type="text" name="GATEWAY:<?=$i?>" maxlength="15" value="<?=$eth0["GATEWAY:$i"]?>" class="narrow" pattern="<?=$validIP4?>" title="IPv4 address A.B.C.D">
  <input type="text" name="METRIC:<?=$i?>" min="1" max="9999" value="<?=$eth0["METRIC:$i"]?>" class="trim"><i class="fa fa-sort-numeric-asc"></i> <em>optional metric (lowest is preferred)</em>

> Greyed out when using automatic IP assignment. Otherwise specify here the IPv4 address of your router.

</div>
<div class="eth0-ipv6-<?=$i?>" style="display:none" markdown="1">
IPv6 address:
: <input type="text" name="IPADDR6:<?=$i?>" maxlength="39" value="<?=$eth0["IPADDR6:$i"]?>" pattern="<?=$validIP6?>" title="IPv6 address nnnn:xxxx::yyyy">

> Greyed out when using automatic IP assignment. Otherwise specify here the IPv6 address of the system.

IPv6 prefix:
: <input type="number" name="NETMASK6:<?=$i?>" min="1" max="128" value="<?=$eth0["NETMASK6:$i"]?>" class="trim">

> Greyed out when using automatic IP assignment. Otherwise specify here the associated prefix value of 1 to 128.

IPv6 default gateway:
: <input type="text" name="GATEWAY6:<?=$i?>" maxlength="39" value="<?=$eth0["GATEWAY6:$i"]?>" pattern="<?=$validIP6?>" title="IPv6 address nnnn:xxxx::yyyy">

> Greyed out when using automatic IP assignment. Otherwise specify here the IPv6 address of your router.

IPv6 privacy extensions:
: <select name="PRIVACY6:<?=$i?>" size="1">
  <?=mk_option($eth0["PRIVACY6:$i"], "0", "Disabled");?>
  <?=mk_option($eth0["PRIVACY6:$i"], "2", "Enabled");?>
  </select>

> Enable or disable the generation of a random IPv6 interface identifier according to RFC4941. This is similar to the temporary IPv6 address generation on Windows machines.

</div>
</div>
<?endif;?>
</div>
<?endforeach;?>

<script type="text/html" id="network-template-eth0" markdown="1">
<div id="index-eth0-INDEX" class="access-eth0 shade-<?=$display['theme']?>" markdown="1">
VLAN number:
: <input type="number" name="VLANID:INDEX" min="1" max="4095" value="<?=$eth0["VLANID:INDEX"]?>" class="narrow" required>
  <span class="pin" onclick="removeVLAN($('#index-eth0-INDEX'),false)"><i class="fa fa-minus-circle red"></i><em>remove VLAN</em></span>

> Give each VLAN a unique identifier. Numbers range from 1 to 4095.

Interface description:
: <input type="text" name="DESCRIPTION:INDEX" maxlength="80" value="<?=htmlspecialchars($eth0["DESCRIPTION:INDEX"])?>" onchange="exitCode(this.form,true)">

> Use this optional field to provide addditional information about the purpose of the connection.

Network protocol:
: <select name="PROTOCOL:INDEX" size="1" onchange="selectProtocol(this.form,'eth0',INDEX)">
  <?=mk_option($eth0["PROTOCOL:INDEX"], 'ipv4', 'IPv4 only');?>
  <?=mk_option($eth0["PROTOCOL:INDEX"], 'ipv6', 'IPv6 only');?>
  <?=mk_option($eth0["PROTOCOL:INDEX"], 'ipv4+ipv6', 'IPv4 + IPv6');?>
  </select>

IP address assignment:
: <select name="USE_DHCP:INDEX" size="1" onchange="checkNetworkSettings(this.form,INDEX)">
  <?=mk_option($eth0["USE_DHCP:INDEX"], 'yes', 'Automatic');?>
  <?=mk_option($eth0["USE_DHCP:INDEX"], 'no', 'Static');?>
  <?=mk_option($eth0["USE_DHCP:INDEX"], '', 'None');?>
  </select>

> The following settings are possible:
>
> *Automatic* - the server will attempt to obtain its IP address from the local DHCP server (IPv4) or SLAAC (IPv6)<br>
> *Static* - the IP address is manually set for this interface<br>
> *None* - no IP address is assigned to the interface (only available for VLANs)

<div class="eth0-ipv4-INDEX" style="display:none" markdown="1">
IPv4 address:
: <input type="text" name="IPADDR:INDEX" maxlength="15" value="<?=$eth0["IPADDR:INDEX"]?>" class="narrow" pattern="<?=$validIP4?>" title="IPv4 address A.B.C.D">

> Greyed out when using automatic IP assignment or NONE assignment. Otherwise specify here the IPv4 address of the system.

IPv4 network mask:
: <select name="NETMASK:INDEX" size="1">
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.0.0", "255.255.0.0");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.252.0", "255.255.252.0");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.254.0", "255.255.254.0");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.0", "255.255.255.0");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.128", "255.255.255.128");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.192", "255.255.255.192");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.224", "255.255.255.224");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.240", "255.255.255.240");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.248", "255.255.255.248");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.252", "255.255.255.252");?>
  </select>

> Greyed out when using automatic IP assignment or NONE assignment. Otherwise specify here the associated network mask, by default 255.255.255.0 is selected.

IPv4 default gateway:
: <input type="text" name="GATEWAY:INDEX" maxlength="15" value="<?=$eth0["GATEWAY:INDEX"]?>" class="narrow" pattern="<?=$validIP4?>" title="IPv4 address A.B.C.D">
  <input type="text" name="METRIC:INDEX" min="1" max="9999" value="<?=$eth0["METRIC:INDEX"]?>" class="trim"><i class="fa fa-sort-numeric-asc"></i> <em>optional metric (lowest is preferred)</em>

> Greyed out when using automatic IP assignment. Otherwise specify here the IPv4 address of your router.

</div>
<div class="eth0-ipv6-INDEX" style="display:none" markdown="1">
IPv6 address:
: <input type="text" name="IPADDR6:INDEX" maxlength="39" value="<?=$eth0["IPADDR6:INDEX"]?>" pattern="<?=$validIP6?>" title="IPv6 address nnnn:xxxx::yyyy">

> Greyed out when using automatic IP assignment. Otherwise specify here the IPv6 address of the system.

IPv6 prefix:
: <input type="number" name="NETMASK6:INDEX" min="1" max="128" value="<?=$eth0["NETMASK6:INDEX"]?>" class="trim">

> Greyed out when using automatic IP assignment. Otherwise specify here the associated prefix value of 1 to 128.

IPv6 default gateway:
: <input type="text" name="GATEWAY6:INDEX" maxlength="39" value="<?=$eth0["GATEWAY6:INDEX"]?>" pattern="<?=$validIP6?>" title="IPv6 address nnnn:xxxx::yyyy">

> Greyed out when using automatic IP assignment. Otherwise specify here the IPv6 address of your router.

IPv6 privacy extensions:
: <select name="PRIVACY6:INDEX" size="1">
  <?=mk_option($eth0['PRIVACY6:INDEX'], "0", "Disabled");?>
  <?=mk_option($eth0['PRIVACY6:INDEX'], "2", "Enabled");?>
  </select>

> Enable or disable the generation of a random IPv6 interface identifier according to RFC4941. This is similar to the temporary IPv6 address generation on Windows machines.

</div>
</div>
</script>

&nbsp;
: <input type="submit" value="Apply" onclick="$('#wait_eth0').show()"><input type="button" value="Done" onclick="done()"><?=$service ? "$service must be <span class='strong big'>Stopped</span> to change (see Settings)" : ""?>
</form>