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

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

{% block body %}
    <div class="flex flex-col bg-orange-500 p-4 rounded-lg gap-2 min-w-96">
        <h2 class="text-xl text-gray-50">Register</h2>

        {{ form_errors(registrationForm) }}

        {{ form_start(registrationForm) }}

        <label for="name" class="flex flex-col mb-2">
            {{ field_label(registrationForm.name) }}
            <input type="text"
                   name="{{ field_name(registrationForm.name) }}"
                   id="{{ field_name(registrationForm.name) }}"
                   value="{{ field_value(registrationForm.name) }}"
                   class="bg-gray-50 text-gray-950 p-1 rounded-md" />
        </label>

        <label for="email" class="flex flex-col mb-2">
            {{ field_label(registrationForm.email) }}
            <input type="email"
                   name="{{ field_name(registrationForm.email) }}"
                   id="{{ field_name(registrationForm.email) }}"
                   value="{{ field_value(registrationForm.email) }}"
                   class="bg-gray-50 text-gray-950 p-1 rounded-md" />
        </label>

        <label for="password" class="flex flex-col mb-2">
            {{ field_label(registrationForm.plainPassword) }}
            <input type="password"
                   name="{{ field_name(registrationForm.plainPassword) }}"
                   id="{{ field_name(registrationForm.plainPassword) }}"
                   value="{{ field_value(registrationForm.plainPassword) }}"
                   class="bg-gray-50 text-gray-950 p-1 rounded-md" />
        </label>

        <button type="submit" class="bg-green-600 px-1.5 py-1 rounded-md text-gray-50">Register</button>
        {{ form_end(registrationForm) }}
    </div>
{% endblock %}