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

{% block title %}Create Account{% endblock %}

{% block opengraph %}
<meta property="og:title" content="Create Account — {{ site_name }}">
<meta property="og:description" content="Create your {{ site_name }} account">
<meta property="og:image" content="{{ absolute_url(asset('images/web-banner.png')) }}">
<meta property="og:url" content="{{ app.request.uri }}">
<meta property="og:type" content="website">
<meta property="og:site_name" content="{{ site_name }}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Create Account — {{ site_name }}">
<meta name="twitter:image" content="{{ absolute_url(asset('images/web-banner.png')) }}">
{% endblock %}

{% block body %}
<div class="auth-split">

    {# Left — Branded panel #}
    <div class="auth-split__brand d-none d-md-flex">
        <img src="{{ asset('images/logo.png') }}" alt="{{ site_name }}" class="auth-split__logo">
    </div>

    {# Right — Form panel #}
    <div class="auth-split__form">
        <div class="auth-split__inner">

            {# Mobile logo #}
            <div class="text-center mb-4 d-md-none">
                <img src="{{ asset('images/logo.png') }}" alt="{{ site_name }}" style="height: 149px; width: auto;">
            </div>

            <h1 class="auth-title">Create your account</h1>
            <p class="auth-subtitle">Sign up to get started</p>

            {% for flash in app.flashes('success') %}
                <div class="alert alert-success mb-4" role="alert">{{ flash }}</div>
            {% endfor %}
            {% for flash in app.flashes('error') %}
                <div class="alert alert-danger mb-4" role="alert">{{ flash }}</div>
            {% endfor %}

            {{ form_start(registrationForm, {
                attr: { 'data-testid': 'registration-form', 'novalidate': 'novalidate', 'data-turbo': 'false' }
            }) }}

            <div class="row g-3 mb-3">
                <div class="col-12 col-sm-6">
                    {{ form_label(registrationForm.firstName, null, { label_attr: { class: 'form-label' } }) }}
                    {{ form_widget(registrationForm.firstName, { attr: { class: 'form-control form-control-lg' } }) }}
                    {{ form_errors(registrationForm.firstName) }}
                </div>
                <div class="col-12 col-sm-6">
                    {{ form_label(registrationForm.lastName, null, { label_attr: { class: 'form-label' } }) }}
                    {{ form_widget(registrationForm.lastName, { attr: { class: 'form-control form-control-lg' } }) }}
                    {{ form_errors(registrationForm.lastName) }}
                </div>
            </div>

            <div class="mb-3">
                {{ form_label(registrationForm.mobileNumber, null, { label_attr: { class: 'form-label' } }) }}
                {{ form_widget(registrationForm.mobileNumber, { attr: { class: 'form-control form-control-lg' } }) }}
                {{ form_errors(registrationForm.mobileNumber) }}
            </div>

            <div class="mb-3">
                {{ form_label(registrationForm.plainPassword.first, null, { label_attr: { class: 'form-label' } }) }}
                {{ form_widget(registrationForm.plainPassword.first, { attr: { class: 'form-control form-control-lg' } }) }}
                {{ form_errors(registrationForm.plainPassword.first) }}
            </div>

            <div class="mb-3">
                {{ form_label(registrationForm.plainPassword.second, null, { label_attr: { class: 'form-label' } }) }}
                {{ form_widget(registrationForm.plainPassword.second, { attr: { class: 'form-control form-control-lg' } }) }}
                {{ form_errors(registrationForm.plainPassword.second) }}
                {{ form_errors(registrationForm.plainPassword) }}
            </div>

            <div class="mb-4">
                {{ form_label(registrationForm.referralCode, null, { label_attr: { class: 'form-label' } }) }}
                {{ form_widget(registrationForm.referralCode, { attr: { class: 'form-control form-control-lg' } }) }}
                {{ form_errors(registrationForm.referralCode) }}
            </div>

            <div class="d-grid mb-3">
                <button type="submit" class="btn btn-primary btn-lg" data-testid="btn-register">
                    Create account
                </button>
            </div>

            {{ form_end(registrationForm) }}

            <p class="text-center mb-0 form-hint">
                Already have an account?
                <a href="{{ path('app_login') }}" data-testid="link-login" class="fw-medium">Sign in</a>
            </p>

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