<!-- 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\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"
     data-test="{{ $attribute->getKey() }}"
>
    <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\Components\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() }}"
                     data-test="add_{{ $componentType->getName() }}_component{{ $attribute->hasAssociatedLanguage() ? '_'.$attribute->getAssociatedLanguage()->iso_2 : '' }}"
                >

                    <div class="c-components-area-button__icon">
                        @if(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>

    @if(config('app.multipleLanguages') && count($attribute->getCopyableInstances()) > 0)
        <div class="c-components-area__copy ">
            {{--Show a select and a copy button that can be used to select another component area to copy this component area to--}}
            <p class="c-components-area__confirmation js-component-area-confirmation">@lang('kms/attributes/components.copied')</p>
            <p>@lang('kms/global.copy_to')</p>
            <select class="select-menu  js-component-area-select" name="{{ (string) $attribute->getKey() }}_copy_to">
                @foreach ($attribute->getCopyableInstances() as $copyableInstance)
                    @php /** @var \App\Kms\Core\Attributes\ComponentArea $copyableInstance **/ @endphp
                    <option value="{{ (string) $copyableInstance->getKey() }}" data-tab="{{ (string) $copyableInstance->getAssociatedLanguage()->iso_2 }}">{{ (string) $copyableInstance->getAssociatedLanguage()->iso_2 }}</option>
                @endforeach
            </select>
            <button type="button" name="copy_component_area_from" value="{{ (string) $attribute->getKey() }}"
                    class="confirm  js-component-area-button"
                    data-confirm-header="@lang('kms/attributes/components.confirm_copy_modal.header')"
                    data-confirm-message="@lang('kms/attributes/components.confirm_copy_modal.message')"
                    data-confirm-confirm-text="@lang('kms/attributes/components.confirm_copy_modal.confirm')"
                    data-confirm-cancel-text="@lang('kms/attributes/components.confirm_copy_modal.cancel')"
            >@lang('kms/global.copy')</button>
        </div>
    @endif
</div>