{{-- Get subcomponent count or default to 1 if no subcomponents exist --}}
@php
    (isset($sub->subcomponents)) ? $entryCount = (count($sub->subcomponents)) : $entryCount = 1;

    if(array_has($sub, 'layout')) {
        $layout = $sub->layout;
    } else {
        $layout = 'column';
    }
@endphp

{{-- Wrapper for component --}}
<div class="repeatable-component-wrapper">

    <div class="form-group">
        <label>Layout</label>
        <select name="components[{{$item->id}}][values][layout]" class="form-control">
            <option value="column" {{ $layout === 'column' ? 'selected' : '' }}>Column View</option>
            <option value="project-gallery" {{ $layout === 'project-gallery' ? 'selected' : '' }}>Project Gallery View</option>
            <option value="image-text-description" {{ $layout === 'image-text-description' ? 'selected' : '' }}>Image, Text and Description</option>
        </select>
    </div>

    {{-- Load subcomponent Editors --}}
    <div class="component sortable-with-handle">
        @for($i = 0; $i < $entryCount; $i++)
            @include('componentimagelink::item.editor',
                [
                    'i'         => $i,
                    'itemID'    => $item->id
                ]
            )
        @endfor
    </div>

    {{-- ID of post if editing existing post --}}
    @if(isset($post->id))
        <input type="hidden" name="components[{{$item->id}}][post_id]" value="{{ $post->id }}">
    @endif

    {{-- Details for component storagefunction --}}
    <input type="hidden" name="components[{{$item->id}}][type]" value="ComponentImageLink">
    <button type="button" class="add-sub btn btn-primary" data-route="/admin/componentimagelink/add" data-id="{{$item->id}}" data-i="{{$i}}">Add another</button>
    <i class="fa fa-circle-o-notch fa-lg fa-spin loading-icon" style="display: none;"></i>

</div>