<form
    method="post"
    action="{% url 'django_spire:auth:user:form:register' %}"
    class="row g-3"
    x-data="{
        user: new ModelObjectGlue('portal_user'),
        repeat_password: new GlueCharField( 'repeat_password'),
        async init() {
            this.setup_fields()
            await this.get_glue()
        },
        async get_glue() {
            // Better if this is a function and uses map?
            await this.user.get()
            this.user.set_properties(JSON.parse('{{ user_form_data }}'))
        },
        setup_fields() {
            this.user.glue_fields.first_name.required = true
            this.user.glue_fields.last_name.required = true
            this.user.glue_fields.email.required = true
            this.repeat_password.required = true
        },
        validate_form() {
            if (this.user.password !== this.repeat_password.value){
                $dispatch('notify', {type: 'error', message: 'Passwords do not match.'})
                return false
            }

            return true
        }
    }"
>
    {% csrf_token %}
    <div class="col-md-6 col-12">
        {% include 'django_glue/form/field/char_field.html' with glue_model_field='user.first_name' %}
    </div>
    <div class="col-md-6 col-12">
        {% include 'django_glue/form/field/char_field.html' with glue_model_field='user.last_name' %}
    </div>
    <div class="col-12">
        {% include 'django_glue/form/field/email_field.html' with glue_model_field='user.email' %}
    </div>
    <div class="col-md-6 col-12">
        {% include 'django_glue/form/field/password_field.html' with glue_model_field='user.password' %}
    </div>
    <div class="col-md-6 col-12">
        {% include 'django_glue/form/field/password_field.html' with glue_field='repeat_password' x_model_value='repeat_password.value' %}
    </div>
    <div class="col-12">
        {% include 'django_spire/contrib/form/button/form_submit_button.html' %}
    </div>
</form>
