@section('componentable-area-' . $loop->iteration)

    @php $tileViewComponent = \App\Helpers\Atomic::createTileViewComponent($component); @endphp

    <div class="o-tiles">
        @if(!empty($component->label))
            <p class="o-tiles__label">{{$component->label}}</p>
        @endif
        @if(!empty($component->title))
            <p class="o-tiles__title">{{$component->title}}</p>
        @endif

        <div class="o-tiles__grid">
            @foreach($tileViewComponent->tiles as $tile)
                <div class="c-tile">
                    @if(!empty($tile->image[0]))
                        <div class="c-tile__visual">
                            <img src="{{isset($tile->image[0]) ? $tile->image[0]->medium_image_url : false}}" alt="">
                        </div>
                    @endif
                    <div class="c-tile__body">

                        <div class="c-tile__heading">
                            @if(!empty($tile->title))
                                @if(isset($tile->icon) && $tile->icon != 'null')
                                    <div class="c-tile__icon">
                                        @if(isset($tile->icon) && View::exists('site.components.icons.tokens.'.$tile->icon))
                                            @include('site.components.icons.tokens.'.$tile->icon)
                                        @endif
                                    </div>
                                @endif
                                <div class="c-tile__title">{{$tile->title}}</div>
                            @endif
                        </div>

                        @if(!empty($tile->subtitle))
                            <div class="c-tile__subtitle">{{$tile->subtitle}}</div>
                        @endif

                        @if(!empty($tile->description))
                            <div class="c-tile__description">{!! $tile->description !!}</div>
                        @endif

                        <div class="c-tile__action">
                            @if(!empty($tile->button_link) && !empty($tile->button_label))
                                @if(!empty($component->is_button_filled) && $component->is_button_filled)
                                    @include('site.components.buttonLink', [
                                        'modifiers' => 'filled',
                                        'buttonText' => $tile->button_label,
                                        'buttonLink' => $tile->button_link
                                    ])
                                @else
                                    @include('site.components.textButtonLink', [
                                        'modifiers' => 'icon',
                                        'textButtonText' => $tile->button_label,
                                        'textButtonLink' => $tile->button_link
                                    ])
                                @endif
                            @endif
                        </div>
                    </div>

                </div>
            @endforeach
        </div>
    </div>


{{--        @if($cardViewComponent->hover_layout)--}}
{{--                <div class="c-industry-cards">--}}
{{--                    @foreach($cardViewComponent->cards as $card)--}}
{{--                        <a href="{{$card->button_link}}" class="c-card c-card--shadow">--}}
{{--                            <div class="c-card__body">--}}
{{--                                <div class="c-card__icon">--}}
{{--                                    @include('site.components.token', ['icon' => $card->icon, 'modifiers' => ['industryCard']])--}}
{{--                                </div>--}}
{{--                                <h4 class="c-card__title">{{ $card->title }}</h4>--}}
{{--                                <div class="c-card__description">--}}
{{--                                    {!! $card->description !!}--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </a>--}}
{{--                    @endforeach--}}
{{--                </div>--}}
{{--        @else--}}

{{--        <div class="l-matrix  @if($cardViewComponent->boxed) l-matrix--dense @endif  @if(isset($cardViewComponent) && $cardViewComponent)  l-matrix--mobile-divider @endif @if(isset($cardViewComponent->webinar) && $cardViewComponent->webinar) t-webinars__items @endif">--}}

{{--            --}}{{-- Check if there are cards --}}
{{--            @if($cardViewComponent->cards->count() != 0)--}}

{{--                @foreach($cardViewComponent->cards as $card)--}}

{{--                    <div class="l-matrix__item">--}}
{{--                        @include('site.components.card', [--}}
{{--                        'modifiers' => $cardViewComponent->cardModifiers,--}}
{{--                        'cardIcon' => $card->icon,--}}
{{--                        'cardImage' => isset($card->image[0]) ? $card->image[0]->path : false,--}}
{{--                        'webinar' => isset($cardViewComponent->webinar) ? $cardViewComponent->webinar : false,--}}
{{--                        'cardTitle' => $card->title,--}}
{{--                        'cardText' => $card->description,--}}
{{--                        'textButtonLink' => $card->button_link,--}}
{{--                        'textButtonText' => $card->button_label,--}}
{{--                        ])--}}
{{--                    </div>--}}
{{--                @endforeach--}}

{{--                --}}{{-- Else make 3 items as preview--}}
{{--            @else--}}

{{--                @for ($i = 0; $i < 3; $i++)--}}
{{--                    <div class="l-matrix__item">--}}
{{--                        @include('site.components.card', ['forceIcon' => true])--}}
{{--                    </div>--}}
{{--                @endfor--}}

{{--            @endif--}}

{{--        </div>--}}

{{--        @endif--}}


@endsection

@include('site.organisms.componentables.componentLayout', ['componentableLayoutClass' => 'o-block--light-shade'])