<template>
    <div class="col">
        <div class="row align-items-center m-b-30">
            <div class="col-3 p-l-0">
                <div class="font-heading fs-11 bold text-info">Full Name</div>
            </div>
            <div class="col m-r-50">
                <div class="font-heading fs-11 muted" v-text="$store.getters.getUserName"></div>
            </div>
            <div class="col-auto p-r-0">
                <div class="btn btn-xs btn-default bg-master-lighter btn-rounded p-r-20 p-l-15 requestModal" data-type="editFullName">
                    <i class="fa fa-pencil m-r-10"></i>Edit
                </div>
            </div>
        </div>

        <div class="row align-items-center m-b-30">
            <div class="col-3 p-l-0">
                <div class="font-heading fs-11 bold text-info">Password</div>
            </div>
            <div class="col m-r-50">
                <div class="font-heading fs-11 muted">********</div>
            </div>
            <div class="col-auto p-r-0">
                <div class="btn btn-xs btn-default bg-master-lighter btn-rounded p-r-20 p-l-15 requestModal"  data-type="resetPassword">
                    <i class="fa fa-lock m-r-10"></i>Request Password Reset
                </div>
            </div>
        </div>

        <div class="row align-items-center">
            <div class="col-3 p-l-0">
                <div class="font-heading fs-11 bold text-info">Email Address</div>
            </div>
            <div class="col m-r-50">
                <div class="font-heading fs-11 muted" v-text="$store.getters.getUserEmail"></div>
            </div>
            <div class="col-auto p-r-0">
                <div class="btn btn-xs btn-default bg-master-lighter btn-rounded p-r-20 p-l-15 requestModal" data-type="editEmail">
                    <i class="fa fa-envelope-open-o m-r-10"></i>Request Email Change
                </div>
            </div>
        </div>

        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editFullName">
            <edit-user-profile-fullname-form-component :data="{name: $store.getters.getUserName}" :section="section"></edit-user-profile-fullname-form-component>
        </modal-component>

        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="resetPassword">
            <reset-user-password-form-component :data="{email: $store.getters.getUserEmail}"  section="resetPassword"></reset-user-password-form-component>
        </modal-component>

        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editEmail">
            <edit-email-form-component :data="{email: $store.getters.getUserEmail}" section="editEmail"></edit-email-form-component>
        </modal-component>
    </div>
</template>

<script>
export default {
  props: {
    section: {
      default: "editFullNameSection",
    },
  },
};
</script>
