{% extends "./layout/auth" %}
{% block content %}
    <div class="page-single">
        <div class="container">
            <div class="row">
                <div class="col col-login mx-auto">
                    <div class="text-center mb-6">
                        <img src="v2/assets/images/firefly-iii-48.png" class="h-6" alt="Firefly III v{{ FF_VERSION }}" title="Firefly III v{{ FF_VERSION }}">
                    </div>
                    <form class="card" action="{{ route('password.reset.request') }}" method="post">


                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="token" value="{{ token }}">
                        <div class="card-body p-6">
                            <div class="card-title">{{ 'reset_password'|_ }}</div>
                            <div class="form-group">
                                <label class="form-label">{{ trans('form.email') }}</label>
                                <input autocomplete="email" type="email" name="email" class="{% if errors.has('email') %}is-invalid{% endif %} form-control" placeholder="{{ trans('form.email') }}" value="{{ old('email') }}" required>
                                {% if errors.has('email') %}
                                    <div class="invalid-feedback">
                                        {{ errors.get('email')[0] }}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="form-group">
                                <label class="form-label">{{ trans('form.password') }}</label>
                                <input type="password" autocomplete="password" class="{% if errors.has('password') %}is-invalid{% endif %} form-control" name="password" placeholder="{{ trans('form.password') }}" required>
                                {% if errors.has('password') %}
                                    <div class="invalid-feedback">
                                        {{ errors.get('password')[0] }}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="form-group">
                                <label class="form-label">{{ trans('form.password_confirmation') }}</label>
                                <input type="password" autocomplete="password" name="{% if errors.has('password_confirmation') %}is-invalid{% endif %} password_confirmation" class="form-control" placeholder="{{ trans('form.password_confirmation') }}" required>
                                {% if errors.has('password_confirmation') %}
                                    <div class="invalid-feedback">
                                        {{ errors.get('password_confirmation')[0] }}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="form-group">
                                <label class="custom-control custom-checkbox">
                                    <input type="checkbox" name="verify_password" value="1" checked class="custom-control-input" />
                                    <span class="custom-control-label"><a href="#" data-toggle="modal" data-target="#pwModal">{{ trans('form.verify_password') }}</a></span>
                                </label>
                            </div>

                            <div class="form-footer">
                                <button type="submit" class="btn btn-primary btn-block">{{ 'button_reset_password'|_ }}</button>
                            </div>
                        </div>
                    </form>
                    <div class="text-center text-muted">
                        <a href="{{ route('login') }}">{{ 'want_to_login'|_ }}</a><br>
                    </div>
                </div>
            </div>
        </div>
    </div>



    {# modal #}

    <div class="modal fade" id="pwModal" tabindex="-1" role="dialog" aria-labelledby="pwModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        {{ 'secure_pw_history'|_ }}
                    </p>
                    <p>
                        {{ 'secure_pw_ff'|_ }}
                    </p>
                    <p>
                        {{ 'secure_pw_check_box'|_ }}
                    </p>

                    <h4>{{ 'secure_pw_working_title'|_ }}</h4>
                    <p>
                        {{ 'secure_pw_working'|_ }}
                    </p>
                    <h4>{{ 'secure_pw_should'|_ }}</h4>
                    <p>
                        {{ 'secure_pw_long_password'|_ }}
                    </p>
                    </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">{{ 'close'|_ }}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}