@if($component->usps->isNotEmpty())

    <div id="component-item-{{$loop->iteration}}" class="o-usp  @if(!empty($component->dark_color)) o-usp--dark-theme @endif">

        <div class="o-usp__top">
            <div class="l-contain">
                <div class="o-usp__contain">

                    <div class="o-usp__header">
                        <h2 class="o-usp__heading">{{ $component->title }}</h2>
                    </div>

                    <div class="o-usp__grid">
                        @foreach($component->usps as $uspKey => $usp)

                            <div class="o-usp__item">
                                <h4 class="o-usp__title">
                                    <span class="o-usp__check">@include('site.components.icons.check')</span>
                                    {{ $usp->name }}
                                </h4>
                                <p class="o-usp__description">{!! nl2br($usp->description) !!}</p>
                            </div>

                        @endforeach
                    </div>

                </div>
            </div>
        </div>

        <div class="o-usp__impressions">
            <div class="o-usp__impression-contain">
                <div class="o-usp__contain">
                    <div class="o-usp__impressions-tray  js-usp-impressions">
                        @foreach($component->usps as $uspKey => $usp)

                            <div class="o-usp__impression  @if($loop->iteration == 1) is-active @endif  js-usp-impression"
                                 data-usp="{{ $uspKey }}">

                                <div class="o-usp__impression-indicator">
                                    <div class="o-usp__indicator"></div>
                                </div>

                                @if($usp->image->isNotEmpty())
                                    @include('site.components.image', ['images' => $usp->image])
                                @endif
                            </div>

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

    </div>

@endif