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

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

{% block metas %}
  {%- set _ogImage = app.request.getSchemeAndHttpHost() ~ asset('images/mine-1600x627.png') -%}
  <meta name="robots" content="noindex,nofollow"/>
  <meta property="og:url" content="{{ app.request.uri }}"/>
  <meta property="og:type" content="website"/>
  <meta property="og:site_name" content="MineSeeker"/>
  <meta property="og:title" content="Reset Password · MineSeeker"/>
  <meta property="og:description" content="Reset your MineSeeker account password."/>
  <meta property="og:image" content="{{ _ogImage }}"/>
  <meta name="twitter:card" content="summary"/>
  <meta name="twitter:title" content="Reset Password · MineSeeker"/>
{% 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="far fa-envelope"></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="fas 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="fas fa-circle-exclamation"></i> {{ error.message }}</p>
            {% endfor %}
          {% endif %}
        </div>

        <button type="submit" class="auth-submit">
          <i class="fas 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 %}