<!DOCTYPE html>
<html lang="en">
  <%- include('components/head.ejs') %>
    <body class="g-sidenav-show ">
      <%- include('components/sidebar.ejs') %>
      <%- include('components/nav.ejs') %> 
      
      <div class="container-fluid mb-auto">
              <div>
        <% if (req.query.success === 'projectsuccess') { %>
        <div class="alert" style="background-color:#5eff53;">
          <span class="text-gray-800">Project Created Successfully</span>
      </div>
      <% } %>
      <% if (req.query.success === 'vpssuccess') { %>
        <div class="alert" style="background-color:#5eff53;">
          <span class="text-gray-800">VPS Created Successfully</span>
      </div>
      <% } %>
      <% if (req.query.success === 'setupvps') { %>
        <div class="alert" style="background-color:yellow;">
          <span class="text-gray-800">Setting your VPS Up. Can Take a few minutes</span>
      </div>
      <% } %>
      <% if (req.query.err === 'outofstock') { %>
        <div class="alert" style="background-color: red;">
          <span class="text-gray-300">Out Of Stock</span>
      </div>
      <% } %>
      </div>
      <div class="row">
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3 rounded-xl shadow-xl" style="background-color: #303030">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-uppercase font-weight-bold text-gray-200">Allocated RAM</p>
                    <h5 class="font-weight-bolder text-blue-300"> <%= vps.ram %> GB </h5>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/ram.png">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3 rounded-xl" style="background-color: #303030">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-uppercase font-weight-bold text-gray-200">Allocated CPU</p>
                    <h5 class="font-weight-bolder text-blue-300"> <%= vps.cpu %> Cores </h5>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/cpu.png">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-body p-3 rounded-xl" style="background-color: #303030">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-uppercase font-weight-bold text-gray-200">Allocated Disk</p>
                    <h5 class="font-weight-bolder text-blue-300"> <%= vps.disk %> GB </h5>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/disk.png">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6">
          <div class="card">
            <div class="card-body p-3 rounded-xl" style="background-color: #303030">
              <div class="row">
                <div class="col-8">
                  <div class="numbers">
                    <p class="text-sm mb-0 text-uppercase font-weight-bold text-gray-200">VPS Allocated</p>
                    <h5 class="font-weight-bolder text-blue-300"> <%= vpsno %> Slots </h5>
                  </div>
                </div>
                <div class="col-4 text-end">
                  <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/server.png">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row mt-4">
        <div class="col-lg-7 mb-lg-0 mb-4">
          <div class="card" style="background-color: #303030">
            <div class="card-header pb-0 p-3" style="background-color: #303030">
              <div class="d-flex justify-content-between">
                <h6 class="mb-2 text-blue-400">Your Projects</h6>
                <% if (has_project) { %>
                  <% if (has_vps) { %>
                  <% }
                  else { %>
                    <div>
                      <!-- Button trigger modal -->
                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Create VPS </button>
                      <!-- Modal -->
                      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="createVPS" aria-hidden="true">
                        <div class="modal-dialog">
                          <div class="modal-content border-0 text-blue-100">
                            <div class="modal-header bg-gray-800 border-0">
                              <h1 class="modal-title fs-5 text-blue-100" id="ModalLabel">Create a VPS!</h1>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body bg-gray-800 border-0">
                              <form action="/createVPS" method="POST">
                                <div class="mb-3">
                                  <label for="ProjectContainerName1" class="form-label text-info">VPS Name:</label>
                                  <input type="text" class="form-control" name="inputVPSName1" aria-describedby="vpsHelp" pattern="[A-Za-z]+" placeholder="VPS Name" required>
                                  <div id="vpsHelp" class="form-text text-secondary">Use Letters only without spaces and special characters.</div>
                                </div>   
                                <div class="mb-3">
                                  <label for="ProjectContainerName1" class="form-label text-info">VPS Password:</label>
                                  <input type="password" class="form-control" name="inputVPSPass1" aria-describedby="vpsHelp" pattern="[A-Za-z]+" placeholder="VPS Password" required>
                                  <div id="vpsHelp" class="form-text text-secondary">Use Letters only without spaces and special characters.</div>
                                </div>                          
                                <div class="mb-3">
                                  <label for="inputOs1" class="form-label text-info">VPS OS:</label>
                                  <select class="form-select" name="inputOs1" aria-label="OS Select" required>
                                    <option value="" selected disabled>Choose a OS</option>
                                    <option value="Debian">Debian 11</option>
            
                                  </select>
                                </div>                            
                                <div class="mb-3 form-check">
                                  <input type="checkbox" class="form-check-input" id="rulesCheck1" required>
                                  <label class="form-check-label text-info" for="rulesCheck1">I agree to UnknownVPS Rules and Terms Of Service.</label>
                                </div>
                            </div>
                            <div class="modal-footer bg-gray-800 border-0">
                              <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                              <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                          </form>
                          </div>
                        </div>
                      </div>
                    </div>
                  <% } %>
                <% } else { %>             
                <div>
                  <!-- Button trigger modal -->
                  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Create Project </button>
                  <!-- Modal -->
                  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="createProject" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content border-0 text-blue-100">
                        <div class="modal-header bg-gray-800 border-0">
                          <h1 class="modal-title fs-5 text-blue-100" id="ModalLabel">Create a project!</h1>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body bg-gray-800 border-0">
                          <form action="/createProject" method="POST">
                            <div class="mb-3">
                              <label for="ProjectName1" class="form-label text-info">Project Name:</label>
                              <input type="text" class="form-control" name="inputProjectName1" aria-describedby="projectHelp" pattern="[A-Za-z]+" placeholder="Project Name" required>
                              <div id="projectHelp" class="form-text text-secondary">Use Letters only without spaces and special characters.</div>
                            </div>                            
                            <div class="mb-3">
                              <label for="inputCategory1" class="form-label text-info">Project Category:</label>
                              <select class="form-select" name="inputCategory1" aria-label="Project Category Select" required>
                                <option value="" selected disabled>Choose a category</option>
                                <option value="Web Server">Web Server</option>
                                <option value="Game Server">Game Server</option>
                                <option value="VPS">VPS</option>
                                <option value="Others">Others</option>
                              </select>
                            </div>                            
                            <div class="mb-3 form-check">
                              <input type="checkbox" class="form-check-input" id="rulesCheck1" required>
                              <label class="form-check-label text-info" for="rulesCheck1">I agree to UnknownVPS Rules and Terms Of Service.</label>
                            </div>
                        </div>
                        <div class="modal-footer bg-gray-800 border-0">
                          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                      </form>
                      </div>
                    </div>
                  </div>
                </div>
                <% } %>
              </div>
            </div>
            <div class="table-responsive">
              <table class="table align-items-center ">
                <tbody>
                  <tr>
                    <td class="w-30">
                      <div class="d-flex px-2 py-1 align-items-center">
                        <div>
                          <p class="text-xs font-weight-bold mb-0">Icon</p>
                          <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/projecticon.png" alt="projecticon" class="sidebarico24">
                        </div>
                        <div class="ms-4">
                          <p class="text-xs font-weight-bold mb-0">Name</p>
                          <h6 class="text-sm mb-0 text-blue-400"><%= project_name %></h6>
                        </div>
                      </div>
                    </td>
                    <td>
                      <div class="text-center">
                        <p class="text-xs font-weight-bold mb-0">VPSes Owned</p>
                        <h6 class="text-sm mb-0 text-blue-400"><%= vps.amt %></h6>
                      </div>
                    </td>
                    <td class="align-middle text-sm">
                      <div class="col text-center">
                        <p class="text-xs font-weight-bold mb-0">Category</p>
                        <h6 class="text-sm mb-0 text-blue-400"><%= project_category %></h6>
                      </div>
                    </td>
                    <td class="align-middle text-sm">
                      <div class="col text-center">
                        <p class="text-xs font-weight-bold mb-0"></p>
                        <a href="/manage" class="text-sm mb-0 text-blue-400 btn rounded-lg shadow-lg <%= has_vps === true ? 'btn-primary' : '' %><%= has_vps === false ? 'disabled' : '' %>">Manage</h6>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="card" style="background-color: #303030">
            <div class="card-header pb-0 p-3" style="background-color: #303030">
              <h6 class="mb-0 text-blue-400">Recent Updates</h6>
            </div>
            <div class="card-body p-3">
              <ul class="list-group">
                <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg" style="background-color: #303030">
                  <div class="d-flex align-items-center">
                    <div class="icon-sm me-3 bg-transparent shadow text-center">
                      <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/ui.png">
                    </div>
                    <div class="d-flex flex-column">
                      <h6 class="mb-1 text-sm text-gray-500">UI Update</h6>
                      <span class="text-xs text-gray-300">Updated the UI, <span class="font-weight-bold">Hope you like it!</span>
                      </span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-lg-5 my-4">
          <div class="card" style="background-color: #303030">
            <div class="card-header pb-0 p-3" style="background-color: #303030">
              <h6 class="mb-0 text-blue-400">Available OS & Services</h6>
            </div>
            <div class="card-body p-3">
              <ul class="list-group">
                <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg" style="background-color: #303030">
                  <div class="d-flex align-items-center">
                    <div class="icon-sm me-3 bg-transparent shadow text-center">
                      <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/ubuntu.png">
                    </div>
                    <div class="d-flex flex-column">
                      <h6 class="mb-1 text-sm text-gray-500">Ubuntu</h6>
                      <span class="text-xs text-gray-300">An easy to use and famous <span class="font-weight-bold">Linux Distribution</span>
                      </span>
                    </div>
                  </div>
                </li>
                <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg" style="background-color: #303030">
                  <div class="d-flex align-items-center">
                    <div class="icon-sm me-3 bg-transparent shadow text-center">
                      <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/debian.png">
                    </div>
                    <div class="d-flex flex-column">
                      <h6 class="mb-1 text-sm text-gray-500">Debian</h6>
                      <span class="text-xs text-gray-300">Famous minimalistic and stable <span class="font-weight-bold">Linux Distribution</span>
                      </span>
                    </div>
                  </div>
                </li>
                <li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg" style="background-color: #303030">
                  <div class="d-flex align-items-center">
                    <div class="icon-sm me-3 bg-transparent shadow text-center">
                      <img src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/png/minecraft.png">
                    </div>
                    <div class="d-flex flex-column">
                      <h6 class="mb-1 text-sm text-gray-500">Minecraft</h6>
                      <span class="text-xs text-gray-300">Sandbox game developed by, <span class="font-weight-bold">Mojang AB</span>
                      </span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        
        <div class="col-lg-5 my-4 mx-auto">
          <div>
            <div class="mx-auto">
            <script type="text/javascript">
              atOptions = {
                'key' : '4ccfcae4bf2a9c42d41d0922dc4e1540',
                'format' : 'iframe',
                'height' : 50,
                'width' : 320,
                'params' : {}
              };
              document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://floatingfolly.com/4ccfcae4bf2a9c42d41d0922dc4e1540/invoke.js"></scr' + 'ipt>');
            </script>
            </div>
            <div class="my-3 mx-auto">
              <script type="text/javascript">
                atOptions = {
                  'key' : '4ccfcae4bf2a9c42d41d0922dc4e1540',
                  'format' : 'iframe',
                  'height' : 50,
                  'width' : 320,
                  'params' : {}
                };
                document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://floatingfolly.com/4ccfcae4bf2a9c42d41d0922dc4e1540/invoke.js"></scr' + 'ipt>');
              </script>
            </div>
            <div class="my-3 mx-auto">
              <script type="text/javascript">
                atOptions = {
                  'key' : '4ccfcae4bf2a9c42d41d0922dc4e1540',
                  'format' : 'iframe',
                  'height' : 50,
                  'width' : 320,
                  'params' : {}
                };
                document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://floatingfolly.com/4ccfcae4bf2a9c42d41d0922dc4e1540/invoke.js"></scr' + 'ipt>');
              </script>
            </div>
            <div class="my-3 mx-auto">
              <script type="text/javascript">
                atOptions = {
                  'key' : '4ccfcae4bf2a9c42d41d0922dc4e1540',
                  'format' : 'iframe',
                  'height' : 50,
                  'width' : 320,
                  'params' : {}
                };
                document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://floatingfolly.com/4ccfcae4bf2a9c42d41d0922dc4e1540/invoke.js"></scr' + 'ipt>');
              </script>
            </div>
        </div>
      </div>
      <%- include('components/footer.ejs') %>
    </div>
    </main>
    <script src="https://cdn.jsdelivr.net/gh/unknownpersonog/unknownvps-client@assets/js/argon-dashboard.min.js"></script>
  </body>
</html>