Menu="NetworkSettings:100"
Title="Interface eth0"
Tag="icon-ethernet"
---
<?PHP
/* Copyright 2005-2018, Lime Technology
 * Copyright 2012-2018, 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]?)(\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}";
$validIP6 = "(([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|(:|([0-9a-fA-F]{1,4}:)+):(([0-9a-fA-F]{1,4}:)*[0-9a-fA-F]{1,4})?)";
$width    = [166,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;
}
function vlanID($cfg) {
  return array_filter($cfg,function($key){return strpos($key,'VLANID:')===0;},ARRAY_FILTER_USE_KEY);
}
function index($key) {
  return filter_var($key,FILTER_SANITIZE_NUMBER_INT);
}
// 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_eth0 = $sort_eth0 = [];
if (isset($eth0)) foreach (vlanID($eth0) as $key => $val) {$vlan_eth0[] = index($key); $sort_eth0[] = (int)$val;}
array_multisort($sort_eth0,$vlan_eth0);
?>
<style>
span.red{color:#E68A00}
span.blue{color:#00529B}
span.green{color:#4F8A10}
span.vshift{margin-top:0!important}
input.gap{margin-right:6px}
input.form{font-size:1rem;padding:5px 10px;margin-left:10px}
div.shade-white{background-color:#ededed;margin-top:10px;padding:8px 0 3px 0}
div.shade-black{background-color:#212121;margin-top:10px;padding:8px 0 3px 0}
div.shade-azure{background-color:#edeaef;margin-top:10px;padding:8px 0 3px 0}
div.shade-gray{background-color:#121510;margin-top:10px;padding:8px 0 3px 0}
select.slim{min-width:47px;margin-left:4px}
input.slim{width:32px;margin-left:8px}
</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 metrics = [];
  var metrics6 = [];
  $(form).find('input[name^="METRIC:"]').each(function(){metrics.push($(this).val());});
  $(form).find('input[name^="METRIC6:"]').each(function(){metrics6.push($(this).val());});
  if (metrics.same() || metrics6.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',false).val('');
    $(form).find('input[name^="DESCRIPTION:"]').not('input[name$=":0"]').prop('disabled',false).val('');
    $(form).find('select[name^="PROTOCOL:"]').not('select[name$=":0"]').prop('disabled',false).val('');
    $(form).find('select[name^="USE_DHCP:"]').not('select[name$=":0"]').prop('disabled',false).val('');
    $(form).find('select[name^="USE_DHCP6:"]').not('select[name$=":0"]').prop('disabled',false).val('');
    $(form).find('input[name^="IPADDR:"]').not('input[name$=":0"]').prop('disabled',false).val('');
    $(form).find('input[name^="IPADDR6:"]').not('input[name$=":0"]').prop('disabled',false).val('');
    $(form).find('select[name^="NETMASK:"]').not('select[name$=":0"]').prop('disabled',false).val('');
    $(form).find('input[name^="NETMASK6:"]').not('input[name$=":0"]').prop('disabled',false).val('');
    $(form).find('select[name^="GATEWAY:"]').not('select[name$=":0"]').prop('disabled',false).val('');
    $(form).find('input[name^="GATEWAY6:"]').not('input[name$=":0"]').prop('disabled',false).val('');
    $(form).find('input[name^="METRIC:"]').not('input[name$=":0"]').prop('disabled',false).val('');
    $(form).find('select[name^="PRIVACY6:"]').not('select[name$=":0"]').prop('disabled',false).val('');
  } 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',false).val('');
      $(form).find('select[name="NETMASK:'+i+'"]').prop('disabled',false).val('');
      $(form).find('input[name="GATEWAY:'+i+'"]').prop('disabled',false).val('');
      $(form).find('input[name="METRIC:'+i+'"]').prop('disabled',false).val('');
      if (i==0) $(form).find('input[name^="DNS_SERVER"]').prop('disabled',false).val('');
    }
    if (protocol == 'ipv4') {
      $(form).find('input[name="IPADDR6:'+i+'"]').prop('disabled',false).val('');
      $(form).find('input[name="NETMASK6:'+i+'"]').prop('disabled',false).val('');
      $(form).find('input[name="GATEWAY6:'+i+'"]').prop('disabled',false).val('');
      $(form).find('input[name="METRIC6:'+i+'"]').prop('disabled',false).val('');
      $(form).find('select[name="PRIVACY6:'+i+'"]').prop('disabled',false).val('');
      if (i==0) $(form).find('input[name^="DNS6_SERVER"]').prop('disabled',false).val('');
    }
  });
  $(form).find('select[name^="USE_DHCP:"]').each(function() {
    var i = $(this).attr('name').split(':')[1];
    var protocol = $(form).find('select[name="PROTOCOL:'+i+'"]').val() || 'ipv4';
    if ($(this).prop('disabled')==false && $(this).val()=='yes') {
      if (protocol != 'ipv6') {
        $(form).find('input[name="IPADDR:'+i+'"]').val('Obtaining IPv4 address...');
        $(form).find('input[name="GATEWAY:'+i+'"]').val('Obtaining IPv4 gateway...');
      }
    } else if (protocol != 'ipv6' && $(this).val()=='yes') {
      $(form).find('input[name="IPADDR:'+i+'"]').prop('disabled',false).val('');
      $(form).find('input[name="GATEWAY:'+i+'"]').prop('disabled',false).val('');
    }
  });
  $(form).find('select[name^="USE_DHCP6:"]').each(function() {
    var i = $(this).attr('name').split(':')[1];
    var protocol = $(form).find('select[name="PROTOCOL:'+i+'"]').val() || 'ipv4';
    if ($(this).prop('disabled')==false && $(this).val()=='yes') {
      if (protocol != 'ipv4') {
        $(form).find('input[name="IPADDR6:'+i+'"]').val('Obtaining IPv6 address...');
        $(form).find('input[name="GATEWAY6:'+i+'"]').val('Obtaining IPv6 gateway...');
      }
    } else if (protocol != 'ipv4' && $(this).val()=='yes') {
      $(form).find('input[name="IPADDR6:'+i+'"]').prop('disabled',false).val('');
      $(form).find('input[name="GATEWAY6:'+i+'"]').prop('disabled',false).val('');
    }
    if ($(this).val()!='yes') $(form).find('input[name="PRIVACY6:'+i+'"]').prop('disabled',false).val('');
  });
  if (form.DHCP_KEEPRESOLV !== undefined && 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 (form.DHCP6_KEEPRESOLV !== undefined && form.DHCP6_KEEPRESOLV.value=='no') {
    form.DHCP6_KEEPRESOLV.disabled = false;
    var protocol = $(form).find('select[name="PROTOCOL:0"]').val() || 'ipv4';
    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 = $('.'+'ipv4-'+port+'-'+i);
      var net6 = $('.'+'ipv6-'+port+'-'+i);
      var more4 = $('.'+'more-ipv4-'+port+'-'+i);
      var more6 = $('.'+'more-ipv6-'+port+'-'+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;
      }
      if ($(form).find('select[name="USE_DHCP:'+i+'"]').val()) more4.show(); else more4.hide();
      if ($(form).find('select[name="USE_DHCP6:'+i+'"]').val()) more6.show(); else more6.hide();
      checkNetworkSettings(form,i,true);
    });
  } else {
    var protocol = $(form).find('select[name="PROTOCOL:'+index+'"]').val() || 'ipv4';
    var net4 = $('.'+'ipv4-'+port+'-'+index);
    var net6 = $('.'+'ipv6-'+port+'-'+index);
    var more4 = $('.'+'more-ipv4-'+port+'-'+index);
    var more6 = $('.'+'more-ipv6-'+port+'-'+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;
    }
    if ($(form).find('select[name="USE_DHCP:'+index+'"]').val()) more4.show(); else more4.hide();
    if ($(form).find('select[name="USE_DHCP6:'+index+'"]').val()) more6.show(); else more6.hide();
    checkNetworkSettings(form,index);
    if (index==0) {
      checkDNSSettings(form);
      checkDNSSettings6(form);
    }
  }
}
function checkNetworkSettings(form,index,start) {
  var disabled4 = $(form).find('select[name="USE_DHCP:'+index+'"]').val()!='no';
  var disabled6 = $(form).find('select[name="USE_DHCP6:'+index+'"]').val()!='no';
  var protocol = $(form).find('select[name="PROTOCOL:'+index+'"]').val() || 'ipv4';
  if (protocol != 'ipv6') {
    $(form).find('input[name="IPADDR:'+index+'"]').prop('disabled',disabled4).prop('required',!disabled4);
    $(form).find('select[name="NETMASK:'+index+'"]').prop('disabled',disabled4);
    $(form).find('input[name="GATEWAY:'+index+'"]').prop('disabled',disabled4);
  }
  if (protocol != 'ipv4') {
    $(form).find('input[name="IPADDR6:'+index+'"]').prop('disabled',disabled6).prop('required',!disabled6);
    $(form).find('input[name="NETMASK6:'+index+'"]').prop('disabled',disabled6).prop('required',!disabled6);
    $(form).find('input[name="GATEWAY6:'+index+'"]').prop('disabled',disabled6);
    var privacy = $(form).find('select[name="PRIVACY6:'+index+'"]');
    privacy.prop('disabled',!disabled6);
  }
  if (index==0) {
    if (form.DHCP_KEEPRESOLV !== undefined) {
      if (!start) form.DHCP_KEEPRESOLV.value = disabled4 ? 'no' : 'yes';
      form.DHCP_KEEPRESOLV.disabled = !disabled4;
      checkDNSSettings(form);
    }
    if (form.DHCP6_KEEPRESOLV !== undefined) {
      if (!start) form.DHCP6_KEEPRESOLV.value = disabled6 ? 'no' : 'yes';
      form.DHCP6_KEEPRESOLV.disabled = !disabled6;
      checkDNSSettings6(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();
  }
}
function checkDNSSettings6(form) {
  var disabled = form.DHCP6_KEEPRESOLV.value=='no';
  var protocol = $(form).find('select[name="PROTOCOL:0"]').val() || 'ipv4';
  if (protocol != 'ipv4') {
    form.DNS6_SERVER1.disabled = disabled;
    form.DNS6_SERVER2.disabled = disabled;
    form.DNS6_SERVER3.disabled = disabled;
    if (!form.DNS6_SERVER1.value && disabled) $('#dns6server1').hide(); else $('#dns6server1').show();
    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) {
  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).find('input').first().trigger('change');
  selectProtocol($('form[name="'+$(element).parent().attr('name')+'"]'),port,index);
}
function removeVLAN(element) {
  var id = $(element).attr('id').split('-');
  $(element).remove();
  $('#view-'+id[1]).find('select').first().trigger('change');
}
function disableForm(form) {
  $(form).find('input,select').not('input[value="Done"]').prop('disabled',true);
  $(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 viewToggle(eth,vlan) {
  var tag = vlan ? '#tag-'+eth+'-'+vlan : '#tag-'+eth;
  var view = vlan ? '#view-'+eth+'-'+vlan : '#view-'+eth;
  if ($(view).is(':visible')) {
    $(tag).removeClass('fa-chevron-up').addClass('fa-chevron-down');
    $.cookie(view,'hide',{expires:3650});
  } else {
    $(tag).removeClass('fa-chevron-down').addClass('fa-chevron-up');
    $.removeCookie(view);
  }
  $(view).toggle('slow');
}
var watchDHCP = new NchanSubscriber('/sub/dhcp');
watchDHCP.on('message', function(data) {
  data = data.split(' ');
  for (var i=0,row; row=data[i]; i++) {
    var id = row.split('_');
    var form = $('form[name="'+id[0]+'_settings"]');
    var key = id[2].split('=');
    switch (id[1]) {
      case 'I': form.find('input[name="'+key[0]+'"]').val(key[1]); break;
      case 'S': form.find('select[name="'+key[0]+'"]').val(key[1]); break;
    }
  }
});
$(function() {
  var ctrl = "<span id='wait_eth0' class='status vshift red-text' style='display:none;font-size:1.2rem;font-style:italic'><i class='fa fa-spinner fa-spin'></i> Please wait... configuring interface</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;?>
  if (!$.cookie('#view-eth0')) {$('#view-eth0').show(); $('#tag-eth0').removeClass('fa-chevron-down').addClass('fa-chevron-up');}
<?foreach ($vlan_eth0 as $i):?>
  if (!$.cookie('#view-eth0-<?=$i?>')) {$('#view-eth0-<?=$i?>').show(); $('#tag-eth0-<?=$i?>').removeClass('fa-chevron-down').addClass('fa-chevron-up');}
<?endforeach;?>
  $('#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();
  if (form.DNS6_SERVER1.value) $('#dns6server1').show(); else $('#dns6server1').hide();
  if (form.DNS6_SERVER2.value) $('#dns6server2').show(); else $('#dns6server2').hide();
  if (form.DNS6_SERVER3.value) $('#dns6server3').show(); else $('#dns6server3').hide();
<?else:?>
  checkDNSSettings(form);
  checkDNSSettings6(form);
<?endif;?>
<?if ($tabbed):?>
  $('.tabs').append(ctrl.replace('vshift',''));
<?else:?>
  $('div#title').eq(0).find('span.left').append(ctrl);
<?endif;?>
  portcheck_eth0();
  watchDHCP.start();
});
</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">
Interface description:
: <span class="status vshift"><i id="tag-eth0" class="fa fa-fw fa-chevron-down" style="cursor:pointer" onclick="viewToggle('eth0')"></i></span>
  <input type="text" name="DESCRIPTION:0" maxlength="80" value="<?=htmlspecialchars($eth0["DESCRIPTION:0"])?>" onchange="exitCode(this.form,true)">

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

<div markdown="1" id="view-eth0" style="display:none">
MAC address:
: <?=strtoupper(exec("ip link show eth0|grep -Pom1 'ether \K\S+'"))?>

> 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 markdown="1" id="bond-members-eth0" style="display:none">
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 0 (balance-rr)**<br>
> This mode transmits packets in a sequential order from the first available slave through the last.
> If two real interfaces are slaves in the bond and two packets arrive destined out of the bonded interface the first will be transmitted on the first slave and the second frame will be transmitted on the second slave.
> The third packet will be sent on the first and so on. This provides load balancing and fault tolerance.
>
> **Mode 1 (active-backup) - default**<br>
> This mode places one of the interfaces into a backup state and will only make it active if the link is lost by the active interface.
> Only one slave in the bond is active at an instance of time. A different slave becomes active only when the active slave fails.
> This mode provides fault tolerance.
>
> **Mode 2 (balance-xor)**<br>
> This mode transmits packets based on an XOR formula. Source MAC address is XOR'd with destination MAC address modula slave count.
> This selects the same slave for each destination MAC address and provides load balancing and fault tolerance.
>
> **Mode 3 (broadcast)**<br>
> This mode transmits everything on all slave interfaces. This mode is least used (only for specific purpose) and provides only fault tolerance.
>
> **Mode 4 (802.3ad)**<br>
> This mode is known as *Dynamic Link Aggregation*. It creates aggregation groups that share the same speed and duplex settings.
> It requires a switch that supports IEEE 802.3ad dynamic link.
> Slave selection for outgoing traffic is done according to the transmit hash policy, which may be changed from the default simple XOR policy via the xmit_hash_policy option.
> Note that not all transmit policies may be 802.3ad compliant, particularly inregards to the packet mis-ordering requirements of section 43.2.4 of the 802.3ad standard.
> Different peer implementations will have varying tolerances for noncompliance.
>
> **Mode 5 (balance-tlb)**<br>
> This mode is called *Adaptive transmit load balancing*. The outgoing traffic is distributed according to the current load and queue on each slave interface.
> Incoming traffic is received by the current slave.
>
> **Mode 6 (balance-alb)**<br>
> This mode is called *Adaptive load balancing*. This includes balance-tlb + receive load balancing (rlb) for IPV4 traffic.
> The receive load balancing is achieved by ARP negotiation.
> The bonding driver intercepts the ARP Replies sent by the server on their way out and overwrites the src hw address with the unique hw address of one of the slaves in the bond
> such that different clients use different hw addresses for the server.
>
> *Mode 1 (active-backup) is the recommended setting. 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.*

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 markdown="1" id="bridge-members-eth0" style="display:none">
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>
Network protocol:
: <select name="PROTOCOL:0" size="1" onchange="selectProtocol(this.form,'eth0',0)">
  <?=mk_option($eth0["PROTOCOL:0"], 'ipv4', 'IPv4 only');?>
  <?=mk_option($eth0["PROTOCOL:0"], 'ipv6', 'IPv6 only');?>
  <?=mk_option($eth0["PROTOCOL:0"], 'ipv4+ipv6', 'IPv4 + IPv6');?>
  </select>

> Select which protocol(s) are used. By default IPv4 only is used.<br>
> When both IPv4 and IPv6 is selected, each protocol can be configured independently.

<div markdown="1" class="ipv4-eth0-0" style="display:none">
IPv4 address assignment:
: <select name="USE_DHCP:0" size="1" onchange="selectProtocol(this.form,'eth0',0)">
  <?=mk_option($eth0["USE_DHCP:0"], 'yes', 'Automatic');?>
  <?=mk_option($eth0["USE_DHCP:0"], 'no', 'Static');?>
  </select>

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

<div markdown="1" class="more-ipv4-eth0-0" style="display:none">
IPv4 address:
: <input type="text" name="IPADDR:0" maxlength="15" value="<?=$eth0["IPADDR:0"]?>" class="narrow" pattern="<?=$validIP4?>" title="IPv4 address A.B.C.D">/<select name="NETMASK:0" size="1" class="slim">
  <?=mk_option($eth0["NETMASK:0"], "255.0.0.0", "8");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.0.0", "16");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.128.0", "17");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.192.0", "18");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.224.0", "19");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.240.0", "20");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.248.0", "21");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.252.0", "22");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.254.0", "23");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.255.0", "24", $eth0["IPADDR:0"]?"":"selected");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.255.128", "25");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.255.192", "26");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.255.224", "27");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.255.240", "28");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.255.248", "29");?>
  <?=mk_option($eth0["NETMASK:0"], "255.255.255.252", "30");?>
  </select>

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

IPv4 default gateway:
: <input type="text" name="GATEWAY:0" maxlength="15" value="<?=$eth0["GATEWAY:0"]?>" class="narrow" pattern="<?=$validIP4?>" title="IPv4 address A.B.C.D">
  <input type="text" name="METRIC:0" min="1" max="9999" value="<?=$eth0["METRIC:0"]?>" class="slim"><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>
IPv4 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 IPv4 DNS server(s) 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.

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 IPv4 DNS server to use. Enter a IPv4 address.
>
> Note: for *Active Directory* you **must** ensure this is set to the IP address of your AD Domain server.

<div markdown="1" id="dnsserver2" style="display:none">
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 IPv4 DNS server to use when IPv4 DNS server 1 is down.

</div>
<div markdown="1" id="dnsserver3" style="display:none">
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 IPv4 DNS server to use when IPv4 DNS servers 1 and 2 are both down.

</div>
</div>
<div markdown="1" class="ipv6-eth0-0" style="display:none">
IPv6 address assignment:
: <select name="USE_DHCP6:0" size="1" onchange="selectProtocol(this.form,'eth0',0)">
  <?=mk_option($eth0["USE_DHCP6:0"], 'yes', 'Automatic');?>
  <?=mk_option($eth0["USE_DHCP6:0"], 'no', 'Static');?>
  </select>

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

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

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

IPv6 default gateway:
: <input type="text" name="GATEWAY6:0" maxlength="39" value="<?=$eth0["GATEWAY6:0"]?>" pattern="<?=$validIP6?>" title="IPv6 address nnnn:xxxx::yyyy">
  <input type="text" name="METRIC6:0" min="1" max="9999" value="<?=$eth0["METRIC6:0"]?>" class="slim"><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 IPv6 address of your router.

IPv6 privacy extensions:
: <select name="PRIVACY6:0" size="1">
  <?=mk_option($eth0["PRIVACY6:0"], "0", "Disabled");?>
  <?=mk_option($eth0["PRIVACY6:0"], "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 markdown="1" id="dns6server1" style="display:none">
IPv6 DNS server assignment:
: <select name="DHCP6_KEEPRESOLV" size="1" onchange="checkDNSSettings6(this.form)">
  <?=mk_option($eth0['DHCP6_KEEPRESOLV'], "no", "Automatic");?>
  <?=mk_option($eth0['DHCP6_KEEPRESOLV'], "yes", "Static");?>
  </select>

> If set to *Automatic* the server will use IPv6 DNS server(s) returned by the local automatic assignment.<br>
> If set to *Static* you may enter your own list.

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 IPv6 DNS server to use. Enter a IPv6 address.

</div>
<div markdown="1" id="dns6server2" style="display:none">
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 IPv6 DNS server to use when IPv6 DNS server 1 is down.

</div>
<div markdown="1" id="dns6server3" style="display:none">
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 IPv6 DNS server to use when IPv6 DNS 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" placeholder="1500">

> 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>

> By default no VLANs are configured.<br>
> Enabling VLANs extends the number of logical connections over the same physical connection.
>
> Note: your router and switch must support VLANs too when this feature is used.

</div>
<div id='index-eth0-0'></div>
<?foreach ($vlan_eth0 as $i):?>
<div markdown="1" id="index-eth0-<?=$i?>" class="access-eth0 shade-<?=$display['theme']?>" style="display:none">
Interface description:
: <span class="status vshift"><i id="tag-eth0-<?=$i?>" class="fa fa-fw fa-chevron-down" style="cursor:pointer" onclick="viewToggle('eth0','<?=$i?>')"></i></span>
  <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.

<div markdown="1" id="view-eth0-<?=$i?>" style="display:none">
VLAN number:
: <input type="number" name="VLANID:<?=$i?>" min="1" max="4095" value="<?=$eth0["VLANID:$i"]?>" class="narrow gap" required>
  <?if (!$service):?><input type="button" class="form" value="Delete VLAN" onclick="removeVLAN($('#index-eth0-<?=$i?>'))"><?endif;?>

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

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>

> Select which protocol(s) are used. By default IPv4 only is used.<br>
> When both IPv4 and IPv6 is selected, each protocol can be configured independently.

<div markdown="1" class="ipv4-eth0-<?=$i?>" style="display:none">
IPv4 address assignment:
: <select name="USE_DHCP:<?=$i?>" size="1" onchange="selectProtocol(this.form,'eth0',<?=$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 a IPv4 address from the local DHCP server<br>
> *Static* - the IPv4 address is manually set for this interface<br>
> *None* - no IPv4 address is assigned to the interface (only available for VLANs)

<div markdown="1" class="more-ipv4-eth0-<?=$i?>" style="display:none">
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">/<select name="NETMASK:<?=$i?>" size="1" class="slim">
  <?=mk_option($eth0["NETMASK:$i"], "255.0.0.0", "8");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.0.0", "16");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.128.0", "17");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.192.0", "18");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.224.0", "19");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.240.0", "20");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.248.0", "21");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.252.0", "22");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.254.0", "23");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.0", "24", $eth0["IPADDR:$i"]?"":"selected");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.128", "25");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.192", "26");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.224", "27");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.240", "28");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.248", "29");?>
  <?=mk_option($eth0["NETMASK:$i"], "255.255.255.252", "30");?>
  </select>

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

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="slim"><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>
<div markdown="1" class="ipv6-eth0-<?=$i?>" style="display:none">
IPv6 address assignment:
: <select name="USE_DHCP6:<?=$i?>" size="1" onchange="selectProtocol(this.form,'eth0',<?=$i?>)">
  <?=mk_option($eth0["USE_DHCP6:$i"], 'yes', 'Automatic');?>
  <?=mk_option($eth0["USE_DHCP6:$i"], 'no', 'Static');?>
<?if ($i>0):?>
  <?=mk_option($eth0["USE_DHCP6:$i"], '', 'None');?>
<?endif;?>
  </select>

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

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

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

IPv6 default gateway:
: <input type="text" name="GATEWAY6:<?=$i?>" maxlength="39" value="<?=$eth0["GATEWAY6:$i"]?>" pattern="<?=$validIP6?>" title="IPv6 address nnnn:xxxx::yyyy">
  <input type="text" name="METRIC6:<?=$i?>" min="1" max="9999" value="<?=$eth0["METRIC6:$i"]?>" class="slim"><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 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>
</div>
</div>
<?endforeach;?>

&nbsp;
: <input type="submit" value="Apply" onclick="$('#wait_eth0').show()" disabled><input type="button" value="Done" onclick="done()">
<?if (!$service):?>
<input type="button" class="access-eth0" value="Add VLAN" onclick="addVLAN('eth0')" style="display:none">
<?else:?><?=$service?> must be <span class='strong big'>Stopped</span> to change (see [Settings](/Settings))<?endif;?>
</form>

<script markdown="1" type="text/html" id="network-template-eth0">
<div markdown="1" id="index-eth0-INDEX" class="access-eth0 shade-<?=$display['theme']?>">
Interface description:
: <span class="status vshift"><i id="tag-eth0-INDEX" class="fa fa-fw fa-chevron-up" style="cursor:pointer" onclick="viewToggle('eth0','INDEX')"></i></span>
  <input type="text" name="DESCRIPTION:INDEX" maxlength="80" value="<?=htmlspecialchars($eth0["DESCRIPTION:INDEX"])?>" onchange="exitCode(this.form,true)">

<div markdown="1" id="view-eth0-INDEX">
VLAN number:
: <input type="number" name="VLANID:INDEX" min="1" max="4095" value="<?=$eth0["VLANID:INDEX"]?>" class="narrow gap" required>
  <input type="button" class="form" value="Delete VLAN" onclick="removeVLAN($('#index-eth0-INDEX'))">

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>

<div markdown="1" class="ipv4-eth0-INDEX" style="display:none">
IPv4 address assignment:
: <select name="USE_DHCP:INDEX" size="1" onchange="selectProtocol(this.form,'eth0',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>

<div markdown="1" class="more-ipv4-eth0-INDEX" style="display:none">
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">/<select name="NETMASK:INDEX" size="1" class="slim">
  <?=mk_option($eth0["NETMASK:INDEX"], "255.0.0.0", "8");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.0.0", "16");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.128.0", "17");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.192.0", "18");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.224.0", "19");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.240.0", "20");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.248.0", "21");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.252.0", "22");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.254.0", "23");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.0", "24", "selected");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.128", "25");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.192", "26");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.224", "27");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.240", "28");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.248", "29");?>
  <?=mk_option($eth0["NETMASK:INDEX"], "255.255.255.252", "30");?>
  </select>

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="slim"><i class="fa fa-sort-numeric-asc"></i> <em>optional metric (lowest is preferred)</em>

</div>
</div>
<div markdown="1" class="ipv6-eth0-INDEX" style="display:none">
IPv6 address assignment:
: <select name="USE_DHCP6:INDEX" size="1" onchange="selectProtocol(this.form,'eth0',INDEX)">
  <?=mk_option($eth0["USE_DHCP6:INDEX"], 'yes', 'Automatic');?>
  <?=mk_option($eth0["USE_DHCP6:INDEX"], 'no', 'Static');?>
  <?=mk_option($eth0["USE_DHCP6:INDEX"], '', 'None');?>
  </select>

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

IPv6 default gateway:
: <input type="text" name="GATEWAY6:INDEX" maxlength="39" value="<?=$eth0["GATEWAY6:INDEX"]?>" pattern="<?=$validIP6?>" title="IPv6 address nnnn:xxxx::yyyy">
  <input type="text" name="METRIC6:INDEX" min="1" max="9999" value="<?=$eth0["METRIC6:INDEX"]?>" class="slim"><i class="fa fa-sort-numeric-asc"></i> <em>optional metric (lowest is preferred)</em>

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

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