{% extends "layouts/auth.twig" %}

{% block title %}Forgot Password{% endblock %}

{% block content %}
    <div class="page page-center">
      <div class="container container-tight py-4">
        <div class="text-center mb-4">
          <a href="." class="navbar-brand navbar-brand-autodark"><img src="./static/logo-bw.svg" height="36" alt=""></a>
          {% include 'partials/flash.twig' %}
        </div>
        <form class="card card-md" action="{{route('forgot.password')}}" name="register" method="post" autocomplete="off" novalidate>
	{{ csrf.field | raw }}
          <div class="card-body">
            <h2 class="card-title text-center mb-4">Forgot password</h2>
            <p class="text-muted mb-4">Enter your email address and your password will be reset and emailed to you.</p>
            <div class="mb-3">
              <label class="form-label">Email address</label>
              <input type="email" name="email" class="form-control{{ errors.email ? ' is-invalid' : '' }}" placeholder="Enter email">
			  {% if errors.email %}
			      <small class="form-hint">{{ errors.email | first }}</small>
			  {% endif %}
            </div>
            <div class="form-footer">
              <button type="submit" class="btn btn-primary w-100">
                <!-- Download SVG icon from http://tabler-icons.io/i/mail -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="3" y="5" width="18" height="14" rx="2" /><polyline points="3 7 12 13 21 7" /></svg>
                Send me new password
              </button>
            </div>
          </div>
        </form>
        <div class="text-center text-muted mt-3">
          Forget it, <a href="{{route('login')}}">send me back</a> to the sign in screen.
        </div>
      </div>
    </div>
{% endblock %}
