{layout layout}
<section class="auth-page">
  <div class="container auth-card">
    <h1 class="auth-title">Change email</h1>
    <p class="auth-desc">Current email：<strong>{$email}</strong>。The confirmation email will be sent to the new address，It takes effect only after you click the link in it。</p>
    {if !empty($flash.message)}
    <div class="form-alert form-alert-{$flash.type}">{$flash.message}</div>
    {/if}
    <form class="auth-form" action="{$entry_prefix}/account/email" method="post" autocomplete="off">
      <input type="hidden" name="_token" value="{$csrf}">
      <div class="form-group">
        <label class="form-label" for="email">New email</label>
        <input class="form-input" id="email" name="email" type="email" required autocomplete="email" placeholder="Enter your new email address">
      </div>
      <div class="form-group">
        <label class="form-label" for="password">Current password</label>
        <input class="form-input" id="password" name="password" type="password" required autocomplete="current-password" placeholder="to confirm your identity">
      </div>
      <button class="btn btn-primary btn-block btn-lg" type="submit">Send confirmation email</button>
    </form>
    <p class="auth-alt"><a href="{$entry_prefix}/account/password">Change password</a> · <a href="/">Back to home</a></p>
  </div>
</section>