<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"></script>

  <link rel="stylesheet" href="..\..\stylesheets\account.css">
  <script src="..\..\scripts\account.js"></script>

  <link rel="stylesheet" href="..\..\stylesheets\index.css">
  <script src="..\..\scripts\index.js"></script>

  <title>Account</title>
</head>

<body>
  <div class="container-fluid" style="height: 100vh;">
    <div class="row h-100">

      <%- include('navbar') %>

      <!-- Content -->
      <div class="col-9 scrollable-column p-5" style="background-color: aqua;">
        <!-- Name, Email, Delivery Address -->
        <div class="row">
          <div class="card m-2">
            <div class="card-body">
              <h5 class="card-title">Contact Information</h5>
              <form>
                <div class="row my-3">
                  <div class="col">
                    <input type="text" class="form-control" placeholder="First name">
                  </div>
                  <div class="col">
                    <input type="text" class="form-control" placeholder="Last name">
                  </div>
                </div>
                <div class="row my-3">
                  <div class="col">
                    <input type="text" class="form-control" placeholder="Email">
                  </div>
                </div>
                <div class="row my-3">
                  <div class="col">
                    <input type="text" class="form-control" placeholder="Address">
                  </div>
                </div>
                <button class="btn btn-primary">Submit</button>
              </form>
            </div>
          </div>
        </div>
        <!-- Password -->
        <div class="row">
          <div class="card m-2">
            <div class="card-body">
              <h5 class="card-title">Change your password</h5>
              <form>
                <div class="row my-3">
                  <div class="col">
                    <input type="text" class="form-control" placeholder="Old Password">
                  </div>
                </div>
                <div class="row my-3">
                  <div class="col">
                    <input type="text" class="form-control" placeholder="New Password">
                  </div>
                </div>
                <div class="row my-3">
                  <div class="col">
                    <input type="text" class="form-control" placeholder="Retype new password">
                  </div>
                </div>
                <button class="btn btn-primary">Submit</button>
              </form>
            </div>
          </div>
        </div>
        <!-- Payment Methods -->
        <div class="row">
          <div class="card m-2">
            <div class="card-body">
              <h5 class="card-title">Payment Methods</h5>
              <form action="">
                <p class="fw-bold mb-4 pb-2">Saved cards:</p>
    
                <div class="d-flex flex-row align-items-center mb-4 pb-1">
                  <img class="img-fluid" src="https://img.icons8.com/color/48/000000/mastercard-logo.png" />
                  <div class="flex-fill mx-3">
                    <div class="form-outline">
                      <input type="text" id="formControlLgXc" class="form-control form-control-lg"
                        value="**** **** **** 3193" />
                      <label class="form-label" for="formControlLgXc">Card Number</label>
                    </div>
                  </div>
                  <a href="#!">Remove card</a>
                </div>
    
                <div class="d-flex flex-row align-items-center mb-4 pb-1">
                  <img class="img-fluid" src="https://img.icons8.com/color/48/000000/visa.png" />
                  <div class="flex-fill mx-3">
                    <div class="form-outline">
                      <input type="text" id="formControlLgXs" class="form-control form-control-lg"
                        value="**** **** **** 4296" />
                      <label class="form-label" for="formControlLgXs">Card Number</label>
                    </div>
                  </div>
                  <a href="#!">Remove card</a>
                </div>
    
                <p class="fw-bold mb-4">Add new card:</p>
    
                <div class="form-outline mb-4">
                  <input type="text" id="formControlLgXsd" class="form-control form-control-lg"
                    value="Anna Doe" />
                  <label class="form-label" for="formControlLgXsd">Cardholder's Name</label>
                </div>
    
                <div class="row mb-4">
                  <div class="col-7">
                    <div class="form-outline">
                      <input type="text" id="formControlLgXM" class="form-control form-control-lg"
                        value="1234 5678 1234 5678" />
                      <label class="form-label" for="formControlLgXM">Card Number</label>
                    </div>
                  </div>
                  <div class="col-3">
                    <div class="form-outline">
                      <input type="password" id="formControlLgExpk" class="form-control form-control-lg"
                        placeholder="MM/YYYY" />
                      <label class="form-label" for="formControlLgExpk">Expire</label>
                    </div>
                  </div>
                  <div class="col-2">
                    <div class="form-outline">
                      <input type="password" id="formControlLgcvv" class="form-control form-control-lg"
                        placeholder="Cvv" />
                      <label class="form-label" for="formControlLgcvv">Cvv</label>
                    </div>
                  </div>
                </div>
    
                <button class="btn btn-success btn-lg btn-block">Add card</button>
              </form>
            </div>
          </div>
        </div>
        <div class="row">
          <!-- Notification Preferences -->
          <div class="col">
            <div class="card m-2" style="height: 100%;">
              <div class="card-body">
                <h5 class="card-title">Notification Preferences</h5>
                <form>
                  <ul class="list-group" style="font-size: larger;">
                    <li class="list-group-item my-3">
                      <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" name="notificationPreference" id="notificationOption1" value="option1">
                        <label class="form-check-label" for="notificationOption1">
                          Daily Updates
                        </label>
                      </div>
                    </li>
                    <li class="list-group-item my-3">
                      <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" name="notificationPreference" id="notificationOption2" value="option2">
                        <label class="form-check-label" for="notificationOption2">
                          Weekly Digest
                        </label>
                      </div>
                    </li>
                    <li class="list-group-item my-3">
                      <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" name="notificationPreference" id="notificationOption3" value="option3">
                        <label class="form-check-label" for="notificationOption3">
                          Monthly Summary
                        </label>
                      </div>
                    </li>
                  </ul>
                </form>
              </div>
            </div>
          </div>
          <div class="col">
            <!-- Website Preferences -->
            <div class="row">
              <div class="card m-2">
                <div class="card-body">
                  <h5 class="card-title">Website Preferences</h5>
                  <form>
                    <ul class="list-group" style="font-size: larger;">
                      <li class="list-group-item my-3">
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" name="notificationPreference" id="notificationOption1" value="option1">
                          <label class="form-check-label" for="notificationOption1">
                            Adult Content
                          </label>
                        </div>
                      </li>
                      <li class="list-group-item my-3">
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" name="notificationPreference" id="notificationOption2" value="option2">
                          <label class="form-check-label" for="notificationOption2">
                            Dark View
                          </label>
                        </div>
                      </li>
                    </ul>
                  </form>
                </div>
              </div>
            </div>
            <!-- Publisher-relevant options -->
            <div class="row">
              <div class="card m-2">
                <div class="card-body">
                  <h5 class="card-title">Publisher Options</h5>
                  <form>
                    <ul class="list-group" style="font-size: larger;">
                      <li class="list-group-item my-3">
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" name="notificationPreference" id="notificationOption1" value="option1">
                          <label class="form-check-label" for="notificationOption1">
                            Receive Customer Mail
                          </label>
                        </div>
                      </li>
                      <li class="list-group-item my-3">
                        <div class="form-check form-switch">
                          <input class="form-check-input" type="checkbox" role="switch" name="notificationPreference" id="notificationOption2" value="option2">
                          <label class="form-check-label" for="notificationOption2">
                            Notified About Sale
                          </label>
                        </div>
                      </li>
                    </ul>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>