@include('components.seo')
<div class="space-y-4 mt-20">
    <x-client.breadcrumbs :breadcrumb="$breadcrumb"/>
    <h2 class="font-bold">سوالات متداول </h2>
    @forelse($datas as $data)
        <div
            class="border p-2 rounded-2xl"
            x-data="{ expanded: false }">
            <h2
                class="flex w-full justify-between  items-center p-2 font-bold"
                @click="expanded = ! expanded">

                {{$data->name}}
                <span class="border p-1 rounded-full">
                <x-icons.chevron-down/>
                </span>
            </h2>
            <div
                class="mt-4 text-justify border-t-2"
                x-show="expanded" x-collapse>
                {!! $data->description !!}
            </div>
        </div>

    @empty
        سوالی با مورد شما یافت نشد
    @endforelse
    <livewire:client.component.free-advice/>

</div>