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

{% block title %} - Register{% endblock %}

{% block metas %}
  {%- set _ogImage = 'https://' ~ app.request.host ~ asset('/images/mine-1600x627.png') -%}
  <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="Create Account · MineSeeker"/>
  <meta property="og:description"
        content="Join MineSeeker for free. Track your wins, relive your best battles and prove you're the better minesweeper."/>
  <meta property="og:image" content="{{ _ogImage }}"/>
  <meta property="og:image:width" content="1600"/>
  <meta property="og:image:height" content="627"/>
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" content="Create Account · MineSeeker"/>
  <meta name="twitter:description"
        content="Join MineSeeker for free. Track your wins, relive your best battles and prove you're the better minesweeper."/>
  <meta name="twitter:image" content="{{ _ogImage }}"/>
{% endblock %}

{% block body %}
  <div class="auth-page">
    {% for email in app.flashes('verify_email') %}
      <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">We sent an activation link to</p>
        <p class="auth-sent-email">{{ email }}</p>
        <p class="auth-sent-note">
          Click the link in the email to activate your account.<br>
          The link expires in <strong>24 hours</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">Create Account</h2>
        <p class="auth-sub">Join the battle — no subscription required</p>

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

        <div class="auth-field">
          <label for="{{ form.username.vars.id }}" class="auth-label">Username</label>
          <div class="auth-input-wrap">
            <i class="fas fa-user auth-input-icon"></i>
            {{ form_widget(form.username, {
              attr: {
                class: 'auth-input' ~ (not form.username.vars.valid ? ' auth-input--error' : ''),
                autocomplete: 'username',
                autofocus: true,
                minlength: '3',
              }
            }) }}
          </div>
          {% if not form.username.vars.valid %}
            {% for error in form.username.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.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',
              }
            }) }}
          </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>

        <div class="auth-field">
          <label for="{{ form.plainPassword.first.vars.id }}" class="auth-label">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',
                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 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>

        <div class="auth-field">
          <label class="auth-checkbox-label" style="display: flex; align-items: flex-start; cursor: pointer; user-select: none;">
            {{ form_widget(form.consentGiven, {
              attr: {
                class: 'auth-checkbox',
                style: 'margin-right: 10px; margin-top: 3px;'
              }
            }) }}
            <span style="flex: 1; font-size: 14px; line-height: 1.5; color: #666;">
              I have read the <a href="{{ path('MineSeekerBundle_privacy') }}" target="_blank" style="color: #667eea; text-decoration: none;">Privacy and Data Processing Policy</a> and I consent to the processing of my data. *
            </span>
          </label>
          {% if not form.consentGiven.vars.valid %}
            {% for error in form.consentGiven.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-user-plus"></i> Create Account
        </button>

        {{ form_end(form) }}

        <p class="auth-switch">
          Already have an account?
          <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: 'register'}).then(function (token) {
            document.getElementById('{{ form.recaptcha.vars.id }}').value = token;
            form.submit();
          });
        });
      });
    }());
  </script>
{% endblock %}