<template>
  <div>
      <div class="row justify-content-center">
        <div class="col-12 col-sm-12 col-md-8">
          <div class="row">
            <div class="col-12">
              <h4 class="fw-bold text-center pt-5">Account
                <nuxt-link to="/setting/editaccount" class="float-end  pt-1 text-decoration-none" style="color: #e9c046">Edit</nuxt-link>
              </h4>
            </div>
          </div>
            <div class="row pt-4">
              <div class="col-6 ">
                <h5 class="fw-bold text-start text-muted">First Name</h5>
              </div>
              <div class="col-6 ">
                <h5 class="fw-bold  text-end">Michael</h5>
              </div>
            </div>
          <div class="row pt-4">
            <div class="col-6">
              <h5 class="fw-bold text-muted">Last Name</h5>
            </div>
            <div class="col-6">
              <h5 class="fw-bold  text-end">Jack</h5> </div>
          </div>
          <div class="row pt-4">
            <div class="col-4">
              <h5 class="fw-bold text-muted">Email</h5>
            </div>
            <div class="col-8">
              <h5 class="fw-bold  text-end">michaeljack@gmail.com</h5> </div>
          </div>
          <div class="row pt-4">
            <div class="col-6">
              <h5 class="fw-bold text-muted">Password</h5>
            </div>
            <div class="col-6">
              <h5 class="fw-bold  text-end">•••••••••</h5> </div>
          </div>
          <div class="row pt-4">
            <div class="col-12 text-center">
              <button class="btn col-12 col-sm-12 col-md-3 fw-bold btn-outline-dark">Log Out</button>
            </div>
          </div>

          <div class="row pt-5 pb-4 px-2">
            <div class="col-12  rounded text-center py-3 py-md-5" style="background-image: linear-gradient(40.53deg, #E9A446 6.68%, #E9C046 100%)">
              <h4 class="text-center text-white ">Get another free 30 days</h4>
              <h5 class="text-center px-2 px-md-5 text-white pt-2">You can still use Mindboost for 7 days for free. Subscribe to increase your productivity with Mindboost afterwards.</h5>
              <button type="button" class="btn px-4 py-2 mt-2 mt-md-3 fs-5" style="background-color: white;gap: 10px;">Subscribe</button>
            </div>
          </div>

        </div>
      </div>
  </div>
</template>

<script>
export default {
  name:'SettingPage',
}
</script>

<style>

</style>