<div :class="['form-group', {'has-error': fieldErrors.elementKey || !fieldErrors.elementKeyAvailable}]">
    <label class="t3js-formengine-label form-label" for="meta_key">
        <f:translate key="LLL:EXT:mask/Resources/Private/Language/locallang.xlf:tx_mask.all.fieldkey"/>*
    </label>
    <div class="t3js-formengine-field-item">
        <span class="formengine-field-item-description text-muted">{f:translate(key: 'LLL:EXT:mask/Resources/Private/Language/locallang.xlf:tx_mask.all.fieldkey.description')}</span>
        <div class="form-control-wrap">
            <element-key :element="element" :mode="mode"></element-key>
        </div>
    </div>
</div>

<div :class="['form-group', {'has-error': fieldErrors.elementLabel}]">
    <label class="t3js-formengine-label form-label" for="meta_label">
        <f:translate key="LLL:EXT:mask/Resources/Private/Language/locallang.xlf:tx_mask.content.title"/>*
    </label>
    <div class="t3js-formengine-field-item">
        <div class="form-control-wrap">
            <input
                v-model="element.label"
                id="meta_label"
                class="form-control"
                required="required"
            />
        </div>
    </div>
</div>

<div class="form-group">
    <label class="t3js-formengine-label form-label" for="meta_shortlabel">
        <f:translate key="LLL:EXT:mask/Resources/Private/Language/locallang.xlf:tx_mask.all.shorttitle"/>
    </label>
    <div class="t3js-formengine-field-item">
        <div class="form-control-wrap">
            <input
                v-model="element.shortLabel"
                id="meta_shortlabel"
                class="form-control"
                required="required"
            />
        </div>
    </div>
</div>

<div class="form-group">
    <label class="t3js-formengine-label form-label" for="meta_description">
        <f:translate key="LLL:EXT:mask/Resources/Private/Language/locallang.xlf:tx_mask.all.description"/>
    </label>
    <div class="t3js-formengine-field-item">
        <div class="form-control-wrap">
            <textarea
                v-model="element.description"
                id="meta_description"
                class="form-control"
                required="required"
                rows="4"
            >
            </textarea>
        </div>
    </div>
</div>

<div class="checkbox checkbox-type-toggle form-check form-switch">
    <input id="elementSaveAndClose" class="checkbox-input form-check-input" v-model="element.saveAndClose" type="checkbox" :true-value="1" :false-value="0">
    <label class="checkbox-label form-check-label" for="elementSaveAndClose">
        <span class="checkbox-label-text form-check-label-text"><f:translate key="LLL:EXT:mask/Resources/Private/Language/locallang.xlf:tx_mask.saveAndClose"/></span>
    </label>
</div>
