<script type="text/javascript">

function up_cin() {
  document.getElementById("cin").value = document.getElementById("ext").value;
}

function gna() {
  var voip = document.getElementById("vcode").value;

  if (voip == "") {
    alert("Please Select An Account First");
    return(false);
  }
  else {
    return(true);
  }
}
</script>
<h1>Add New Extension</h1>
<hr />
<div>
<div style="float:left;">
{MESSAGES}
<form method="POST">
<table class="bTable">
<tr>
  <td>Account:</td>
  <td><select name="data[voip_code]" onChange="form.submit()" id="vcode">{VCODES}</select></td>
</tr>
<tr>
  <td>Extension:</td>
  <td><input type="test" name="data[extension]" value="{EXTENSION}" onChange="javascript:up_cin();" id="ext"> <input type="submit" name="data[up]" value="Get Next Available" onClick="return gna();"></td>
</tr>
<tr>
  <td>Caller ID</td>
  <td>Name: <input type="text" name="data[callerid_name]" value="{CALLERID_NAME}"> Number: <input type="text" name="data[callerid_number]" value="{CALLERID_NUMBER}" id="cin"></td>
</tr>
<tr>
  <td>Secret</td>
  <td><input type="text" name="data[secret]" value="{SECRET}"> <input type="submit" name="data[up]" value="Generate New Password"></td>
<tr>
  <td>&nbsp;</td>
  <td><input type="submit" name="data[up]" value="Add" onClick="return confirm('Are you sure you want to add this extension?')"></td>
</tr>
</table>
</form>
</div>
<div style="float: right;">
<h2>Existing Extensions</h2>
<table class="bTable">
<tr>
  <td>EXT</td>
  <td>CID</td>
</tr>
{EROWS}
</table>
</div>
</div>