@if(isset($sub->subcomponents))

<div class="container-fluid px-0 {{ $sub->theme ? "light-theme" : "dark-theme" }}">
    @if(isset($sub->categories) && !empty(json_decode($sub->categories)))
        {{-- Links with category set --}}        
        <div class="row justify-content-center text-center">
            @foreach(json_decode($sub->categories) as $cat)
                @if($sub->subcomponents->contains('category', $cat))
                    <div class="col-auto">                    
                            <p class="h3 link-category {{$loop->first ? "active":""}}" data-toggle="collapse" data-target="#{{ snake_case($cat)."_".$sub->id }}" role="button">{{$cat}}</p>                
                    </div>
                @endif
            @endforeach
        </div>
        <div id="link-group-cat-wrapper-{{$sub->id}}">
            @foreach(json_decode($sub->categories) as $cat)
                <div class="row justify-content-center text-center pt-3 cat collapse {{$loop->first ? "show":""}}" id="{{ snake_case($cat)."_".$sub->id }}" data-parent="#link-group-cat-wrapper-{{$sub->id}}">                
                    @foreach($sub->subcomponents as $subitem)
                        @if($subitem->category == $cat)                    
                        <div class="col-12">
                            <a class="btn btn-mobile" href="{{$subitem->url}}">
                                {{$subitem->title}}
                            </a>
                        </div>
                        @endif                           
                    @endforeach                
                </div>                                
            @endforeach
        </div>
    @else
        {{-- Links without category set --}}        
        <div id="link-group-cat-wrapper-{{$sub->id}}">            
            <div class="row justify-content-center text-center pt-4 cat collapse {{$loop->first ? "show":""}}" data-parent="#link-group-cat-wrapper-{{$sub->id}}">                
                @foreach($sub->subcomponents as $subitem)                    
                    <div class="col-12">
                        <a class="btn btn-mobile" href="{{$subitem->url}}">
                            {{$subitem->title}}
                        </a>
                    </div>                    
                @endforeach                
            </div>                                            
        </div>
    @endif
</div>
    
@endif