@extends('frontend::layouts.master')

@push('styles')
    <link type="text/css" href="{{ asset('assets/libs/toastr/build/toastr.min.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="bg-med-gray">
        <div class="flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full">
            <div class="lg:grid lg:grid-cols-12 lg:gap-8">
                <aside class="hidden lg:block lg:col-span-3">
                    @include('frontend::profile.profile-menu._profile-menu')
                </aside>
                <main class="lg:col-span-9">
                    <div class="mb-6">
                        <h1 class="text-2xl font-bold text-med-dark">{{ __('frontend::lang.page.profile_change_password.title') }}</h1>
                        <p class="text-sm text-gray-500 mt-1">{{ __('frontend::lang.page.profile_change_password.title_desc') }}</p>
                    </div>
                    <livewire:frontend::section.profile-change-password />
                </main>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/libs/toastr/build/toastr.min.js') }}"></script>
    <script>
        document.addEventListener('livewire:init', () => {
            Livewire.on('toastMessageSuccess', (e) => {
                toastr.success(e[0] ?? '');
            });
            Livewire.on('toastMessageError', (e) => {
                toastr.error(e[0] ?? '');
            });
        });
    </script>
@endpush