<x-admin-app-layout>
    <div class="white-box">
        <x-admin::page-header title="{{ __('Frontend Page Content') }}" :isFilterable="false" :buttons="$buttons" />
        <div class="grid grid-cols-1 md:grid-cols-2 xxl:grid-cols-3 gap-4 xxl:gap-6">
            @foreach ($sections as $section)
                <a href="{{ route('admin.settings.frontend-sections.edit', $section->slug) }}" class="primary5-box !p-3 3xl:!p-4 flex justify-between items-center">
                    <div class="flex items-center gap-2 xl:gap-3">
                        <div
                            class="size-8 xl:size-10 shrink-0 rounded-lg bg-primary f-center text-neutral-0 text-lg lg:text-xl 3xl:text-2xl">
                            <i class="{{ $section->icon }}"></i>
                        </div>
                        <div>
                            <p class="s-text font-medium mb-1 3xl:mb-2 line-clamp-1">{{ __($section->title) }}</p>
                            <span class="text-neutral-400 dark:text-neutral-70 line-clamp-1">{{ __($section->hint) }}</span>
                        </div>
                    </div>
                    <div
                        class="size-8 xl:size-10 shrink-0 rounded-lg bg-neutral-0 border border-neutral-30 dark:border-neutral-500 dark:bg-neutral-904 f-center text-lg md:text-xl xxl:text-2xl">
                        <i class="ph ph-arrow-right"></i>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</x-admin-app-layout>
