<!-- Main Content -->
      <div class="main-content">
        <section class="section">
          <div class="section-header">
            <h1>Server Management</h1>
          </div>
          <div class="section-body">
            <div class="row">
              <div class="col-md-4">
                <div class="card">
                  <div class="card-body">
                    <div class="section-error">
                       <div class="errors"></div>
                    </div>
                      <div class="alert alert-warning text-center add-server-alert d-none" role="alert">
                          <i class="fas fa-exclamation-triangle"></i>
                          <br>
                          <strong>SERVER INSTALLER IS UNDER MAINTENANCE<br>please try again later. It will be active again once the update is done. </strong>
                      </div>
                    <form action="" class="add-server d-none" autocomplete="off">
                        <input type="hidden" name="_csrf" value="{{csrfToken}}">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label for="servername">Server Name</label>
                                    <input id="servername" type="text" class="form-control servername" name="servername" tabindex="1" required="">
                                </div>
                                <div class="form-group">
                                    <label for="serverip">Server Host/Ip</label>
                                    <input id="serverip" type="text" class="form-control serverip" name="serverip" tabindex="1" required="">
                                </div>
                                <div class="form-group">
                                    <label for="serverpass">Server Password</label>
                                    <input id="serverpass" type="text" class="form-control serverpass" name="serverpass" tabindex="1" required="">
                                </div>
                                <div class="form-group">
                                    <label for="serveruser">Server User</label>
                                    <input id="serveruser" type="text" class="form-control serveruser" name="serveruser" tabindex="1" value="root" required="">
                                </div>
                                <div class="form-group">
                                    <label for="serverport">Server Port</label>
                                    <input id="serverport" type="text" class="form-control serverport" name="serverport" tabindex="1" value="22" required="">
                                </div>
                            </div>
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label for="serverprovider">Server Provider</label>
                                    <select class="form-control" id="serverprovider" name="serverprovider">
                                        <option value="1" selected="" class="text-primary">Other (default)</option>
                                        <option value="2" class="text-primary">Vultr</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="servertype">Server Vpn Type</label>
                                    <select class="form-control" id="servertype" name="servertype">
                                        <option disabled>----- DEBIAN (10/11) OS -----</option>
                                        <option value="4" selected="" class="text-primary">DEBIAN OPENVPN (WS)</option>
                                        <option value="5" class="text-primary">DEBIAN OPENCONNECT (WS)</option>
                                        <option value="6" class="text-primary">DEBIAN SSH (WS)</option>
                                        <option value="1" class="text-primary">DEBIAN OPENVPN (HTTP)</option>
                                        <option value="2" class="text-primary">DEBIAN OPENCONNECT (HTTP)</option>
                                        <option value="3" class="text-primary">DEBIAN SSH (HTTP)</option>
                                        <option value="7" class="text-primary">DEBIAN HYSTERIA (UDP)</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="servertcp">Custom Tcp Port</label>
                                    <input id="servertcp" type="text" class="form-control servertcp" name="servercustomtcp" tabindex="1" value="1194" required="">
                                </div>
                                <div class="form-group">
                                    <label for="serverudp">Custom Udp Port</label>
                                    <input id="serverudp" type="text" class="form-control serverudp" name="servercustomudp" tabindex="1" value="53" required="">
                                </div>
                            </div>
                        </div>
                      <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-block btn-add-server" tabindex="4">Install</button>
                      </div>
                    </form>
                  </div>
                </div>

                <div class="card">
                  <div class="card-body">
                      <a href="https://drive.google.com/uc?export=download&id=1NtQ3MpF_sgwaCwRNmbFSuiBVg1tFSptx" target="_blank" class="btn btn-primary btn-block"><i class="fas fa-download"></i> OPENVPN CONFIG</a>
                  </div>
                </div>
              </div>

              <div class="col-md-8">
                <div class="card">
                  <div class="card-body">
                    <div class="table-responsive">
                      <table class="table table-striped table-listserver" style="width: 100%">
                        <thead>
                          <tr>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Service</th>
                            <th>Location</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>