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

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

    {{-- Parent Inputs --}}    
    <div class="form-group">
        <label>Categories</label>
        
        <div class="tags">
            @if(!empty($sub->categories) && is_array(json_decode($sub->categories))) 
            
                @foreach(json_decode($sub->categories) as $category) 
                
                <span>{{ $category }}</span>

                @endforeach

            @endif
            <input type="text" class="form-control" value="" placeholder="Add Category" />
            <input id="link-group-categores-{{$item->id}}" class="link-group-categories-input" type="hidden" name="components[{{$item->id}}][values][categories]" value="{{ old("components.$item->id.values.categories", $sub->categories ?? null) }}">
        </div>
    </div>

    <div class="form-group">
        <label for="{{"components-$item->id-values-theme"}}">Theme: </label>
        <select name="components[{{$item->id}}][values][theme]" id="{{"components-$item->id-values-background"}}" class="form-control">
            <option value="0" {{ old("components.$item->id.values.theme", $sub->theme ?? 0) == 0 ? "selected": "" }}>Dark</option>
            <option value="1" {{ old("components.$item->id.values.theme", $sub->theme ?? 0) == 1 ? "selected": "" }}>Light</option>
        </select>
    </div> 

    {{-- Load subcomponent Editors --}}
    <div class="component sortable-with-handle">
    
        @for($i = 0; $i < $entryCount; $i++) 
            @include('componentlinkgroups::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="ComponentLinkGroups">
    <button type="button" class="add-sub btn btn-primary add-link-group-sub" data-route="/admin/componentlinkgroups/add" data-id="{{$item->id}}" data-i="{{$i}}" data-callback="popLinkGroupCats">Add another</button>
    <i class="fa fa-circle-o-notch fa-lg fa-spin loading-icon" style="display: none;"></i>
</div>