@php
    $content = getContent('testimonial.content', true);
    $elements = getContent('testimonial.element', false);
@endphp

<section class="testimonials my-120" id="testimonial">
    <div class="container">
        <div class="section-heading">
            <h3 class="section-heading__title">
                {{ __($content->data_values->title) }}
            </h3>
            <p class="section-heading__desc">{{ __($content->data_values->description) }}</p>
        </div>
        <div class="testimonial-slider">
            @foreach ($elements as $element)
                <div class="testimonials-card">
                    <div class="testimonial-item">
                        <div class="testimonial-item__thumb">
                            <img src="{{ frontendImage('testimonial', $element->data_values->image) }}"
                                alt="@lang('image')" />
                        </div>
                        <div class="testimonial-item__details">
                            <p class="testimonial-item__name">
                                <span class="name-text">{{ __($element->data_values->author_name) }}</span>,
                                {{ __($element->data_values->comment_date) }}
                            </p>
                            <div class="testimonial-item__rating">
                                <ul class="rating-list">
                                    @for ($i = 1; $i <= 5; $i++)
                                        <li
                                            class="rating-list__item {{ $i <= $element->data_values->rating ? '' : 'without-fill' }}">
                                            <i class="las la-star"></i>
                                        </li>
                                    @endfor

                                </ul>
                            </div>
                            <p class="testimonial-item__desc">{{ __($element->data_values->comment) }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>