@extends('layouts.vpm-dashboard', ['active' => 'account', 'area' => 'user'])

@section('title', 'Email')
@section('page_title', 'Email')
@section('page_subtitle', 'Change your sign-in email address')
@section('parent_title', 'Account')
@section('parent_url', route('app.account'))

@section('content')
<div class="vpm-action-page">
    @include('app.account._back')

    <x-vpm.action-hero
        title="Change email address"
        text="We will send a confirmation link to your new email before the change takes effect."
    />

    <section class="vpm-panel vpm-action-panel">
        <div class="vpm-panel__body">
            <p class="vpm-account-meta">Current: <strong>{{ $user->email }}</strong></p>
            @if ($user->pending_email)
                <p class="vpm-account-meta vpm-account-meta--pending">
                    Pending change to <strong>{{ $user->pending_email }}</strong> — check that inbox for the confirmation link.
                </p>
            @endif
            <form method="POST" action="{{ route('app.account.email.update') }}" class="vpm-account-form">
                @csrf
                @method('PUT')
                <div class="vpm-account-form__grid">
                    <label class="vpm-field vpm-account-form__full">
                        <span class="vpm-field__label">New email address</span>
                        <input type="email" class="vpm-input" name="email" value="{{ old('email') }}" required autocomplete="email">
                    </label>
                    <label class="vpm-field vpm-account-form__full">
                        <span class="vpm-field__label">Current password</span>
                        <input type="password" class="vpm-input" name="current_password" required autocomplete="current-password">
                    </label>
                </div>
                @error('email')<span class="vpm-field__error" role="alert">{{ $message }}</span>@enderror
                @error('current_password')<span class="vpm-field__error" role="alert">{{ $message }}</span>@enderror
                <x-vpm.button type="submit" variant="primary" class="vpm-btn--sm">Send confirmation link</x-vpm.button>
            </form>
        </div>
    </section>
</div>
@endsection