[#if OK_MSG!=""#]<div class="alert alert-success">[#OK_MSG#]</div>[#endif#]
[#if ERR_MSG!=""#]<div class="alert alert-danger">[#ERR_MSG#]</div>[#endif#]
<div class="row">
 <div class="col-md-6">
  <div  id='api_settings'>
   <h3>Settings</h3>
   <form action="?" method="post" enctype="multipart/form-data" name="frmEdit" class="form">
     <div class="form-group">
      <label [#if ERR_NETWORK_KEY#] style="color:red;font-weight:bold"[#endif#]>
       Network key:
       (*)
      </label>
      <input type="text" name="network_key" value="[#NETWORK_KEY#]" class="form-control">
     </div>
    <div class="form-group">
     <button type="submit" name="subm" value="Submit" class="btn btn-primary"><#LANG_UPDATE#></button>
     <input type="hidden" name="view_mode" value="update_settings">
     <input type="hidden" name="mode" value="update">
    </div>
   </form>
  </div>
  <hr>
  <h3>Actions</h3>
  <div>
   <a href="?mode=join" class="btn btn-default btn-success">Join Network</a>
   <a href="?mode=leave" class="btn btn-default btn-warning">Leave Network</a>
  </div>
  &nbsp;
  <div>
   <a href="?mode=install" class="btn btn-default" onclick="return confirm('Please confirm.');">Install Zerotier App</a>
  </div>
 </div>
 <div class="col-md-6">
  <h3>Zerotire status</h3>
  <div id="zt_status">...</div>
  <h3>Network status</h3>
  <div id="network_status">...</div>
 </div>
</div>

<script type="text/javascript">
 var statusTimer;
 function updateNetworkStatus() {
  var url='<#ROOTHTML#>ajax/zerotier.html?op=network_status';
  $.ajax({
   url: url
  }).done(function(data) {
   $('#network_status').html(data);
   statusTimer=setTimeout('updateNetworkStatus();',2000);
  });
 }
 updateNetworkStatus();

 var statusTimer1;
 function updateNetworkStatus1() {
  var url='<#ROOTHTML#>ajax/zerotier.html?op=zerotier_status';
  $.ajax({
   url: url
  }).done(function(data) {
   $('#zt_status').html(data);
   statusTimer1=setTimeout('updateNetworkStatus1();',5000);
  });
 }
 updateNetworkStatus1();
</script>