<div class="split">
  <div class="left">
    <div class="name form-group">
      <label>Name</label>
      <input type="text" class="form-control" placeholder="Enter name" data-toggle="tooltip" title="Name of VPN server" value="<%= name %>">
    </div>
    <div class="network form-group">
      <label>Network</label>
      <input type="text" class="form-control" placeholder="Enter network address" data-toggle="tooltip" title="Network address for the private network that will be created for VPN clients" value="<%= network %>">
    </div>
    <div class="interface form-group">
      <label>Interface</label>
      <input type="text" class="form-control" placeholder="Enter tunnel interface" data-toggle="tooltip" title="Tunnel interface that will be created for VPN connections" value="<%= interface %>">
    </div>
    <div class="port form-group">
      <label>Port</label>
      <input type="text" class="form-control" placeholder="Enter port number" data-toggle="tooltip" title="Port number for VPN connections" value="<%= port %>">
    </div>
  </div>
  <div class="right">
    <div class="protocol form-group">
      <label>Protocol</label>
      <select class="form-control" data-toggle="tooltip" title="Protocol for VPN connections">
        <option value="udp" <%= (protocol === 'udp') ? 'selected' : '' %>>udp</option>
        <option value="tcp" <%= (protocol === 'tcp') ? 'selected' : '' %>>tcp</option>
      </select>
    </div>
    <div class="public-address form-group">
      <label>Public IP</label>
      <input type="text" class="form-control" placeholder="Enter public address" data-toggle="tooltip" title="Public IP address or domain name of the VPN server" value="<%= public_address %>">
    </div>
    <div class="local-network-toggle form-group">
      <label>Local Network Only</label>
      <div class="selector <%= local_network ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Only route traffic destined to the specified local network">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
    <div class="local-network form-group" <%= (local_network) ? '' : 'style="display: none;"' %>>
      <label>Local Network</label>
      <input type="text" class="form-control" placeholder="Enter network address" data-toggle="tooltip" title="Local network address routed to VPN clients" value="<%= local_network %>">
    </div>
    <div class="otp-auth-toggle form-group">
      <label>Enable Two-Step Authentication</label>
      <div class="selector <%= otp_auth ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Enable two-step authentication using Google Authenticator. Verification code is entered as the user password when connecting">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
    <div class="debug-toggle form-group">
      <label>Enable Debugging Output</label>
      <div class="selector <%= debug ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Show server debugging information in output">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
  </div>
</div>
