{% 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">{{ 'Update your password' | trans }}</p>
                <form class="api-form" action="{{ 'api/guest/staff/update_password'|link }}" method="post" data-api-redirect="{{ 'index'|alink }}">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="mb-3">
                        <label class="form-label" for="inputEmail">{{ 'Email address' | trans }}</label>
                        {{ data.email }}
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="inputCode">{{ 'Code' | trans }}</label>
                        <input class="form-control"
                               id="inputCode"
                               type="text"
                               name="code"
                               value="{{ data.hash }}"
                               placeholder="{{ 'Enter your secret code' | trans }}"
                               required
                               autofocus>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="inputPassword">{{ 'Password' | trans }}</label>
                        <input class="form-control"
                               id="inputPassword"
                               type="password"
                               name="password"
                               placeholder="{{ 'Enter your password' | trans }}"
                               required
                               autofocus>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="inputPassword2">{{ 'Repeat Password' | trans }}</label>
                        <input class="form-control"
                               id="inputPassword2"
                               type="password"
                               name="password_confirm"
                               placeholder="{{ 'Enter your password' | 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>
                            {{ 'Update password' | 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 %}
