<?php
    $relatedId = 'related' . rand(1,10000);
    $itemImageField = !empty($itemImageField) ? $itemImageField : 'overviewImage';
    $itemImageSize = !empty($itemImageSize) ? $itemImageSize : '200x200';
    $itemTitleField = !empty($itemTitleField) ? $itemTitleField : 'title';
?>
<div id="{{ $relatedId }}" class="generic-related" data-controller="components/generic-related-slider">
    <div class="generic-related__content">
        <h3 class="generic-related__title">{{ $title }}</h3>
        <div class="generic-related__row-holder">
            <div class="generic-related__row" data-role="rack">
                @foreach($items as $item)
                    <div class="generic-related__item" data-role="item">
                        <a href="{{ lang_url($item->uri) }}">
                            <div class="generic-related__item-tile {{ $item->$itemImageField ? 'has-image' : ''}}">
                                @if($item->$itemImageField)
                                    <div class="generic-related__item-bg" style="background-image:url({{ getMediaUrl($item->$itemImageField->filename, !empty($item->imageSize) ? $item->imageSize : $itemImageSize) }})">
                                    </div>
                                @endif
                            </div>
                            <div class="generic-related__item-title">{{ $item->$itemTitleField }}</div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="generic-related__nav">
            <a class="generic-related__nav-prev" data-action="prev" href="#"></a>
            <a class="generic-related__nav-next" data-action="next" href="#"></a>
        </div>
    </div>
</div>
