<template>
  <div>
    <div class="text-left mb-1">Meus Contatos: </div>
    <div class="profile-card px-2 pt-3 pb-0">
      <b-form>

        <b-form-row class="custom-form-row">
          <b-form-group class="col-md-9 col-sm-12">
            <email-input v-model="email" />
          </b-form-group>
          <edit-button />
        </b-form-row>

        <b-form-row class="custom-form-row">
          <b-form-group class="col-md-9 col-sm-12">
            <phone-number v-model="mainPhoneNumber" title="Telefone Principal:" />
          </b-form-group>
          <edit-button />
        </b-form-row>

        <b-form-row class="custom-form-row">
          <b-form-group class="col-md-9 col-sm-12">
            <phone-number v-model="secondPhoneNumber" title="Telefone Secundário:" />
          </b-form-group>
          <edit-button />
        </b-form-row>

      </b-form>
    </div>
  </div>
</template>

<script>
import EditButton from '@/components/profile/EditButton.vue';
import EmailInput from '@/components/shared-components/inputs/Email.vue';
import PhoneNumber from '@/components/shared-components/inputs/PhoneNumber.vue';


export default {
  name: 'my-contacts',
  components: {
    EditButton,
    EmailInput,
    PhoneNumber,
  },
  data: () => ({
    email: 'maria@email.com',
    mainPhoneNumber: '62990909090',
    secondPhoneNumber: '62990909090',
  }),
};
</script>

<style scoped lang="scss">
@import '../../assets/css/main.scss';
@import '../../assets/css/cards.scss';
</style>
