@props([
    'title',
    'description' => null,
    'backUrl' => null,
])

@php
    $backUrl = $backUrl ?? route('platform.profile');
@endphp

<div class="account-edit">
    <div class="account-edit__header">
        <a href="{{ $backUrl }}" class="account-edit__back" aria-label="{{ __('pages.personal_info.back') }}">
            <x-platform.lucide-icon name="arrow-left" class="h-5 w-5" />
        </a>
        <div>
            <h1 class="account-edit__title">{{ $title }}</h1>
            @if ($description)
                <p class="account-edit__description">{{ $description }}</p>
            @endif
        </div>
    </div>

    @if ($errors->any())
        <div class="account-edit__alert account-edit__alert--error" role="alert">
            <ul class="list-disc space-y-1 pl-4">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{ $slot }}
</div>

@if (session('success'))
    <div
        x-data="{ show: true }"
        x-show="show"
        x-init="setTimeout(() => show = false, 4000)"
        x-transition.opacity
        class="account-toast"
        role="status"
    >
        <x-platform.lucide-icon name="check-circle" class="h-5 w-5 shrink-0" />
        <span>{{ session('success') }}</span>
    </div>
@endif