@extends('layouts.admin')

@section('content')
    <div class="max-w-5xl mx-auto space-y-8 animate-luxury-in">
        <!-- Header -->
        <div class="mb-8">
            <h2 class="text-3xl font-extrabold text-slate-800 dark:text-white font-display tracking-tight">{{ __('Account Settings') }}</h2>
            <p class="text-sm font-bold text-slate-400 dark:text-slate-400 mt-1 uppercase tracking-widest">{{ __('Manage your profile information, security settings, and login history') }}</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Left Side: Basic Info & Security -->
            <div class="lg:col-span-2 space-y-8">
                <div class="luxury-card rounded-2xl p-8">
                    @include('profile.partials.update-profile-information-form')
                </div>

                <div class="luxury-card rounded-2xl p-8">
                    @include('profile.partials.update-password-form')
                </div>

                <div class="luxury-card rounded-2xl p-8 border-rose-500/20 dark:border-rose-500/10">
                    @include('profile.partials.delete-user-form')
                </div>
            </div>

            <!-- Right Side: Login History -->
            <div class="lg:col-span-1">
                <div class="luxury-card rounded-2xl p-6 sticky top-24">
                    @include('profile.partials.login-history')
                </div>
            </div>
        </div>
    </div>
@endsection