@extends('layouts.account')

@section('title', __('storefront.account.email_change_heading'))

@section('account')

    <div class="flex max-w-2xl flex-col gap-12">

        <div class="flex flex-col gap-6">
            <h1 class="font-display text-h3 font-black tracking-tight sm:text-h2">
                {{ __('storefront.account.email_change_heading') }}
            </h1>

            <p>
                {{ __('storefront.account.email_current') }} <strong class="break-all">{{ $user->email }}</strong>
            </p>
        </div>

        <form method="POST" action="{{ route('account.email.send') }}" class="flex flex-col gap-8">
            @csrf

            <x-ui.field
                :label="__('storefront.account.email_new')"
                for="account-new-email"
                :required="true"
                :description="__('storefront.account.email_new_hint')"
                :error="$errors->first('email')"
            >
                <x-ui.input
                    id="account-new-email"
                    name="email"
                    type="email"
                    autocomplete="email"
                    :value="old('email')"
                    :required="true"
                    autofocus
                    :aria-invalid="$errors->has('email') ? 'true' : null"
                    :aria-describedby="$errors->has('email') ? 'account-new-email-error' : 'account-new-email-description'"
                />
            </x-ui.field>

            <div class="flex flex-wrap items-center gap-8">
                <x-ui.button type="submit">{{ __('storefront.auth.send_code') }}</x-ui.button>

                <a href="{{ route('account') }}" class="text-sm underline hover:no-underline">
                    {{ __('storefront.account.delete_cancel') }}
                </a>
            </div>
        </form>

    </div>

@endsection