@if (session('status') === 'password-updated')
    <div
        x-data="{ show: true }"
        x-show="show"
        x-transition
        x-init="setTimeout(() => show = false, 2000)"
    >
        <x-t-toast
            variant="success"
            icon="<i class='fa-solid fa-check'></i>"
        >
            {{ __('Saved') }}
        </x-t-toast>
    </div>
@endif

<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
    <div>
        <x-t-heading
            variant="light"
            level="3"
            size="sm"
        >
                {{ __('Update Password') }}
        </x-t-heading>
        <x-t-text
            size="sm"
            pretty
        >
            {{ __("Ensure your account is using a long, random password to stay secure.") }}
        </x-t-text>
    </div>
    <form method="post" action="{{ route('password.update') }}">
        @csrf
        @method('put')
        @if (request()->user()->provider)
            <x-t-alert
                variant="warning"
                title="{{ __('No password to update') }}"
            >
                <x-t-text variant="warning" size="sm">{{ __('Your account was registered with a social media provider.') }}</x-t-text>
                <x-t-badge variant="dark">{{ request()->user()->provider }}</x-t-badge>
            </x-t-alert>
        @else
            <x-t-input
                type="password"
                label="{{__('Current Password')}}"
                name="current_password"
                variant="{{ $errors->updatePassword->get('current_password') ? 'danger' : '' }}"
                autocomplete="current_password"
                hint="{{ config('streamline.demo_mode.enabled') === true ? 'Disabled in demo mode' : '' }}"
                :disabled="config('streamline.demo_mode.enabled') === true"
            />
            <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mb-2" />
            <x-t-input
                type="password"
                label="{{__('New Password')}}"
                name="password"
                variant="{{ $errors->updatePassword->get('password') ? 'danger' : '' }}"
                autocomplete="new-password"
                hint="{{ config('streamline.demo_mode.enabled') === true ? 'Disabled in demo mode' : '' }}"
                :disabled="config('streamline.demo_mode.enabled') === true"
            />
            <x-input-error :messages="$errors->updatePassword->get('password')" class="mb-2" />
            <x-t-input
                type="password"
                label="{{__('Confirm Password')}}"
                name="password_confirmation"
                variant="{{ $errors->updatePassword->get('password_confirmation') ? 'danger' : '' }}"
                autocomplete="new-password"
                hint="{{ config('streamline.demo_mode.enabled') === true ? 'Disabled in demo mode' : '' }}"
                :disabled="config('streamline.demo_mode.enabled') === true"
            />
            <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mb-2" />
        @endif
        @if (!request()->user()->provider)
            <div class="flex justify-end mt-5">
                <x-t-button
                    type="submit"
                    variant="success"
                    prefix="<i class='fa-solid fa-check'></i>"
                >
                    {{ __('Save') }}
                </x-t-button>
            </div>
        @endif
    </form>
</div>