{% extends 'Game/index.html.twig' %}

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

{% block body %}
  <div class="auth-page">
    {% for email in app.flashes('reset_sent') %}
      <div class="auth-card auth-card--sent">
        <div class="auth-sent-icon"><i class="fa fa-envelope-o"></i></div>
        <h2 class="auth-title">Check your inbox</h2>
        <p class="auth-sub">If an account exists for that address, we sent a reset link to</p>
        <p class="auth-sent-email">{{ email }}</p>
        <p class="auth-sent-note">
          Click the link in the email to reset your password.<br>
          The link expires in <strong>1 hour</strong>.
        </p>
        <a href="{{ path('MineSeekerBundle_login') }}" class="auth-submit"
           style="text-decoration:none; margin-top:16px;">
          Go to Sign In
        </a>
      </div>
    {% else %}
      <div class="auth-card">
        <h2 class="auth-title">Forgot Password</h2>
        <p class="auth-sub">Enter your email and we'll send you a reset link</p>

        {{ form_start(form, {attr: {class: 'auth-form'}}) }}

          <div class="auth-field">
            <label for="{{ form.email.vars.id }}" class="auth-label">Email</label>
            <div class="auth-input-wrap">
              <i class="fa fa-envelope auth-input-icon"></i>
              {{ form_widget(form.email, {
                attr: {
                  class: 'auth-input' ~ (not form.email.vars.valid ? ' auth-input--error' : ''),
                  autocomplete: 'email',
                  autofocus: true,
                }
              }) }}
            </div>
            {% if not form.email.vars.valid %}
              {% for error in form.email.vars.errors %}
                <p class="auth-field-error"><i class="fa fa-exclamation-circle"></i> {{ error.message }}</p>
              {% endfor %}
            {% endif %}
          </div>

          <button type="submit" class="auth-submit">
            <i class="fa fa-paper-plane"></i> Send Reset Link
          </button>

        {{ form_end(form) }}

        <p class="auth-switch">
          Remembered it?
          <a href="{{ path('MineSeekerBundle_login') }}">Sign in</a>
        </p>
      </div>
    {% endfor %}
  </div>
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
  <script>
    (function () {
      const form = document.querySelector('.auth-form');
      if (!form) return;
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        grecaptcha.ready(function () {
          grecaptcha.execute('{{ recaptcha_site_key }}', {action: 'forgot_password'}).then(function (token) {
            document.getElementById('{{ form.recaptcha.vars.id }}').value = token;
            form.submit();
          });
        });
      });
    }());
  </script>
{% endblock %}