<!-- 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="c-components-area  @if($errors->has((string) $attribute->getKey())) has-error @endif {!!$attribute->getStyleClass()!!}  js-components-area"
     data-component-attribute-fields-regex="{{ $componentAttributeFieldsRegex }}" data-times-added-component="0">
    <input type="hidden" name="{{ $attribute->getKey() }}" value="{{ $attribute->getValue() }}">

    {{-- Empty div where the components will be inject --}}
    <div class="c-components-area__main  js-components  @if(!$attribute->showBackgroundOption()) hide-background-options @endif "></div>


    {{-- Available component types for area --}}
    <div class="c-components-area__buttons">

        <div class="c-components-area__grid">
            @php /** @var App\Komma\Dynamic\ComponentType\Types\AbstractComponentType $componentType **/ @endphp
            @foreach($attribute->getComponentTypes(true) as $componentType)
                {{--@continue( !in_array($componentType->name, $attribute->getComponentTypes(), true) && count($attribute->getComponentTypes()) != 0 )--}}
                <div class="c-components-area-button  js-add-component" data-component-type="{{ $componentType->getId() }}">

                    <div class="c-components-area-button__icon">
                        @if(\View::exists('kms.svg.dynamic.'.$componentType->getName()))
                            @include('kms.svg.dynamic.'.$componentType->getName())
                        @elseif(file_exists($componentType->getIcon()))
                            <img id="{{ $componentType->getName() }}" src="/{{$componentType->getIcon()}}" alt="">
                        @endif
                    </div>

                    <label class="c-components-area-button__label" for="{{ $componentType->getName() }}">
                        @lang('kms/attributes/components.types.'.$componentType->getId())
                    </label>

                </div>

            @endforeach

        </div>

    </div>
</div>