{% macro errorList(errors) %}
    {% if errors %}
        {{ ul(errors, {class: 'login__error'}) }}
    {% endif %}
{% endmacro %}

<section class="membership-form membership-form-{{ mode }}">
    <div class="container">
        <div class="membership-form__content">
            {% if mode == 'create' %}
                <div class="membership-form__tag">{{ entry.tag }}</div>
            {% endif %}
            <h1 class="membership-form__title">{{ entry.title }}</h1>
            <div class="membership-form__subtitle">
                {{ entry.intro }}
            </div>

            {% if craft.app.session.hasFlash('error') %}
                <div class="login__general-error">
                    {{ craft.app.session.getFlash('error') }}
                </div>
            {% endif %}

            {% if mode == 'update' %}
                {% set message = craft.app.session.getFlash('success') %}
                {% if message %}
                    <div class="flash-message general-success">
                        {{ message }}
                    </div>
                {% endif %}
            {% endif %}

            <form method="post" class="membership-form__form" id="membershipForm">
                {{ csrfInput() }}
                {{ actionInput('users/save-user') }}
                {% if mode == 'create' %}
                    {{ redirectInput('registration-confirmation') }}
                {% endif %}
                {% if mode == 'update' %}
                    {{ redirectInput(parentEntry.url) }}
                    {{ hiddenInput('userId', user.id) }}
                    {{ successMessageInput('form.user.update.success'|t) }}
                {% endif %}
                <div class="membership-form__row">
                    <div class="membership-form__field">
                        <label for="firstName" class="membership-form__label">{{ 'form.user.firstName'|t }} <span class="membership-form__required">*</span></label>
                        <input type="text" id="firstName" name="firstName" class="membership-form__input" required="required" value="{{ user.firstName ?? '' }}">
                        {{ user ? _self.errorList(user.getErrors('fullName')) }}
                    </div>
                    <div class="membership-form__field">
                        <label for="lastName" class="membership-form__label">{{ 'form.user.lastName'|t }} <span class="membership-form__required">*</span></label>
                        <input type="text" id="lastName" name="lastName" class="membership-form__input" required="required" value="{{ user.lastName ?? '' }}">
                        {{ user ? _self.errorList(user.getErrors('fullName')) }}
                    </div>
                </div>

                <div class="membership-form__row">
                    <div class="membership-form__field">
                        <label for="email" class="membership-form__label">{{ 'form.user.emailAddress'|t }} <span class="membership-form__required">*</span></label>
                        <input type="email" id="email" name="email" class="membership-form__input" required="required" value="{{ user.email ?? '' }}">
                        {{ user ? _self.errorList(user.getErrors('email')) }}
                    </div>
                    <div class="membership-form__field">
                        <label for="phoneNumber" class="membership-form__label">{{ 'form.user.phoneNumber'|t }} <span class="membership-form__required">*</span></label>
                        <input type="tel" id="phoneNumber" name="phoneNumberDisplay" class="membership-form__input phone-number-input" required="required" placeholder="" value="{{ user.phoneNumber.number ?? '' }}">
                        {{ user ? _self.errorList(user.getErrors('phoneNumber')) }}
                        {# Hidden fields for Craft plugin format #}
                        <input type="hidden" id="phoneRegion" name="fields[phoneNumber][region]" value="{{ user.phoneNumber.region ?? '' }}">
                        <input type="hidden" id="phoneNumberValue" name="fields[phoneNumber][number]" value="{{ user.phoneNumber.number ?? '' }}">
                    </div>
                </div>

                {% set userTypeOptions = craft.app.fields.getFieldByHandle('userType').options %}
                {% set currentValue = user is defined ? user.userType.value ?? '' : '' %}
                {% set cutoff = ((userTypeOptions | length) / 2) | round(0, 'ceil') %}

                {% if mode == 'create' or (currentUser and currentUser.isInGroup('members')) %}
                    <div class="membership-form__field">
                        <label class="membership-form__label">{{ 'User type'|t }} <span class="membership-form__required">*</span></label>
                        <div class="membership-form__radio-container">
                            <div class="membership-form__radio-group">
                                {% for key, option in userTypeOptions %}
                                {% if key == cutoff %}
                            </div><div class="membership-form__radio-group">
                                {% endif %}
                                <label class="membership-form__radio">
                                    <input type="radio" name="fields[userType]" id="userType" value="{{ option.value }}" class="membership-form__radio-input" {% if option.value == currentValue %}checked{% endif %}>
                                    <span class="membership-form__radio-label">{{ ('form.user.type.' ~ option.value)|t }}</span>
                                </label>
                                {% endfor %}
                            </div>
                        </div>
                        {{ user ? _self.errorList(user.getErrors('userType')) }}
                    </div>
                    <div class="membership-form__section" id="burnPatientFields" {{ currentValue != 'burnVictim' ? 'style="display: none;"' }}>
                        <div class="membership-form__field">
                            <label for="zipCode" class="membership-form__label">{{ 'form.user.zipCode'|t }} <span class="membership-form__required">*</span></label>
                            <input type="text" id="zipCode" name="fields[zipCode]" id="zipCode" class="membership-form__input membership-form__input-small" {{ currentValue == 'burnVictim' ? 'required="required"' }} value="{{ user.zipCode ?? '' }}">
                            {{ user ? _self.errorList(user.getErrors('zipCode')) }}
                        </div>
                        <div class="membership-form__field">
                            <label for="burnCenter" class="membership-form__label">{{ 'form.user.burnCenter'|t }}</label>
                            <input type="text" id="burnCenter" name="fields[burnCenter]" class="membership-form__input" value="{{ user.burnCenter ?? '' }}">
                            {{ user ? _self.errorList(user.getErrors('burnCenter')) }}
                        </div>
                    </div>
                {% endif %}

                {% if mode == 'create' %}
                    <div class="membership-form__field">
                        <label for="motivation" class="membership-form__label">{{ 'Motivation'|t }} <span class="membership-form__required">*</span></label>
                        <textarea id="motivation" name="fields[motivation]" class="membership-form__textarea" rows="5" required="required">{{ user.motivation ?? '' }}</textarea>
                        {{ user ? _self.errorList(user.getErrors('motivation')) }}
                    </div>

                    <div class="membership-form__checkbox">
                        <label class="checkbox__label">
                            <input type="checkbox" name="privacy" id="privacy" class="checkbox__input" required="required">
                            <input type="hidden" id="conditionsApproved" name="fields[conditionsApprovedOn]" value="">
                            <span class="checkbox__text">{{ 'form.user.agreePrivacy'|t({'url': footer.privacyPolicy.url})|raw }}</span>
                        </label>
                        {% if user and user.hasErrors('conditionsApprovedOn') %}
                            <ul class="login__error">
                                <li>{{ 'form.user.agreePolicyError'|t }}</li>
                            </ul>
                        {% endif %}
                    </div>
                {% endif %}

                {% if mode == 'update' %}
                    {% set languageOptions = {'nl': 'Nederlands', 'fr': 'français'} %}
                    <div class="membership-form__field">
                        <label class="membership-form__label">{{ 'Communication language'|t }}</label>
                        <div class="membership-form__radio-container">
                            <div class="membership-form__radio-group">
                                {% for key, val in languageOptions %}
                                    <label class="membership-form__radio">
                                        <input type="radio" name="fields[communicationLanguage]" value="{{ key }}" class="membership-form__radio-input" {% if key == user.communicationLanguage %}checked{% endif %}>
                                        <span class="membership-form__radio-label">{{ val }}</span>
                                    </label>
                                {% endfor %}
                            </div>
                        </div>
                        {{ user ? _self.errorList(user.getErrors('communicationLanguage')) }}
                    </div>

                    {% if not user.motivation %}
                        <input type="hidden" name="fields[motivation]" value="/">
                    {% endif %}

                    {% if not user.conditionsApprovedOn %}
                        <input type="hidden" id="conditionsApproved" name="fields[conditionsApprovedOn]" value="2026-01-01 00:00:00">
                    {% endif %}
                {% endif %}

                {{ craft.recaptcha.renderBindButton('membership-submit') }}
                <button type="submit" id="membership-submit" class="btn btn--primary membership-form__submit">
                    {{ ('form.user.submit.' ~ mode)|t }}
                </button>
            </form>
        </div>
    </div>
</section>

{% css "https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.4/build/css/intlTelInput.css" %}
{% js "https://cdn.jsdelivr.net/npm/intl-tel-input@25.12.4/build/js/intlTelInputWithUtils.min.js" %}
{% js "/assets/js/userdata.js" %}