<template>
  <div v-if="Object.keys(customFields).length">
    <v-flex
      v-for="(field, index) in Object.keys(customFields)"
      :key="index"
      class="custom-field"
      sm12>
      <base-static-field
        :model="customFields"
        :name="$unslugify(field)"
        :field="field"
        :size="size"/>
    </v-flex>
  </div>
</template>

<script>
import BaseStaticField from '@/components/base/BaseStaticField'

export default {
  name: 'CustomField',
  components: {
    BaseStaticField
  },
  props: {
    model: {
      type: Object,
      required: true
    },
    size: {
      type: String,
      required: false,
      default: 'large'
    }
  },
  computed: {
    customFields () {
      return this.$get(this.model, 'custom_fields', '') || {}
    }
  }
}
</script>

<style lang="scss">
.custom-field {
  padding: 0 !important;
}
</style>
