<template>
  <div>
    <div class="text-left mb-1">Meu Endereço: </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-4 col-sm-12">
            <postal-code v-model="postalCode" />
          </b-form-group>
          <b-form-group class="col-md-4 col-sm-12">
            <text-input v-model="street"
              title="Endereço:"
              place-holder="Rua 001"
            />
          </b-form-group>
          <b-form-group class="col-md-4 col-sm-12">
            <number-input v-model="streetNumber" place-holder="108"/>
          </b-form-group>
        </b-form-row>

        <b-form-row class="custom-form-row">
          <b-form-group class="col-md-8 col-sm-12">
            <text-input v-model="addressDetails"
              title="Complemento:"
              place-holder="Qd. 10 Lt. 20"
            />
          </b-form-group>
          <b-form-group class="col-md-4 col-sm-12">
            <text-input v-model="neighborhood"
              title="Bairro:"
              place-holder="Centro"
            />
          </b-form-group>
        </b-form-row>

        <b-form-row class="custom-form-row">
          <b-form-group class="col-md-8 col-sm-12">
            <text-input v-model="city"
              title="Cidade:"
              place-holder="Goiânia"
            />
          </b-form-group>
          <b-form-group class="col-md-4 col-sm-12">
            <text-input v-model="state"
              title="Estado:"
              place-holder="Goiás"
            />
          </b-form-group>
        </b-form-row>
      </b-form>
    </div>
  </div>
</template>

<script>
import PostalCode from '@/components/shared-components/inputs/PostalCode.vue';
import TextInput from '@/components/shared-components/inputs/TextInput.vue';
import NumberInput from '@/components/shared-components/inputs/NumberInput.vue';


export default {
  name: 'profile-address',
  components: {
    TextInput,
    PostalCode,
    NumberInput,
  },
  data: () => ({
    postalCode: '',
    street: '',
    streetNumber: '',
    addressDetails: '',
    neighborhood: '',
    city: '',
    state: '',
  }),
};
</script>

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