@php
$arOuterClasses = '';
$arInnerClasses = '';
if($sub->enable_aspect_ratio && !empty($sub->aspect_ratio)):
    $arOuterClasses = 'embed-responsive ' . $sub->aspect_ratio;
    $arInnerClasses = 'embed-responsive-item';
endif;
@endphp

<div id="column-carousel-{{$sub->id}}" class="row column-carousel mx-0" data-cols="{{$sub->columns}}">
    @foreach($sub->subcomponents as $subcomponent)
        @if(!$subcomponent->image) 
            @php continue @endphp
        @endif
        {{-- Mobile View --}}
        <div class="position-relative column-carousel-wrapper p-0 d-md-none">
            <div class="position-relative pb-5">
                @if(isset($subcomponent->title) && !empty($subcomponent->title))
                    <div class="column-carousel-name d-md-none position-relative col-10 pb-3 pb-md-0">{!! $subcomponent->title !!}</div>
                @endif
            </div>
            <div class="position-relative">
                <div class="col-10 offset-1">
                    @if(isset($subcomponent->url))
                        <a href="{{ $subcomponent->url }}">
                    @endif
                        <div class="column-carousel-image-wrapper">
                            <div class="column-carousel-image-wrapper inner {{$arOuterClasses}}">
                                <img class="img-fluid {{$arInnerClasses}}" src="{{ $subcomponent->image }}" alt="{{ $subcomponent->alt_text }}" title="{{ $subcomponent->title_tag }}">
                            </div>
                        </div>
                    </a>
                </div>        
                
                {{-- Only show if description is set --}}
                @if(isset($subcomponent->content) && !empty($subcomponent->content))
                    <div>
                        {{-- Description --}}
                        <div class="position-relative pt-5">                            
                            {!! $subcomponent->content !!}                
                        </div>
                    </div>                                  
                @endif
                @if(isset($subcomponent->url) && !empty($subcomponent->url))
                <div class="column-carousel-link text-center">
                    <a class="btn btn-tertiary" href="{{ $subcomponent->url }}">Read More</a>
                </div>
            @endif
            </div>                
        </div>
        {{-- Desktop View --}}
        <div class="position-relative column-carousel-wrapper p-0 d-none d-md-block">
            <div class="position-relative">
                <div class="column-carousel-image-wrapper">
                    <div class="column-carousel-image-wrapper inner {{$arOuterClasses}}">
                        <img class="img-fluid {{$arInnerClasses}}" src="{{ $subcomponent->image }}" alt="{{ $subcomponent->alt_text }}" title="{{ $subcomponent->title_tag }}">
                    </div>
                </div>

                {{-- Only show on larger devices --}}
                @if(isset($subcomponent->title) && !empty($subcomponent->title))
                    <div class="column-carousel-name d-none d-md-block">{!! $subcomponent->title !!}</div>
                @endif        

                @if(isset($subcomponent->url) && !empty($subcomponent->url))
                    <div class="column-carousel-link">
                        <a class="btn btn-secondary" href="{{ $subcomponent->url }}">Read More</a>
                    </div>
                @endif
            </div>
        </div>
    @endforeach
</div>