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

{% block title %}Reset 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('update.password')}}" name="register" method="post" autocomplete="off">
            {{ csrf.field | raw }}
            <input type="hidden" name="selector" value="{{selector}}">
            <input type="hidden" name="token" value="{{token}}">
            <div class="card-body">
            <h2 class="card-title text-center mb-4">Reset Password</h2>
            <p class="text-muted mb-4">You're just a step away from resetting your password. Please enter your new password below. Make sure it's strong and unique to keep your account secure.</p>
                <div class="mb-3 form-input{{ errors.password ? ' has-error' : '' }}">
                    <i class="fa fa-lock"></i> <input type="password" name="password" class="form-control" placeholder="Enter password">
                    {% if errors.password %}
                        <span class="hel-block">{{ errors.password | first }}</span>
                    {% endif %}
                </div>
                <div class="form-input">
                    <i class="fa fa-lock"></i> <input type="password" name="password2" class="form-control" placeholder="Re-enter password">
                </div>
            <div class="form-footer">
              <button type="submit" class="btn btn-primary w-100">
                <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"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
                Reset 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 %}