@extends('layouts.app')

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

@section('content')
<div class="account-page">
    <header class="account-header">
        <h1>Change password</h1>
        <p class="account-subtitle">Update your sign-in password. Your username stays the same.</p>
    </header>

    <section class="account-card">
        <form action="{{ route('account.password.update') }}" method="POST" class="account-form">
            @csrf
            @method('PUT')

            <div class="account-field">
                <label for="current_password">Current password</label>
                <input type="password" id="current_password" name="current_password" required autocomplete="current-password">
                @error('current_password') <div class="account-error">{{ $message }}</div> @enderror
            </div>

            <div class="account-field">
                <label for="password">New password</label>
                <input type="password" id="password" name="password" required minlength="8" autocomplete="new-password">
                @error('password') <div class="account-error">{{ $message }}</div> @enderror
            </div>

            <div class="account-field">
                <label for="password_confirmation">Confirm new password</label>
                <input type="password" id="password_confirmation" name="password_confirmation" required minlength="8" autocomplete="new-password">
            </div>

            <div class="account-actions">
                <button type="submit" class="btn btn-primary">Update password</button>
            </div>
        </form>
    </section>
</div>

@push('styles')
<style>
    .account-header h1 { margin: 0 0 .35rem; font-size: 1.6rem; }
    .account-subtitle { margin: 0 0 1.25rem; color: #6b7280; max-width: 42rem; }
    .account-card { background: #fff; border-radius: 8px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); max-width: 480px; }
    .account-form { display: grid; gap: 1rem; }
    .account-field label { display: block; margin-bottom: .35rem; font-weight: 600; }
    .account-field input { width: 100%; padding: .55rem .7rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; }
    .account-error { margin-top: .35rem; color: #b91c1c; font-size: .875rem; }
    .account-actions { margin-top: .25rem; }
</style>
@endpush
@endsection