{% if error == true then %}
                    <div id="info"><center><H1>Network - Manage Interface</H1></center></div>
                    <div id="info">
                        <center>
                            <h2><img src="images/warning.png"/> Cannot load interface details</h2>
                            An invalid interface was selected, or the interface has not been marked<br>
                            as being configurable in the interface file {{file}}<br><br>
                            <a href="network_interfaces.lua">View network interfaces</a> | <a href="network_status.lua">View network status</a>
                        </center>
                    </div>

{% else %}
                    <script language="Javascript" type="text/javascript">
                    
                        function removeField(node,field)
                        {
                            node.parentNode.parentNode.removeChild(node.parentNode);
                            var field_area = document.getElementById(field+"_list");
                            var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
                            var loop;
                            for (loop = 0; loop < all_inputs.length; loop++)
                            {
                                all_inputs[loop].name = field+(loop+1);
                            }
                        }
                        
                        //Add more fields dynamically.
                        function addField(field, limit)
                        {
                            if (!document.getElementById) return; //Prevent older browsers from getting any further.
                            var field_area = document.getElementById(field+"_list");
                            var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
                            var count = all_inputs.length;
                            if(count+1 > limit && limit > 0) return;
                            
                            if(document.createElement)
                            { //W3C Dom method.
                                    var li = document.createElement("li");
                                    li.innerHTML = "<input name=\""+(field+(count+1))+"\" style=\"width:300px;\"/><a style=\"cursor:pointer;color:blue;\" onclick=\"removeField(this, '"+field+"');\"> <img src=\"images/trash.png\" alt=\"Delete\" title=\"Delete\"/></a>";
                                    field_area.appendChild(li);
                            }
                            else
                            {       //Older Method
                            }
                        }
                        

                        function check(area)
                        {
                            var inputs = area.getElementsByTagName("input");
                            if (!inputs[0].checked || inputs[1].checked)
                            {
                                inputs[2].readOnly = true;
                                inputs[3].readOnly = true;
                                inputs[4].readOnly = true;
                            }
                            else
                            {
                                inputs[2].readOnly = false;
                                inputs[3].readOnly = false;
                                inputs[4].readOnly = false;
                            }
                        }
                        
                        function ValidateIPaddress(inputText)  
                        {  
                            var ipformat = /^(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]?)\.(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]?)$/;
                            if (inputText.match(ipformat))
                            {  
                                return true;  
                            }  
                            else  
                            {  
                                return false;  
                            }  
                        }
                        
                        function ValidateNetmask(inputText)
                        {
                           var num = parseInt(inputText,10)
                           console.log("Check NM")
                           if (!isNaN(num) && num > 0 && num <= 32)
                           {
                              return true
                           }
                           else
                           {
                              return false
                           }
                        }
                        
                        function ValidateForm(form,is_wwan)
                        {
                            if (form.getAttribute('submitted')) return false;
                            var inputs = form.getElementsByTagName("input");
                            var loop;
                            var errors = 0;
                            for (loop = 2; loop < 5; loop++)
                            {
                                inputs[loop].removeAttribute("invalidIP");
                                var warn = document.getElementById("invalidIP_"+loop);
                                if (warn)
                                {
                                    warn.parentNode.removeChild(warn);
                                }

                                if(loop != 3)
                                {
                                   if ((inputs[loop].value != "") && (!ValidateIPaddress(inputs[loop].value)) && (!inputs[loop].readOnly))
                                   {
                                      //alert("Input " + loop + " has an invalid IP address! " + inputs[loop].value);
                                      inputs[loop].setAttribute("invalidIP","true");
                                      errors++;
                                   }
                                }
                                else if ((inputs[loop].value != "") && !(ValidateNetmask(inputs[loop].value) || ValidateIPaddress(inputs[loop].value)) && (!inputs[loop].readOnly))
                                {
                                      inputs[loop].setAttribute("invalidIP","true");
                                      errors++;
                                }
                                
                                if (inputs[loop].getAttribute("invalidIP") === "true")
                                {
                                    var warn = document.createElement("span");
                                    warn.id = "invalidIP_"+loop;
                                    warn.innerHTML = " <img src='images/warning.png' alt='Invalid IP' title='Invalid IP'/>";
                                    inputs[loop].parentNode.appendChild(warn);
                                }
                            }
                            if (errors)
                            {
                                alert("You have entered one or more invalid IP addresses.\nPlease fix the indicated addresses.");
                                return false;
                            }
                            else
                            {
                                form.setAttribute('submitted','true');
                                return true;
                            }
                        }

                    </script>
                    <div id="info">
                        <div style="background:url(images/network.png); background-size:32px; background-repeat:no-repeat; background-position: 20px center;">
                            <center><h1>Network - Interfaces</h1></center>
                        </div>
                    </div>
                    {% if userLevel == 1 then %}
                       <center><b>Note:</B> Editing this section requires administrator privileges.</center><br>
                    {% end %}
                    <h3>Managing Profile {{name}}</h3>
                    <div class="formLayoutfull">
                        <form action="network_manage.lua" method="post" onsubmit="return ValidateForm(this,{{wwan_type}});">
                        <label for="enable">Enable this profile</label>
                        <input type="checkbox" value="enabled" name="profile" id="enable" {% if enabled == "enabled" then %} checked {% end %} onchange="check(this.parentNode);"{{buttonControl}}/><br>
                        <label for="dhcp">Obtain automatically from DHCP</label>
                        <input type="checkbox" value="dhcp" name="method" id="dhcp"  {% if method == "dhcp" then %} checked {% end %} onchange="check(this.parentNode);"{{buttonControl}}/><br>
                        <ul>
                                <li>
                                   <label style="display: inline-block; width: 120px;">IP address:</label> 
                                   <input type="text" name="address" value="{{address}}" {{inputControl}}/>
                                </li>
                                <li>
                                   <label style="display: inline-block; width: 120px;">Netmask:</label> 
                                   <input type="text" name="netmask" value="{{netmask}}" {{inputControl}}/>
                                </li>
                                <li>
                                   <label style="display: inline-block; width: 120px;">Gateway:</label> 
                                   <input type="text" name="gateway" value="{{gateway}}" {{inputControl}}/>
                                </li>
                        </ul>
                        {% if type == "wwan" then %}
                         <hr>
                         <h3>Modem settings: </h3>
                         <ul>
                            <li>
                                <label style="display: inline-block; width: 120px;">APN: </label>
                                <input type="text" name="apn" id="apn" value="{{apn}}" {{inputControl}}/>
                            </li>
                            <li>
                                <label style="display: inline-block; width: 120px;">Username: </label>
                                <input type="text" name="username" id="username" value="{{user}}" {{inputControl}}/>
                            </li>
                            <li>
                                <label style="display: inline-block; width: 120px;">Password: </label>
                                <input type="text" name="password" id="password" value="{{password}}" {{inputControl}}/>
                            </li>
                         </ul>
                        {% end %}
                        <input type="hidden" name="interface" value="{{name}}"/>
                        <hr>
                        <div style="padding: 20px; border: solid 1px #aaaaaa;">
                        <h3>DNS Settings</h3>
                         <hr>
                         <br>
                         <label>List of domain name servers</label>
                        <ol id="server_list" >
                        {% for idx,server in ipairs(nameservers) do %}
                        <li>
                           <input type="text" name="server{{idx}}" value="{{server}}" style="width:300px;" {{inputControl}}/>
                           <a style="cursor:pointer; color:blue;" onclick="{{scriptControl}}removeField(this, 'server');">
                              <img src="images/trash.png" alt="Delete" title="Delete"/>
                           </a>
                        </li>  
                        {% end %}
                        </ol>
                        <input type="button" value="Add Nameserver" onclick="addField('server', 10);" {{buttonControl}} />
                          <br/>
                          <br/>
                          <hr/>
                          <br/>
                          <label>Search domain</label><input type="text" name="search" value="{{domain}}" style="width: 300px;" {{inputControl}} />
                          <br/>
                          <br/>
                        
                        </div>
                        <br>
                        <hr/>
                        <br/>
                        
                        {% if saved == true then %}
                        <br><b><img src="images/ok.png"/> Changes saved, but may take a few seconds to take effect.</b><br><br>
                        
                        {% end %}
                          <input type="button" name="backButton" value="Back to Interfaces" onclick="window.location.assign('network_interfaces.lua');"/>
                          <input type="Submit" name="submitButton" value="Save and Apply" {{buttonControl}}/>
                        
                        </form>
                    </div>
                    <h3>Interface configuration</h3>
                    <pre class="formLayoutfull">{{ifconfigResult}}
                    </pre>
{% end %}