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

{% block title %} - Register{% 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="fa fa-envelope-o"></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 class="auth-form" method="post" action="{{ path('MineSeekerBundle_register') }}">

                    <div class="auth-field">
                        <label for="username" class="auth-label">Username</label>
                        <div class="auth-input-wrap">
                            <i class="fa fa-user auth-input-icon"></i>
                            <input
                                type="text"
                                id="username"
                                name="_username"
                                class="auth-input{% if errors.username is defined %} auth-input--error{% endif %}"
                                value="{{ last_username }}"
                                autocomplete="username"
                                autofocus
                                required
                                minlength="3"
                            />
                        </div>
                        {% if errors.username is defined %}
                            <p class="auth-field-error"><i class="fa fa-exclamation-circle"></i> {{ errors.username }}</p>
                        {% endif %}
                    </div>

                    <div class="auth-field">
                        <label for="email" class="auth-label">Email</label>
                        <div class="auth-input-wrap">
                            <i class="fa fa-envelope auth-input-icon"></i>
                            <input
                                type="email"
                                id="email"
                                name="_email"
                                class="auth-input{% if errors.email is defined %} auth-input--error{% endif %}"
                                value="{{ last_email }}"
                                autocomplete="email"
                                required
                            />
                        </div>
                        {% if errors.email is defined %}
                            <p class="auth-field-error"><i class="fa fa-exclamation-circle"></i> {{ errors.email }}</p>
                        {% endif %}
                    </div>

                    <div class="auth-field">
                        <label for="password" class="auth-label">Password</label>
                        <div class="auth-input-wrap">
                            <i class="fa fa-lock auth-input-icon"></i>
                            <input
                                type="password"
                                id="password"
                                name="_password"
                                class="auth-input{% if errors.password is defined %} auth-input--error{% endif %}"
                                autocomplete="new-password"
                                required
                                minlength="6"
                            />
                        </div>
                        {% if errors.password is defined %}
                            <p class="auth-field-error"><i class="fa fa-exclamation-circle"></i> {{ errors.password }}</p>
                        {% endif %}
                    </div>

                    <div class="auth-field">
                        <label for="password_confirm" class="auth-label">Confirm Password</label>
                        <div class="auth-input-wrap">
                            <i class="fa fa-lock auth-input-icon"></i>
                            <input
                                type="password"
                                id="password_confirm"
                                name="_password_confirm"
                                class="auth-input{% if errors.password_confirm is defined %} auth-input--error{% endif %}"
                                autocomplete="new-password"
                                required
                            />
                        </div>
                        {% if errors.password_confirm is defined %}
                            <p class="auth-field-error"><i class="fa fa-exclamation-circle"></i> {{ errors.password_confirm }}</p>
                        {% endif %}
                    </div>

                    <button type="submit" class="auth-submit">
                        <i class="fa fa-user-plus"></i> Create Account
                    </button>
                </form>

                <p class="auth-switch">
                    Already have an account?
                    <a href="{{ path('MineSeekerBundle_login') }}">Sign in</a>
                </p>
            </div>

        {% endfor %}
    </div>
{% endblock %}