{% extends 'layout_login.html.twig' %}

{% block meta_title %}{{ 'Reset your password' | trans }}{% endblock %}

{% block content %}

<div class="page page-center">
    <div class="container-tight py-4">
        <div class="text-center mb-4">
            <a href="{{ '/'|link }}" class="navbar-brand">
                <img src="{{ guest.system_company.logo_url }}" height="75" alt="{{ company.name }}">
            </a>
        </div>
        <div class="card card-md">
            <div class="card-body">
                <h2 class="h2 text-center mb-4">{{ 'Reset your password' | trans }}</h2>
                <p class="text-muted mb-4">{{ 'Enter your email address. You will receive a confirmation link if your account exists.' | trans }}</p>
                <form class="api-form" action="{{ 'api/guest/staff/passwordreset'|link }}" method="post" data-api-redirect="{{ 'index'|alink }}" data-api-msg="{{ 'A password reset confirmation email will be sent to you if we found an account with that email address.'|trans }}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="mb-3">
                        <label class="form-label" for="inputEmail">{{ 'Email address' | trans }}</label>
                        <input class="form-control"
                               id="inputEmail"
                               type="email"
                               name="email"
                               value="{{ request.email }}"
                               placeholder="{{ 'Enter your email address' | trans }}"
                               required
                               autofocus>
                    </div>
                    <div class="form-footer">
                        <button class="btn btn-primary w-100" type="submit">
                            <svg class="icon">
                                <use xlink:href="#mail" />
                            </svg>
                            {{ 'Send me the link' | trans }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="text-center text-muted mt-3">
            <a href="{{ 'staff/login'|alink }}">{{ 'Take me back to the login screen.' | trans }}</a>
        </div>
    </div>
</div>
{% endblock %}
