<div class="references-slider">
    {{-- Dots navigation --}}
    <ul class="reference-nav">
        @for($i = 0; $i < $homeReferences->count(); $i++)
            <li @if($i == 0) class="active" @endif data-reference="{{$i}}"></li>
        @endfor
    </ul>

    {{-- Reference content --}}
    @foreach($homeReferences as $key => $reference)
        <article class="reference @if($key == 0) active @endif" data-reference="{{$key}}">
            <figure class="image"
                    @if($reference->images->count() != 0) style="background-image: url('{{$reference->images->first()->medium_image_url}}');" @endif></figure>

            <span>{{KommaLang::get('interviewWith')}}<br/>
                <strong>{{$reference->name}}</strong>
            </span>

            <p>
                “{{$reference->translations->first()->streamer}}”
            </p>
            <?php
                $referenceRoute = $reference->translations->first()->routes->filter(function ($route) use ($page) {
                    if (starts_with($route->route, $page->translation->route->route)) {
                        return $route->route;
                    }
                })->first();
            ?>
            @if(!empty($referenceRoute))
                <a href="/{{$referenceRoute->route}}">{{KommaLang::get('readInterview')}}</a>
            @endif
        </article>
    @endforeach

</div>