@php
    $templateContent = getContent('template.content', true);
    $writingAssistant = App\Models\WritingAssistant::active()->inRandomOrder()->limit(8)->get();
@endphp
<section class="ai-template-section section-bg py-120">
    <div class="container position-relative">
        <div class="ai-template-shape">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="row justify-content-center">
            <div class="col-xl-5 col-lg-6">
                <div class="section-title text-center">
                    <span class="btn btn--base btn--section animate" data-direction="down">{{ __($templateContent?->data_values?->heading ?? '') }}</span>
                    <h2 class="main-title animate" data-direction="down">{{ __($templateContent?->data_values?->subheading ?? '') }}</h2>
                    <p class="sub-title animate" data-direction="down">{{ __($templateContent?->data_values?->short_details ?? '') }}</p>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="row gy-4 justify-content-center mt-60">
            @foreach ($writingAssistant as $assistant)
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="ai-template__cart animate">
                        <div class="ai-template__cart-header">
                            <img src="{{ getImage(getFilePath('writingAssistant') . '/' . $assistant->image, getFileSize('writingAssistant')) }}" alt="blog">
                            <h4>{{ __($assistant->name) }}</h4>
                        </div>
                        <p>{{ __($assistant->description) }}</p>
                        <a href="{{ route('user.writing.assistant.template', $assistant->slug) }}" class="more-btn">@lang('Use Assistant') <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>