@extends('layouts.auth')
@section('title', 'Choose a new password')
@section('content')
<main class="wrap-n" style="min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 16px">
    <div class="box stack" style="gap:20px;width:min(100%,440px)">
        <img src="{{ asset('assets/img/wordmark-ink.webp') }}" alt="KalpCanvas" style="height:28px;width:auto;align-self:flex-start">
        <h1 class="d3">Choose a new password</h1>
        @include('partials.flash')
        <form method="post" action="{{ route($area.'.password.update') }}" class="stack" style="gap:16px">
            @csrf
            <input type="hidden" name="token" value="{{ $token }}">
            <div class="field"><label class="label" for="r-email">Email</label><input id="r-email" name="email" type="email" class="input" required value="{{ old('email', $email) }}"></div>
            <div class="field"><label class="label" for="r-pw">New password</label><input id="r-pw" name="password" type="password" class="input" autocomplete="new-password" required><span class="hint">At least 8 characters, with letters and numbers.</span></div>
            <div class="field"><label class="label" for="r-pw2">Repeat password</label><input id="r-pw2" name="password_confirmation" type="password" class="input" autocomplete="new-password" required></div>
            <button class="btn btn-block">Save password</button>
        </form>
    </div>
</main>
@endsection