{% extends 'base.html.twig' %}

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

{% block head %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
{% endblock %}

{% block body %}
    <main>
        <div class="container">
            <a class="button mt-24" href="{{ path('app_index') }}">Go back</a>
            <h3>Enter Information</h3>
            <div class="bg-card-secondary" style="padding: 1rem; border-radius: 10px">
                {{ form_start(registrationForm) }}

                {% if form_errors(registrationForm.username) or form_errors(registrationForm.plainPassword) or form_errors(registrationForm) %}
                    <div class="error">
                        {{ form_errors(registrationForm) }}
                        {{ form_errors(registrationForm.username) }}
                        {{ form_errors(registrationForm.plainPassword) }}
                    </div>
                {% endif %}

                <label for="username"><i class="fa-solid fa-user"></i> Username</label>
                {{ form_widget(registrationForm.username) }}

                <label for="password"><i class="fa-solid fa-lock"></i> Password</label>
                {{ form_widget(registrationForm.plainPassword) }}

                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                <button type="submit" class="button">Register</button>
                {{ form_end(registrationForm) }}
            </div>
        </div>
    </main>
{% endblock %}
