<template>
  <div>
    <div class="row justify-content-center">
      <div class="col-12 col-md-10 col-sm-8">
        <h4 class="fw-bold text-center pt-5"><span class="float-start"><i class="fa-solid fa-arrow-left-long"></i></span> Edit Account</h4>
        <div class="row justify-content-center">Subscription
          <div class="col-11 col-md-8">
            <form>
              <div class="row pt-5">
                <div class="col-12">
                  <label class="text-muted ">First Name</label>
                  <input type="text" class="form-control" placeholder="First Name" />
                </div>
              </div>
              <div class="row pt-3">
                <div class="col-12">
                  <label class="text-muted ">Surname</label>
                  <input type="text" class="form-control" placeholder="Surname" />
                </div>
              </div>
              <div class="row pt-3">
                <div class="col-12">
                  <label class="text-muted ">Email</label>
                  <input type="email" class="form-control" placeholder="Email" />
                </div>
              </div>

              <div class="row pt-3">
                <div class="col-12">
                  <label class="text-muted ">Password</label>
                  <input type="password" class="form-control" placeholder="Password" />
                </div>
              </div>
              <div class="row pt-5 ">
                <div class="col-12 text-center">
                  <button type="button" class="btn text-white fs-5  col-12 fw-bold py-2 " style="background-color: #e9c046">Save Changes</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Index from "~/pages/index.vue";

export default {
  name:'EditAccount',
  components: {Index},
}
</script>

<style>

</style>