<x-filament-panels::page>
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
        {{-- Profile Information Form --}}
        <div>
            <form wire:submit="updateProfile">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10">
                    {{ $this->profileForm }}

                    <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700" style="margin-top: 1.5rem;">
                        <x-filament::button type="submit">
                            Save Changes
                        </x-filament::button>
                    </div>
                </div>
            </form>
        </div>

        {{-- Password Update Form --}}
        <div>
            <form wire:submit="updatePassword">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10">
                    {{ $this->passwordForm }}

                    <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700" style="margin-top: 1.5rem;">
                        <x-filament::button type="submit">
                            Update Password
                        </x-filament::button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <style>
        /* Enhanced styling for the forms */
        .fi-section {
            border: none !important;
            box-shadow: none !important;
        }
        
        .fi-section-header {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            padding-top: 1.5rem;
        }
        
        .fi-section-content {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            padding-bottom: 1.5rem;
        }
        
        .fi-section-header-heading {
            font-size: 1.125rem;
            font-weight: 600;
            color: rgb(17 24 39);
        }

        .dark .fi-section-header-heading {
            color: rgb(255 255 255);
        }
        
        .fi-section-header-description {
            font-size: 0.875rem;
            color: rgb(75 85 99);
            margin-top: 0.25rem;
        }

        .dark .fi-section-header-description {
            color: rgb(156 163 175);
        }

        /* Button styling */
        .fi-btn {
            display: inline-flex;
            align-items: center;
            transition: all 0.2s;
        }

        .fi-btn:hover {
            transform: scale(1.02);
        }

        .fi-btn svg {
            display: inline-block;
        }

        /* Responsive: Stack on mobile */
        @media (max-width: 768px) {
            div[style*="grid-template-columns: 1fr 1fr"] {
                grid-template-columns: 1fr !important;
            }
        }
    </style>
</x-filament-panels::page>
