<!--TODO: Warning, do look at the componentAreaManager before changing structure and classes since it will make the delete, up, down buttons work, and tries to find the inputs inside attributes in the attributes div-->
<div class="component inner {{ $component->name }}" data-component-type-id="{{ $component->id }}" data-id="{{ $id }}">
    <div class="header">
        <div class="start">
            <div class="block-title">{{ $component->name }}</div>
            @if (\Auth::user()->role->id == 1)
                {{--Only for Role::SuperAdmin --}}
                <div class="buttons controls">
                    <div class="position-button up"></div>
                    <div class="position-button down"></div>
                </div>
            @endif
        </div>
        <div class="end">
            @if (\Auth::user()->role->id == 1)
                {{--Only for Role::SuperAdmin --}}
                <div class="delete btn btn-danger btn-trash">&nbsp</div>
            @endif
        </div>
    </div>

    @if(isset($componentableAutoCompleteInputs))
        <div class="componentableSelectors">
            @foreach($componentableAutoCompleteInputs as $componentableAutoCompleteInput)
                @php /** @var \App\Komma\Kms\Core\Attributes\AutocompleteInput $componentableAutoCompleteInput */@endphp
                {!! $componentableAutoCompleteInput->render() !!}
            @endforeach
        </div>
    @endif
    <div class="attributes">
        @foreach($component->save_state_instance->getAttributeInstances() as $attributeInstance)
            @php /** @var \App\Komma\Kms\Core\Attributes\Attribute $attributeInstance */@endphp
            {!! $attributeInstance->render()->with(['errors' => $errors]) !!}
        @endforeach
    </div>
</div>