@php
    $title = 'Passwort ändern';
    $pageTitle = 'Passwort ändern';
    $pageSubtitle = 'Ändere dein Passwort sicher und jederzeit.';
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="max-w-6xl space-y-6 mx-auto">
        @if (session('status'))
            <div class="rounded-2xl border border-emerald-200 bg-emerald-50 px-5 py-4 text-sm text-emerald-800">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('account.password.update') }}"
            class="rounded-2xl border border-gray-200 bg-white p-6 space-y-5">
            @csrf
            @method('PATCH')

            <div>
                <label class="text-sm font-medium text-gray-800">Aktuelles Passwort</label>
                <input type="password" name="current_password" autocomplete="current-password" required
                    class="mt-2 w-full rounded-xl border-gray-200 bg-white focus:border-brand focus:ring-brand">
                @error('current_password')
                    <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                @enderror
            </div>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <label class="text-sm font-medium text-gray-800">Neues Passwort</label>
                    <input type="password" name="password" autocomplete="new-password" required
                        class="mt-2 w-full rounded-xl border-gray-200 bg-white focus:border-brand focus:ring-brand">
                    @error('password')
                        <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                    @enderror
                </div>

                <div>
                    <label class="text-sm font-medium text-gray-800">Neues Passwort bestätigen</label>
                    <input type="password" name="password_confirmation" autocomplete="new-password" required
                        class="mt-2 w-full rounded-xl border-gray-200 bg-white focus:border-brand focus:ring-brand">
                </div>
            </div>

            <div class="rounded-2xl border border-gray-200 bg-gray-50 p-4 text-sm text-gray-600">
                Empfehlung: mindestens <span class="font-semibold">12 Zeichen</span>, Groß-/Kleinbuchstaben, Zahlen.
            </div>

            <div class="flex items-center justify-end gap-2">
                <a href="{{ url()->previous() }}"
                    class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                    Abbrechen
                </a>
                <button
                    class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600 focus:outline-none focus:ring-4 focus:ring-brand/25">
                    Speichern
                </button>
            </div>
        </form>
    </div>
</x-ux-layout>