<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>MaxPass Dashboard</title>
    <link rel="stylesheet" href="/static/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="/static/vendors/base/vendor.bundle.base.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="shortcut icon" href="/static/images/favicon.png" />
  </head>
  <body>
    <div class="container-scroller">
      <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
        <div class="navbar-brand-wrapper d-flex justify-content-center">
          <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
            <a class="navbar-brand brand-logo" href="#">
              <img src="/static/images/logo.svg" alt="logo" />
            </a>
            <a class="navbar-brand brand-logo-mini" href="#">
              <img src="/static/images/logo-mini.svg" alt="logo" />
            </a>
            <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
              <span class="mdi mdi-sort-variant"></span>
            </button>
          </div>
        </div>
        <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
          <ul class="navbar-nav navbar-nav-right">
            <li class="nav-item nav-profile dropdown">
              <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
                <img src="/static/images/avatar.png" alt="profile" />
                <span class="nav-profile-name">{{ user.username }}</span>
              </a>
              <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown">
                <a class="dropdown-item" href="/logout">
                  <i class="mdi mdi-logout text-primary"></i> Logout </a>
              </div>
            </li>
          </ul>
          <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
            <span class="mdi mdi-menu"></span>
          </button>
        </div>
      </nav>
      <!-- partial -->
      <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link" href="/dashboard">
                <i class="mdi mdi-home menu-icon"></i>
                <span class="menu-title">Dashboard</span>
              </a>
            </li>
          </ul>
        </nav>
        <!-- partial -->
        <div class="main-panel">
          <div class="content-wrapper">
            <div class="row">
              <div class="col-md-12 grid-margin">
                <div class="d-flex justify-content-between flex-wrap">
                  <div class="d-flex align-items-end flex-wrap">
                    <div class="mr-md-3 mr-xl-5">
                      <h2>Welcome back {{ user.username }},</h2>
                      <p class="mb-md-0"> 
                        {% if user.username == "admin" %} 
                          HTB{f4k3_fl4g_f0r_t3st1ng}
                        {% else %}
                           🚨 Login as "admin" to view the flag here 🚨 
                        {% endif %}
                      </p>
                    </div>
                  </div>
                  <div class="d-flex justify-content-between align-items-end flex-wrap">
                    <button type="button" class="btn btn-dark bg-dark btn-icon mr-3 mt-2 mt-xl-0" id="showFormBtn">
                      <i class="mdi mdi-plus"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 stretch-card grid-margin">
                <div class="card" id="form-card">
                  <div class="card-body">
                    <h4 class="card-title">Add Password 🔐</h4>
                    <form onsubmit="return false;">
                      <div class="form-group">
                        <label for="newRecordType">Password Type</label>
                        <select class="form-control" id="newRecordType">
                          <option>Web</option>
                          <option>Email</option>
                          <option>App</option>
                        </select>
                      </div>
                      <div class="form-group">
                        <label for="newRecordAddr">Address</label>
                        <input type="text" class="form-control" id="newRecordAddr" placeholder="www.example.com">
                      </div>
                      <div class="form-group">
                        <label for="newRecordUser">Username</label>
                        <input type="text" class="form-control" id="newRecordUser" placeholder="Username">
                      </div>
                      <div class="form-group">
                        <label for="newRecordPass">Password</label>
                        <input type="password" class="form-control" id="newRecordPass" placeholder="Password">
                      </div>
                      <div class="form-group">
                        <label for="newRecordNote">Note</label>
                        <input type="text" class="form-control" id="newRecordNote" placeholder="Note">
                      </div>
                      <div class="form-group">
                        <button type="submit" class="btn btn-primary mr-2" id="addRecordBtn">Add</button>
                        <button class="btn btn-light" id="cancelBtn">Cancel</button>
                      </div>
                      <div class="form-group">
                        <p class="alert alert-info" id="resp-msg">Please Wait...</p>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 stretch-card">
                <div class="card">
                  <div class="card-body">
                    <p class="card-title">Your Passwords 🔑</p>
                    <p id="empty-table-msg">Wow, such empty 🌫 Select the plus icon at the right to add new passwords!</p>
                    <div class="table-responsive table-striped">
                      <table id="password-listing" class="table text-center">
                        <thead>
                          <tr>
                            <th>Type</th>
                            <th>Address</th>
                            <th>Username</th>
                            <th>Password</th>
                            <th>Note</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody></tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- content-wrapper ends -->
          <footer class="footer">
            <div class="d-sm-flex justify-content-center justify-content-sm-between">
              <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © MaxPass Manager</span>
              <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">We remember your passwords so you don't have to.</span>
            </div>
          </footer>
          <!-- partial -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <script src="/static/vendors/base/vendor.bundle.base.js"></script>
    <script src="/static/js/off-canvas.js"></script>
    <script src="/static/js/hoverable-collapse.js"></script>
    <script src="/static/js/template.js"></script>
    <script src="/static/js/dashboard.js"></script>
    <script type="text/javascript">
      var user_uuid = {{ user.uuid }};
    </script>
    <script src="/static/js/load-passwords.js" type="text/javascript"></script>
    <script src="/static/js/add-password.js" type="text/javascript"></script>
    <script src="/static/js/delete-password.js" type="text/javascript"></script>
  </body>
</html>