<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
  <!-- head -->
  <%- include('common/head', {title: "Dashboard | The Attendance Management"})
  %>
  <body id="page-top">
    <div id="wrapper">
      <%- include('common/side-navbar', {active: "profile"}) %>
      <div class="d-flex flex-column" id="content-wrapper">
        <div id="content">
          <%- include('common/top-navbar') %>
          <div class="container-fluid">
            <h3 class="text-dark mb-4">Profile</h3>
            <div class="row mb-3">
              <div class="col-lg-4">
                <div class="card mb-3">
                  <div class="card-body text-center shadow">
                    <img
                      class="rounded-circle mb-3 mt-4"
                      src="images/dogs/image2.jpeg"
                      width="160"
                      alt=""
                      height="160"
                    />
                    <div class="mb-3">
                      <button
                        class="btn btn-primary btn-sm"
                        type="button"
                        disabled
                      >
                        Change Photo (custom images NOT working yet)
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-8">
                <div class="row mb-3 d-none">
                  <div class="col">
                    <div class="card text-white bg-primary shadow">
                      <div class="card-body">
                        <div class="row mb-2">
                          <div class="col">
                            <p class="m-0">Performance</p>
                            <p class="m-0"><strong>65.2%</strong></p>
                          </div>
                          <div class="col-auto">
                            <i class="fas fa-rocket fa-2x"></i>
                          </div>
                        </div>
                        <p class="text-white-50 small m-0">
                          <i class="fas fa-arrow-up"></i>&nbsp;5% since last
                          month
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col">
                    <div class="card text-white bg-success shadow">
                      <div class="card-body">
                        <div class="row mb-2">
                          <div class="col">
                            <p class="m-0">Performance</p>
                            <p class="m-0"><strong>65.2%</strong></p>
                          </div>
                          <div class="col-auto">
                            <i class="fas fa-rocket fa-2x"></i>
                          </div>
                        </div>
                        <p class="text-white-50 small m-0">
                          <i class="fas fa-arrow-up"></i>&nbsp;5% since last
                          month
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="card shadow mb-3">
                      <div class="card-header py-3">
                        <p class="text-primary m-0 fw-bold">User Settings</p>
                      </div>
                      <div class="card-body">
                        <form>
                          <div class="row">
                            <div class="col">
                              <div class="mb-3">
                                <label class="form-label" for="username"
                                  ><strong>Username</strong></label
                                ><input
                                  class="form-control"
                                  type="text"
                                  id="username"
                                  placeholder="user.name"
                                  name="username"
                                />
                              </div>
                            </div>
                            <div class="col">
                              <div class="mb-3">
                                <label class="form-label" for="email"
                                  ><strong>Email Address</strong></label
                                ><input
                                  class="form-control"
                                  type="email"
                                  id="email"
                                  placeholder="user@example.com"
                                  name="email"
                                />
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col">
                              <div class="mb-3">
                                <label class="form-label" for="first_name"
                                  ><strong>First Name</strong></label
                                ><input
                                  class="form-control"
                                  type="text"
                                  id="first_name"
                                  placeholder="John"
                                  name="first_name"
                                />
                              </div>
                            </div>
                            <div class="col">
                              <div class="mb-3">
                                <label class="form-label" for="last_name"
                                  ><strong>Last Name</strong></label
                                ><input
                                  class="form-control"
                                  type="text"
                                  id="last_name"
                                  placeholder="Doe"
                                  name="last_name"
                                />
                              </div>
                            </div>
                          </div>
                          <div class="mb-3">
                            <button
                              class="btn btn-primary btn-sm"
                              type="submit"
                            >
                              Save Settings
                            </button>
                          </div>
                        </form>
                      </div>
                    </div>
                    <div class="card shadow">
                      <div class="card-header py-3">
                        <p class="text-primary m-0 fw-bold">Contact Settings</p>
                      </div>
                      <div class="card-body">
                        <form>
                          <div class="mb-3">
                            <label class="form-label" for="address"
                              ><strong>Address</strong></label
                            ><input
                              class="form-control"
                              type="text"
                              id="address"
                              placeholder="Sunset Blvd, 38"
                              name="address"
                            />
                          </div>
                          <div class="row">
                            <div class="col">
                              <div class="mb-3">
                                <label class="form-label" for="city"
                                  ><strong>City</strong></label
                                ><input
                                  class="form-control"
                                  type="text"
                                  id="city"
                                  placeholder="Los Angeles"
                                  name="city"
                                />
                              </div>
                            </div>
                            <div class="col">
                              <div class="mb-3">
                                <label class="form-label" for="country"
                                  ><strong>Country</strong></label
                                ><input
                                  class="form-control"
                                  type="text"
                                  id="country"
                                  placeholder="USA"
                                  name="country"
                                />
                              </div>
                            </div>
                          </div>
                          <div class="mb-3">
                            <button
                              class="btn btn-primary btn-sm"
                              type="submit"
                            >
                              Save&nbsp;Settings
                            </button>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <%- include('common/footer') %>
      </div>
      <a class="border rounded d-inline scroll-to-top" href="#page-top"
        ><i class="fas fa-angle-up"></i
      ></a>
    </div>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/theme.js"></script>
  </body>
</html>

<!--
  * This is the code for the progress bar in the dashboard
<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="text-primary fw-bold m-0">Projects</h6>
  </div>
  <div class="card-body">
    <h4 class="small fw-bold">
      Server migration<span class="float-end">20%</span>
    </h4>
    <div class="progress progress-sm mb-3">
      <div
        class="progress-bar bg-danger"
        aria-valuenow="20"
        aria-valuemin="0"
        aria-valuemax="100"
        style="width: 20%"
      >
        <span class="visually-hidden">20%</span>
      </div>
    </div>
  </div>
</div>




  * Form
<div class="card shadow mb-5">
  <div class="card-header py-3">
    <p class="text-primary m-0 fw-bold">Forum Settings</p>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-6">
        <form>
          <div class="mb-3">
            <label class="form-label" for="signature"
              ><strong>Signature</strong><br /></label
            ><textarea
              class="form-control"
              id="signature"
              rows="4"
              name="signature"
            ></textarea>
          </div>
          <div class="mb-3">
            <div class="form-check form-switch">
              <input
                class="form-check-input"
                type="checkbox"
                id="formCheck-1"
              /><label class="form-check-label" for="formCheck-1"
                ><strong>Notify me about new replies</strong></label
              >
            </div>
          </div>
          <div class="mb-3">
            <button class="btn btn-primary btn-sm" type="submit">
              Save Settings
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
-->
