<div class="references-slider">
    <?php /* Dots navigation */ ?>
    <ul class="reference-nav">
        <?php for($i = 0; $i < $homeReferences->count(); $i++): ?>
            <li <?php if($i == 0): ?> class="active" <?php endif; ?> data-reference="<?php echo $i; ?>"></li>
        <?php endfor; ?>
    </ul>

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

            <span><?php echo KommaLang::get('interviewWith'); ?><br/>
                <strong><?php echo $reference->name; ?></strong>
            </span>

            <p>
                “<?php echo $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();
            ?>
            <?php if(!empty($referenceRoute)): ?>
                <a href="/<?php echo $referenceRoute->route; ?>"><?php echo KommaLang::get('readInterview'); ?></a>
            <?php endif; ?>
        </article>
    <?php endforeach; ?>

</div>