{% extends 'core/card/title_card.html' %}

{% block card_title %}
    Register New User
{% endblock %}

{% block card_title_content %}
    <div
        x-data="{
        async init() {
            this.setup_fields()
            await this.get_glue()
        },
        user: new GlueModelObject('portal_user'),
        repeat_password: new GlueCharField( 'repeat_password'),
        setup_fields() {
            this.user.glue_fields.first_name.required = true
            this.user.glue_fields.last_name.required = true
            this.user.glue_fields.email.choices = true
            this.repeat_password.required = true
        },
        async get_glue(){
            await this.user.get()  // Better if this is a function and uses map?
            this.user.set_properties(JSON.parse('{{ user_form_data }}'))
        },
        validate_form() {
            if (this.user.password !== this.repeat_password.value){
                dispatchErrorNotification('Passwords do not match.')
                return false
            }
            return true
        }
    }"
    class="row g-3"
>
        <div class="col-md-6 col-12">
            {% include 'django_glue/form/glue_field/char_field.html' with glue_model_field='user.first_name' %}
        </div>
        <div class="col-md-6 col-12">
            {% include 'django_glue/form/glue_field/char_field.html' with glue_model_field='user.last_name' %}
        </div>
        <div class="col-12">
            {% include 'django_glue/form/glue_field/email_field.html' with glue_model_field='user.email' %}
        </div>
        <div class="col-md-6 col-12">
            {% include 'django_glue/form/glue_field/password_field.html' with glue_model_field='user.password' %}
        </div>
        <div class="col-md-6 col-12">
            {% include 'django_glue/form/glue_field/password_field.html' with glue_field='repeat_password' x_model_value='repeat_password.value' %}
        </div>
        <div class="col-12">
            {% include 'core/form/button/form_submit_button.html' %}
        </div>
    </div>
{% endblock %}
