@php
    $avatarTones = ['#3f8419', '#013b7c', '#be185d', '#0f766e', '#b45309', '#6d28d9'];
@endphp
<div class="reviews__layout reviews__layout--solo">

    <div class="rslider reveal" data-reviews>
        <div class="rslider__track" data-reviews-track tabindex="0" aria-label="Donor reviews, scroll sideways for more">
            @foreach ($testimonials as $t)
                <article class="rcard">
                    <header class="rcard__top">
                        <span class="rcard__avatar" style="background: {{ $avatarTones[$loop->index % count($avatarTones)] }}" aria-hidden="true">{{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($t->name, 0, 1)) }}</span>
                        <div class="rcard__who">
                            <strong>{{ $t->name }}</strong>
                            @if ($t->role)<span>{{ $t->role }}</span>@endif
                        </div>
                        <svg class="rcard__g i" aria-hidden="true"><use href="#i-heart"/></svg>
                    </header>
                    <div class="rcard__meta">
                        <p class="rstars" role="img" aria-label="Rated {{ $t->rating }} out of 5">
                            @foreach (range(1, 5) as $n)<span @class(['is-on' => $n <= $t->rating])>★</span>@endforeach
                        </p>
                        @if ($t->reviewed_at)<time datetime="{{ $t->reviewed_at->toDateString() }}">{{ $t->reviewed_at->diffForHumans() }}</time>@endif
                    </div>
                    <blockquote class="rcard__text" data-review-text><p>{{ $t->quote }}</p></blockquote>
                    <button class="rcard__more" type="button" data-review-more hidden>Read more</button>
                    <p class="rcard__foot"><svg class="i" aria-hidden="true"><use href="#i-check"/></svg>Verified donor</p>
                </article>
            @endforeach
        </div>
        <div class="rslider__nav">
            <button class="rslider__btn" type="button" data-reviews-prev aria-label="Previous reviews"><svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></button>
            <button class="rslider__btn" type="button" data-reviews-next aria-label="Next reviews"><svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></button>
        </div>
    </div>
</div>