<template>
    <div :class="[codename, 'c-form-element', formElementClasses, {'has-error': hasErrors}, 'js-form-element']">

        <label v-if="!formElementNoLabel && label" class="c-form-element__label" :for="codename">{{ label }}</label>

        <slot/>

        <p v-if="!formElementNoErrorArea && hasErrors"
           :id="errorIdAndClass"
           class="c-form-element__error  js-form-element-error"
           :data-test="errorIdAndClass">{{ errors.join(', ') }}</p>
    </div>
</template>

<script>
    export default {
        props: {
            codename: {type: String, required: true},
            formElementClasses: {type: String, default: ''},
            errors: {type: Array, default: null},
            label: {type: String, default: null},
            formElementNoLabel: {type: Boolean, default: false},
            formElementNoErrorArea: {type: Boolean, default: false},
        },
        data: function() {
            return {
            }
        },

        computed: {
            'hasErrors': function() {
                return this.errors && this.errors.length > 0;
            },
            errorIdAndClass: function() {
                return this.codename + '-error'
            }
        },
    }
</script>