<!-- TODO: WARNING. When you want to change the structure and classes of this blade. Please do so while consulting componentAreaManager. It uses the defined structure and classes to insert components and listen to the buttons -->
@php /** @var \App\Komma\Kms\Core\Attributes\ComponentArea $attribute **/ @endphp
<div id="{{(string) $attribute->getKey()}}"
     class="entity-attribute entity-attribute-component-area entity-attribute-dynamic @if($errors->has((string) $attribute->getKey())) error @endif {!!$attribute->getStyleClass()!!}"
     data-component-attribute-fields-regex="{{ $componentAttributeFieldsRegex }}" data-times-added-component="0">
    <input type="hidden" name="{{ $attribute->getKey() }}" value="{{ $attribute->getValue() }}">
    <div class="components"></div>

    @if (\Auth::user()->role->id == 1)
        {{--Only for Role::SuperAdmin --}}
        <div class="addComponentsButtons add-new-block-row row">
            @foreach($allComponentTypes as $componentType)
                @php /** @var \App\Komma\Dynamic\ComponentType\ComponentType $componentType **/ @endphp
                @if(count($attribute->getComponentTypes()) == 0 || in_array($componentType->name, $attribute->getComponentTypes(), true))
                    {{--<button type="button" class="componentButton add contentBlockAddButton" data-component-type="{{ $componentType->id }}" data-icon="{{ $componentType->icon }}">@lang('kms/dynamic.types.'.$componentType->name)</button>--}}

                    <div class="componentButton add contentBlockAddButton"
                         data-component-type="{{ $componentType->id }}">
                        <label for="{{ $componentType->name }}">@lang('kms/dynamic.types.'.$componentType->name)</label>
                    </div>

                @endif
            @endforeach
        </div>
    @endif
</div>