<?php require_once "atp.header.php"; ?>

<section class="content-wrapper" data-heading="settings" id="ip">

	<!--Heading-->
	<div class="page-title">
		<h1>IP Address</h1>
	</div>

    <!--IP Settings-->
    <section class="box top-wrapper" id="ip-container">
        <fieldset>
            <legend><h2>IP Address</h2></legend>
            <div class="flex-row">
                <input type="radio" name="ip-type" value="false" id="static-ip">
                <label for="static-ip"><h2>Static IP Address</h2></label>
            </div>
            <div class="flex-row">
                <div class="flex-heading">
                    <h2>IP Address:</h2>
                </div>
                <input type="text" id="ip-address" name="ip-field">
            </div>
            <div class="flex-row">
                <div class="flex-heading">
                    <h2>Netmask:</h2>
                </div>
                <input type="text" id="netmask" name="ip-field">
            </div>
            <div class="flex-row">
                <div class="flex-heading">
                    <h2>Gateway:</h2>
                </div>
                <input type="text" id="gateway" name="ip-field">
            </div>
            
            <div class="flex-row">
                <input type="radio" name="ip-type" value="true" id="dhcp-ip">
                <label for="dhcp-ip"><h2>DHCP</h2></label>
            </div>
            <div class="flex-row">
                <div class="flex-heading">
                    <h2>IP Address:</h2>
                </div>
                <input type="text" id="dhcp-address" disabled>
            </div>
        </fieldset>
    </section>

    <!--MAC Addresses-->
    <div class="box top-wrapper" id="mac-container">
        <fieldset>
            <legend><h2>MAC Address</h2></legend>
            <div class="flex-row">
                <div class="flex-heading"><h2>Internal Interface:</h2></div>
                <div id="internal-mac"></div>
            </div>
            <div class="flex-row">
                <div class="flex-heading"><h2>Webserver:</h2></div>
                <div id="external-mac"></div>
            </div>
        </fieldset>
    </div>

	<!--Buttons-->
	<div class="button-box" id="button-container">
		<div class="box">
			<a id="ok-button" class="button button-gray button-medium">OK</a>
			<a id="cancel-button" class="button button-gray button-medium">Cancel</a>
			<a id="apply-button" class="button button-gray button-medium">Apply</a>
		</div>
	</div>

<script type="text/javascript" src="/js/atp.network-address.js" defer></script>
<script>
$(document).ready(function() {
	let model = new NetworkAddressModel();
	let controller = new NetworkAddressController(model);
	let view = new NetworkAddressView(controller);
});
</script>

<?php require_once "footer.php"?>