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

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

{% block body %}
  <div class="auth-page">
    <div class="auth-card">
      <h2 class="auth-title">Reset Password</h2>
      <p class="auth-sub">Choose a new password for your account</p>

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

      <div class="auth-field">
        <label for="{{ form.plainPassword.first.vars.id }}" class="auth-label">New Password</label>
        <div class="auth-input-wrap">
          <i class="fas fa-lock auth-input-icon"></i>
          {{ form_widget(form.plainPassword.first, {
            attr: {
              class: 'auth-input' ~ (not form.plainPassword.vars.valid ? ' auth-input--error' : ''),
              autocomplete: 'new-password',
              autofocus: true,
              minlength: '6',
            }
          }) }}
        </div>
        {% if not form.plainPassword.vars.valid %}
          {% for error in form.plainPassword.vars.errors %}
            <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
          {% endfor %}
        {% endif %}
      </div>

      <div class="auth-field">
        <label for="{{ form.plainPassword.second.vars.id }}" class="auth-label">Confirm New Password</label>
        <div class="auth-input-wrap">
          <i class="fas fa-lock auth-input-icon"></i>
          {{ form_widget(form.plainPassword.second, {
            attr: {
              class: 'auth-input' ~ (not form.plainPassword.vars.valid ? ' auth-input--error' : ''),
              autocomplete: 'new-password',
            }
          }) }}
        </div>
      </div>

      <button type="submit" class="auth-submit">
        <i class="fas fa-key"></i> Set New Password
      </button>

      {{ form_end(form) }}
    </div>
  </div>
{% endblock %}

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