<table id="data-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th class="nd_center-cell">Full Name</th>
      <th class="nd_center-cell">Username</th>
      <th class="nd_center-cell">Password</th>
      <th class="nd_center-cell">Auth Method</th>
      <th class="nd_center-cell">Port Control</th>
      <th class="nd_center-cell">Administrator</th>
      <th class="nd_center-cell">Created</th>
      <th class="nd_center-cell">Last Login</th>
      <th class="nd_center-cell">Note</th>
      <th class="nd_center-cell">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="nd_center-cell"><input data-form="add" name="fullname" type="text"></td>
      <td class="nd_center-cell"><input class="span2" data-form="add" name="username" type="text"></td>
      <td class="nd_center-cell"><input class="span1" data-form="add" name="password" type="password"></td>
      <td class="nd_center-cell">
        <div class="form-group">
          <select class="span2 form-control" data-form="add" name="auth_method">
            <option value="" selected>Netdisco Password</option>
            <option value="ldap">LDAP</option>
            <option value="radius">RADIUS</option>
            <option value="tacacs">TACACS</option>
          </select>
        </div>
      </td>
      <td class="nd_center-cell">
        <div class="form-group">
          <select class="span2 form-control" data-form="update" name="port_control">
            <option value="" selected>Off</option>
            <option value="_global_">Enabled (any port)</option>
            [% FOREACH role IN port_control_roles %]
            <option value="[% role | html_entity %]">Role: [% role | html_entity %]</option>
            [% END %]
          </select>
        </div>
      </td>
      <td class="nd_center-cell"><input data-form="add" type="checkbox" name="admin"></td>
      <td class="nd_center-cell"></td>
      <td class="nd_center-cell"></td>
      <td class="nd_center-cell"><input class="span2" data-form="add" name="note" type="text"></td>
      <td nowrap class="nd_center-cell">
        <button class="btn btn-small nd_adminbutton" name="add" type="submit"><i class="icon-plus-sign"></i> Add</button>
      </td>
    </tr>

    [% SET count = 0 %]
    [% FOREACH row IN results %]
    [% SET count = count + 1 %]
    <tr>
      <td class="nd_center-cell">
        <input data-form="update" name="fullname" type="text" value="[% row.fullname | html_entity %]">
      </td>
      <td class="nd_center-cell">
        <input class="span2" data-form="update" name="username" type="text" value="[% row.username | html_entity %]">
      </td>
      <td class="nd_center-cell">
        <input class="span1" data-form="update" name="password" type="password" value="********">
      </td>
      <td class="nd_center-cell">
        <div class="form-group">
          <select class="span2 form-control" data-form="update" name="auth_method">
            <option value="">Netdisco Password</option>
            <option[% ' selected' IF row.ldap %] value="ldap">LDAP</option>
            <option[% ' selected' IF row.radius %] value="radius">RADIUS</option>
            <option[% ' selected' IF row.tacacs %] value="tacacs">TACACS</option>
          </select>
        </div>
      </td>
      <td class="nd_center-cell">
        <div class="form-group">
          <select class="span2 form-control" data-form="update" name="port_control">
            <option[% ' selected' IF NOT row.port_control %] value="">Off</option>
            <option[% ' selected' IF row.port_control AND row.portctl_role == "" %] value="_global_">Enabled (any port)</option>
            [% FOREACH role IN port_control_roles %]
            <option[% ' selected' IF row.port_control AND row.portctl_role == role %] value="[% role | html_entity %]">Role: [% role | html_entity %]</option>
            [% END %]
          </select>
        </div>
      </td>
      <td class="nd_center-cell">
        <input data-form="update" name="admin" type="checkbox" [% ' checked="checked"' IF row.admin %]>
      </td>
      <td class="nd_center-cell">[% row.created   | html_entity %]</td>
      <td class="nd_center-cell">[% row.last_seen | html_entity %]</td>
      <td class="nd_center-cell">
        <input class="span2" data-form="update" name="note" type="text" value="[% row.note | html_entity %]">
      </td>

      <td nowrap class="nd_center-cell">
        <button class="btn nd_adminbutton" name="update" type="submit"><i class="icon-save text-warning"></i></button>

        <button class="btn" data-toggle="modal"
          data-target="#nd_devdel-[% count | html_entity %]" type="button"><i class="icon-trash text-error"></i></button>

        <div id="nd_devdel-[% count | html_entity %]" class="nd_modal nd_deep-horizon modal hide fade" tabindex="-1"
          role="dialog" aria-labelledby="nd_devdel-label-[% count | html_entity %]" aria-hidden="true">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
            <h3 id="nd_devdel-label-[% count | html_entity %]">Are you sure?</h3>
          </div>
          <div class="modal-body">
            <blockquote>
              <p class="text-info">User &quot;[% row.username | html_entity %]&quot; will be deleted.</p>
            </blockquote>
            <input data-form="del" name="username" type="hidden" value="[% row.username | html_entity %]">
          </div>
          <div class="modal-footer">
            <button class="btn btn-success" data-dismiss="modal" aria-hidden="true">Cancel</button>
            <button class="btn btn-danger nd_adminbutton" name="del" data-dismiss="modal">Confirm</button>
          </div>
        </div>
      </td>
    </tr>
    [% END %]
  </tbody>
</table>

<script>
$(document).ready(function() {
  $('#data-table').dataTable({
    "columnDefs": [ 
      {
        "targets": [ 2, 3, 4, 5, 6, 7, 8, 9 ],
        "searchable": false
      },
      {
        "targets": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ],
        "orderable": false
      }
    ],
[% INCLUDE 'ajax/datatabledefaults.tt' -%]
  } );
} );
</script>