@extends('admin.layouts.dashboard')

@section('title', 'Change Password')

@section('content')
    <x-page-header
        title="Change Password"
        description="Update the password for your own account."
        :breadcrumbs="['Dashboard' => url('/dashboard'), 'Account' => null, 'Change password' => null]"
    />

    <div style="max-width: 560px;">
        <x-card>
            <form id="password-form" method="POST" action="{{ url('/password_update') }}" data-guard>
                @csrf

                <div class="form-grid">
                    <x-field label="Current password" name="old_password" :required="true" span="12">
                        <input type="password" id="old_password" name="old_password"
                               class="input @error('old_password') is-invalid @enderror"
                               autocomplete="current-password" required
                               @error('old_password') aria-invalid="true" aria-describedby="old_password-error" @enderror>
                    </x-field>

                    <x-field
                        label="New password"
                        name="password"
                        :required="true"
                        span="12"
                        hint="At least 8 characters."
                    >
                        <input type="password" id="password" name="password"
                               class="input @error('password') is-invalid @enderror"
                               autocomplete="new-password" required minlength="8"
                               @error('password') aria-invalid="true" aria-describedby="password-error" @enderror>
                    </x-field>

                    <x-field label="Confirm new password" name="password_confirmation" :required="true" span="12">
                        <input type="password" id="password_confirmation" name="password_confirmation"
                               class="input" autocomplete="new-password" required minlength="8">
                    </x-field>
                </div>
            </form>

            <x-slot:footer>
                <a href="{{ url('/dashboard') }}" class="btn btn--secondary">Cancel</a>
                <button type="submit" form="password-form" class="btn btn--primary" data-loading-label="Updating…">
                    <i class="fa-solid fa-key" aria-hidden="true"></i>
                    Update password
                </button>
            </x-slot:footer>
        </x-card>
    </div>
@endsection