@section('title', __('Profile Menu Settings'))
<div>

    <x-baseview title="{{ __('Profile Menu Settings') }}">
        <div class="grid grid-cols-1 gap-4">
            @foreach ($sections as $section)
                <div class="p-4 bg-white border rounded-lg shadow-sm">
                    <h3 class="text-lg font-semibold text-gray-800">{{ $section['title'] }}</h3>
                    <p class="mt-1 text-sm text-gray-600">{{ $section['description'] }}</p>
                    <div class="grid grid-cols-1 gap-2 mt-3 md:grid-cols-2 lg:grid-cols-3">
                        @foreach ($section['items'] as $key => $label)
                            <x-checkbox
                                :title="$label"
                                :name="'profileMenu.' . $key"
                                :defer="false"
                                :description="__('Visible when enabled')"
                            />
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>

        <div class="flex items-center gap-2 mt-4">
            <button type="button" wire:click="save"
                class="inline-flex justify-center px-4 py-2 text-sm font-medium text-white border border-transparent rounded-md shadow-sm bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                {{ __('Save') }}
            </button>
            <button type="button" wire:click="resetToDefault"
                class="inline-flex justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                {{ __('Reset to Default') }}
            </button>
        </div>
    </x-baseview>

</div>