<!--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-->
@php /** @var \App\Komma\Components\ComponentType\Types\AbstractComponentType $component **/ @endphp
<div class="c-component c-component--{{ $component->getName() }}" data-component-type-id="{{ $component->getId() }}" data-id="{{ $id }}">

    <div class="c-component__header">

        <div class="c-component__order-buttons">
            <div class="c-component__order-button  js-component-move-up">&uparrow;</div>
            <div class="c-component__order-button  c-component__order-button--down  js-component-move-down">&downarrow;</div>
        </div>

        <div class="c-component__icon">
            @if(file_exists($component->getIcon()))
                <img id="{{ $component->getName() }}" src="/{{$component->getIcon()}}" alt="">
            @endif
        </div>

        <div class="c-component__title">
            @lang('kms/attributes/components.types.'.$component->getId())
        </div>

        <div class="c-component__delete-button  js-component-delete"></div>
    </div>

    <div class="attributes">
        @foreach($component->getAttributes() as $attribute)
            @php /** @var \App\Komma\Kms\Core\Attributes\Attribute $attributeInstance */@endphp
            {!! $attribute->render()->with(['errors' => $errors]) !!}
        @endforeach
    </div>
</div>