<template>
    <div>
        <div v-for="fieldset in fieldsets" :key="fieldset.label" class="uk-margin">
            <h3 class="yo-sidebar-subheading">{{ $t(fieldset.label) }}</h3>
            <DynamicFieldArgsPanel :config="fieldset.fields" :values="prop" />
            <div v-if="fieldset.description" class="uk-text-meta uk-margin-top">
                {{ $t(fieldset.description) }}
            </div>
        </div>
    </div>
</template>

<script>
import DynamicFieldArgsPanel from './DynamicFieldArgsPanel.vue';

export default {
    components: {
        DynamicFieldArgsPanel,
    },

    props: {
        fields: {
            type: Array,
        },
        prop: {
            type: Object,
            required: true,
        },
        isMulti: {
            type: Boolean,
            default: false,
        },
    },

    computed: {
        fieldsets() {
            return this.fields.filter(
                (fieldset) =>
                    fieldset.fields.length && (!fieldset.multi || (fieldset.multi && this.isMulti))
            );
        },
    },
};
</script>
