<link rel="stylesheet" href="/assets/js/DataTables/css/jquery.dataTables.min.css" />
<script src="/assets/js/DataTables/js/jquery.dataTables.min.js"></script>

<!--  Autocomplete Combo Box -->
<link rel="stylesheet" href="/assets/css/addon/autocomplete-combobox.css" />
<script src="/assets/js/addon/autocomplete-combobox.js"></script>

<script src="/assets/js/admin/voip/devices.js"></script>

<h1>VoIP Device List</h1>
<hr />
<br />
<form method="POST">
VoIP Account: <select name="data[account_number]" id="account_number"></select>
</form>
<br /><br />
<button id="add-device">Add Device</button>
<br /><br />
<table id="myTable" class="display">
  <thead>
    <tr>
      <th>MAC Address</th>
      <th>Device Type</th>
      <th>Account</th>
      <th title="Line # - Keys">L - K</th>
      <th>EXT</th>
      <th>Primary</th>
      <th>Backup</th>
      <th>Called Home</th>
      <th>App Log</th>
      <th>Boot Log</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<div id="dialog-add-device" title="Add Device">
  <p class="validateTips">All form fields are required.</p>
<form method="POST" id="add_device_form">
<input type="hidden" name="data[account_locked]" value="1" id="ad_account_locked">
<table class="bTable">
<tr>
  <td>MAC Address</td>
  <td><input type="text" name="data[mac]" value=""></td>
</tr>
<tr>
  <td>Account:</td>
  <td><select name="data[account_number]" id="ad_actList"></select></td>
</tr>
<tr>
  <td>Device</td>
  <td><select name="data[vdtid]" id="ad_deviceType">{DEVICE_LIST}</select></td>
</tr>
<tr>
  <td>Line Keys</td>
  <td id="add_device_lk"></td>
</tr>
<tr>
  <td>Dialplan</td>
  <td><input type="text" id="ad_dp" name="data[dialplan]" style="width: 525px;"></td>
</tr>
<tr>
  <td>Dialplan Timeout</td>
  <td><input type="text" id="ad_dpt" name="data[dialplan_timeout]" style="width: 525px;"></td>
</tr>
<tr>
  <td>Account Locked:</td>
  <td><input type="radio" name="account_locked" value="1" checked> Yes <input type="radio" name="account_locked" value="0"> No</td>
</tr>
<tr>
  <td colspan="2">
  <div id="add_device_tabs">
   <ul></ul>
  </div>
  </td>
</tr>
</table>
</form>
</div>

<div id="dialog-edit-device" title="Edit Device">
<p class="validateTips">All form fields are required.</p>
<form method="post" id="edit_device_form">
<input type="hidden" name="data[account_locked]" value="1" id="ed_account_locked">
<input type="hidden" name="data[mac]" id="ed_mac_addr">
<table class="bTable">
<tr>
  <td>MAC Address</td>
  <td id="ed_mac"></td>
</tr>
<tr>
  <td>Device</td>
  <td><select name="data[vdtid]" id="ed_deviceType">{DEVICE_LIST}</select></td>
</tr>
<tr>
  <td>Line Keys</td>
  <td id="ed_lineKeys"></td>
</tr>
<tr>
  <td>Dialplan</td>
  <td><input type="text" id="ed_dp" name="data[dialplan]" style="width: 525px;"></td>
</tr>
<tr>
  <td>Dialplan Timeout</td>
  <td><input type="text" id="ed_dpt" name="data[dialplan_timeout]" style="width: 525px;"></td>
</tr>
<tr>
  <td>Account:</td>
  <td><select name="data[account_number]" id="ed_actList"></select></td>
</tr>
<tr>
  <td>Account Locked:</td>
  <td><input type="radio" name="ed_account_locked" value="1"> Yes <input type="radio" name="ed_account_locked" value="0"> No</td>
</tr>
<tr>
  <td colspan="2">
  <div id="edit_device_tabs">
   <ul></ul>
  </div>
  </td>
</tr>
</table>
</form>
</div>

<div id="dialog-view-log" title="View Log">
<h1 id="vlh">Some Log</h1>
<div id="ld" style="white-space: pre-wrap;"></div>
</div>