@extends('site.master')

@section('title', $page->translation->meta_title)
@section('meta_description', $page->translation->meta_description)

@section('hero-body')
    @include('site.components.heroHeading', [
               'heroHeadingTitle' => ( !empty($page->translation->visual_name) ? $page->translation->visual_name : $page->translation->name),
               'heroHeadingSubTitle' => (!empty($page->translation->description) ? $page->translation->description : __('site/integrations.description'))
           ])
@endsection

@section('content')
    @include('site.components.hero')

    <div class="c-body  o-blocks">
        <div class="l-grid  o-block-bg">

            <section class="t-integrations">

                <div class="t-integrations__content">

                    @if($integrations->count() != 0)

                        <div class="l-matrix">
                            @foreach($integrations as $integration)

                                <article class="l-matrix__item  c-thumbnail card-like">

                                    <a class="c-thumbnail__link"
                                       href="/{{$links->integrations->route}}/{{$integration->translation->slug}}">

                                        <div class="c-thumbnail__frame">
                                            <span class="c-thumbnail__image"
                                                  @if(isset($integration->images) && $integration->images->count() != 0 && $integration->languageImages()->isNotEmpty()) style="background-image: url('{{ $integration->languageImages()->first()->small_image_url }}');"  @endif ></span>
                                        </div>


                                        <div class="c-thumbnail__content">
                                            <p class="c-thumbnail__caption">{{ $integration->translation->name }}</p>
                                            <p class="c-thumbnail__text">{{ $integration->translation->description }}</p>
                                        </div>
                                    </a>
                                </article>

                            @endforeach
                        </div>

                    @else

                        <div class="c-empty">
                            <div class="c-empty__body">
                                @lang('site/integrations.noIntegrations')
                            </div>
                        </div>

                    @endif

                </div>
            </section>
        </div>
    </div>
@endsection