<!-- $Id: rgaa_profil.tpl.html,v 1.2.2.2.2.1.4.4 2026/03/16 13:14:16 rtigero Exp $ -->

{% block intro %}
    {% if empr.id_empr %}
    {% else %}
        {{ msg.rgaa_subs_intro_services }}
        {{ msg.subs_intro_explication | replace '!!nb_h_valid!!' empr.opac_websubscribe_valid_limit }}
    {% endif %}
{% endblock %}

<div id='change-profil'>
    <div id="change-profil-container" >
        {% block profil_form %}
            <form name="empr_form" id="empr_form" method="POST" action="./empr.php?lvl=change_profil&action=save" >
        {% endblock%}
        <div class="pmb-form">
            {% if empr.id_empr %}
                <h2 class="visually-hidden">{{ msg.empr_change_profil }}</h2>
            {% else %}
                <h2 class="visually-hidden">{{ msg.empr_add_account }}</h2>
            {% endif %}
            {% block empr_nom %}
                {% if empr.renewal_form_fields.empr_nom.display %}
                    <div id="pmb-input-group-nom" class="pmb-input-group pmb-empr-nom {% if !empr.renewal_form_fields.empr_nom.alterable %}pmb-input-disabled{% endif %}">
                        <label for="empr_nom" class="pmb-label {% if empr.renewal_form_fields.empr_nom.mandatory %}pmb-input-mandatory{% endif %}">
                            {{ msg.profil_empr_nom }}
                            {% if empr.renewal_form_fields.empr_nom.mandatory %} *{% endif %}
                            {% if empr.renewal_form_fields.empr_nom.explanation %}
                                <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_nom.explanation }}</span>
                            {% endif %}
                        </label>
                        <input autocomplete="family-name" class="pmb-input" id="empr_nom" name="{{ prefix_name }}nom{{ suffix_name }}" type="text" value="{{ empr.empr_nom }}" {% if empr.renewal_form_fields.empr_nom.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_nom.alterable %}readonly {% endif %} aria-describedby="pmb-input-nom-desc-error" />
                        <p id="pmb-input-nom-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                    </div>
                {% endif %}
            {% endblock %}
            {% block empr_prenom %}
                {% if empr.renewal_form_fields.empr_prenom.display %}
                    <div id="pmb-input-group-prenom" class="pmb-input-group pmb-empr-prenom {% if !empr.renewal_form_fields.empr_prenom.alterable %}pmb-input-disabled{% endif %}">
                        <label for="empr_prenom" class="pmb-label {% if empr.renewal_form_fields.empr_prenom.mandatory %}pmb-input-mandatory{% endif %}">
                            {{ msg.profil_empr_prenom }}
                            {% if empr.renewal_form_fields.empr_prenom.mandatory %} *{% endif %}
                            {% if empr.renewal_form_fields.empr_prenom.explanation %}
                                <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_prenom.explanation }}</span>
                            {% endif %}
                        </label>
                        <input autocomplete="given-name" class="pmb-input" id="empr_prenom" name="{{ prefix_name }}prenom{{ suffix_name }}" type="text" value="{{ empr.empr_prenom }}" {% if empr.renewal_form_fields.empr_prenom.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_prenom.alterable %}readonly {% endif %} aria-describedby="pmb-input-prenom-desc-error" />
                        <p id="pmb-input-prenom-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                    </div>
                {% endif %}
            {% endblock %}
            {% if empr.renewal_form_fields.empr_adr1.display %}
                <div id="pmb-input-group-adr1" class="pmb-input-group pmb-empr-adr1 {% if !empr.renewal_form_fields.empr_adr1.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_adr1" class="pmb-label {% if empr.renewal_form_fields.empr_adr1.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.profil_empr_adr1 }}
                        {% if empr.renewal_form_fields.empr_adr1.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_adr1.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_adr1.explanation }}</span>
                        {% endif %}
                    </label>
                    <input autocomplete="address-line1" class="pmb-input" id="empr_adr1" name="{{ prefix_name }}adr1{{ suffix_name }}" type="text" value="{{ empr.empr_adr1 }}" {% if empr.renewal_form_fields.empr_adr1.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_adr1.alterable %}readonly {% endif %} aria-describedby="pmb-input-adr1-desc-error" />
                    <p id="pmb-input-adr1-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                </div>
            {% endif %}
            {% if empr.renewal_form_fields.empr_adr2.display %}
                <div id="pmb-input-group-adr2" class="pmb-input-group pmb-empr-adr2 {% if !empr.renewal_form_fields.empr_adr2.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_adr2" class="pmb-label {% if empr.renewal_form_fields.empr_adr2.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.profil_empr_adr2 }}
                        {% if empr.renewal_form_fields.empr_adr2.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_adr2.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_adr2.explanation }}</span>
                        {% endif %}
                    </label>
                    <input autocomplete="address-line2" class="pmb-input" id="empr_adr2" name="{{ prefix_name }}adr2{{ suffix_name }}" type="text" value="{{ empr.empr_adr2 }}" {% if empr.renewal_form_fields.empr_adr2.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_adr2.alterable %}readonly {% endif %} aria-describedby="pmb-input-adr2-desc-error" />
                    <p id="pmb-input-adr2-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                </div>
            {% endif %}
            {% if empr.renewal_form_fields.empr_cp.display %}
                <div id="pmb-input-group-cp" class="pmb-input-group pmb-empr-cp {% if !empr.renewal_form_fields.empr_cp.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_cp" class="pmb-label {% if empr.renewal_form_fields.empr_cp.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.profil_empr_cp }}
                        {% if empr.renewal_form_fields.empr_cp.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_cp.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_cp.explanation }}</span>
                        {% endif %}
                    </label>
                    <input autocomplete="postal-code" class="pmb-input" id="empr_cp" name="{{ prefix_name }}cp{{ suffix_name }}" type="text" value="{{ empr.empr_cp }}" {% if empr.renewal_form_fields.empr_cp.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_cp.alterable %}readonly {% endif %} aria-describedby="pmb-input-cp-desc-error" />
                    <p id="pmb-input-cp-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite" ></p>
                </div>
            {% endif %}
            {% if empr.renewal_form_fields.empr_ville.display %}
                <div id="pmb-input-group-ville" class="pmb-input-group pmb-empr-ville {% if !empr.renewal_form_fields.empr_ville.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_ville" class="pmb-label {% if empr.renewal_form_fields.empr_ville.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.profil_empr_ville }}
                        {% if empr.renewal_form_fields.empr_ville.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_ville.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_ville.explanation }}</span>
                        {% endif %}
                    </label>
                    <input autocomplete="address-level2" class="pmb-input" id="empr_ville" name="{{ prefix_name }}ville{{ suffix_name }}" type="text" value="{{ empr.empr_ville }}" {% if empr.renewal_form_fields.empr_ville.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_ville.alterable %}readonly {% endif %} aria-describedby="pmb-input-ville-desc-error" />
                    <p id="pmb-input-ville-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                </div>
            {% endif %}
            {% if empr.renewal_form_fields.empr_pays.display %}
                <div id="pmb-input-group-pays" class="pmb-input-group pmb-empr-pays {% if !empr.renewal_form_fields.empr_pays.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_pays" class="pmb-label {% if empr.renewal_form_fields.empr_pays.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.profil_empr_pays }}
                        {% if empr.renewal_form_fields.empr_pays.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_pays.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_pays.explanation }}</span>
                        {% endif %}
                    </label>
                    <input autocomplete="country-name" class="pmb-input" id="empr_pays" name="{{ prefix_name }}pays{{ suffix_name }}" type="text" value="{{ empr.empr_pays }}" {% if empr.renewal_form_fields.empr_pays.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_pays.alterable %}readonly {% endif %} aria-describedby="pmb-input-pays-desc-error" />
                    <p id="pmb-input-pays-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                </div>
            {% endif %}
            {% block empr_mail %}
                {% if empr.renewal_form_fields.empr_mail.display %}
                    <div id="pmb-input-group-mail" class="pmb-input-group pmb-empr-mail {% if !empr.renewal_form_fields.empr_mail.alterable %}pmb-input-disabled{% endif %}">
                        <label id="empr_mail_label" class="pmb-label {% if empr.renewal_form_fields.empr_mail.mandatory %}pmb-input-mandatory{% endif %}">
                            {{ msg.profil_empr_mail }}
                            {% if empr.renewal_form_fields.empr_mail.mandatory %} *{% endif %}
                            {% if empr.renewal_form_fields.empr_mail.explanation %}
                                <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_mail.explanation }}</span>
                            {% endif %}
                        </label>
                        <div id="empr_mail" class="pmb-input-container">
                            {% for index, mail in empr.empr_mail %}
                                <div class="pmb-email-input-group">
                                    <input autocomplete="email" class="pmb-input" aria-labelledby="empr_mail_label" id="empr_mail_{{ index }}" name="{{ prefix_name }}mail{{ suffix_name }}[]" type="email" value="{{ mail }}" {% if empr.renewal_form_fields.empr_mail.mandatory %}{% if index == 0 %}required {% endif %}{% endif %} {% if !empr.renewal_form_fields.empr_mail.alterable %}readonly {% endif %} aria-describedby="pmb-input-mail-desc-error" />
                                    {% if empr.renewal_form_fields.empr_mail.alterable %}
                                        {% if index == 0 %}
                                            <button type="button" id="empr_mail_add_{{ index }}" class="bouton" onclick="empr_mail_add('{{ prefix_name }}mail{{ suffix_name }}')">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        {% endif %}
                                        {% if index > 0 %}
                                            <button type="button" id="empr_mail_remove_{{ index }}" class="bouton" onclick="empr_mail_remove(this)" aria-label="{{ msg.profil_delete_mail }} {{ index }}">
                                                <i class="fa fa-trash"></i> {{ msg.profil_delete_mail }}
                                            </button>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                        <p id="pmb-input-mail-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                    </div>
                {% endif %}
            {% endblock %}
            {% if empr.renewal_form_fields.empr_tel1.display %}
                <div id="pmb-input-group-tel1" class="pmb-input-group pmb-empr-tel1 {% if !empr.renewal_form_fields.empr_tel1.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_tel1" class="pmb-label {% if empr.renewal_form_fields.empr_tel1.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.profil_empr_tel1 }}
                        {% if empr.renewal_form_fields.empr_tel1.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_tel1.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_tel1.explanation }}</span>
                        {% endif %}
                    </label>
                    <input autocomplete="tel" class="pmb-input" id="empr_tel1" name="{{ prefix_name }}tel1{{ suffix_name }}" type="text" value="{{ empr.empr_tel1 }}" {% if empr.renewal_form_fields.empr_tel1.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_tel1.alterable %}readonly {% endif %} aria-describedby="pmb-input-tel1-desc-error" />
                    <p id="pmb-input-tel1-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                </div>
            {% endif %}
            {% if empr.renewal_form_fields.empr_tel2.display %}
                <div id="pmb-input-group-tel2" class="pmb-input-group pmb-empr-tel2 {% if !empr.renewal_form_fields.empr_tel2.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_tel2" class="pmb-label {% if empr.renewal_form_fields.empr_tel2.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.profil_empr_tel2 }}
                        {% if empr.renewal_form_fields.empr_tel2.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_tel2.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_tel2.explanation }}</span>
                        {% endif %}
                    </label>
                    <input autocomplete="tel-country-code" class="pmb-input" id="empr_tel2" name="{{ prefix_name }}tel2{{ suffix_name }}" type="text" value="{{ empr.empr_tel2 }}" {% if empr.renewal_form_fields.empr_tel2.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_tel2.alterable %}readonly {% endif %} aria-describedby="pmb-input-tel2-desc-error" />
                    <p id="pmb-input-tel2-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                </div>
            {% endif %}
            {% if empr.renewal_form_fields.empr_prof.display %}
                <div id="pmb-input-group-prof" class="pmb-input-group pmb-empr-prof {% if !empr.renewal_form_fields.empr_prof.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_prof" class="pmb-label {% if empr.renewal_form_fields.empr_prof.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.profil_empr_prof }}
                        {% if empr.renewal_form_fields.empr_prof.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_prof.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_prof.explanation }}</span>
                        {% endif %}
                    </label>
                    <input class="pmb-input" id="empr_prof" name="{{ prefix_name }}prof{{ suffix_name }}" type="text" value="{{ empr.empr_prof }}" {% if empr.renewal_form_fields.empr_prof.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_prof.alterable %}disabled {% endif %} aria-describedby="pmb-input-prof-desc-error" />
                    <p id="pmb-input-prof-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                </div>
            {% endif %}
            {% if empr.renewal_form_fields.empr_year.display %}
                <div id="pmb-input-group-year" class="pmb-input-group pmb-empr-year {% if !empr.renewal_form_fields.empr_year.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_year" class="pmb-label {% if empr.renewal_form_fields.empr_year.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.profil_empr_year }}
                        {% if empr.renewal_form_fields.empr_year.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_year.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_year.explanation }}</span>
                        {% endif %}
                    </label>
                    <input autocomplete="bday-year" class="pmb-input" id="empr_year" name="{{ prefix_name }}year{{ suffix_name }}" type="number" min="1900" max="2100" value="{{ empr.empr_year }}" {% if empr.renewal_form_fields.empr_year.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_year.alterable %}readonly {% endif %} aria-describedby="pmb-input-year-desc-error" />
                    <p id="pmb-input-year-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                </div>
            {% endif %}
            {% if empr.renewal_form_fields.empr_categ.display %}
                <div id="pmb-input-group-categ" class="pmb-input-group pmb-empr-categ {% if !empr.renewal_form_fields.empr_categ.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_categ" class="pmb-label {% if empr.renewal_form_fields.empr_categ.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.profil_empr_categ }}
                        {% if empr.renewal_form_fields.empr_categ.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_categ.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_categ.explanation }}</span>
                        {% endif %}
                    </label>
                    {% sqlvalue categs %}
                        SELECT id_categ_empr AS id, libelle FROM empr_categ ORDER BY libelle
                    {% endsqlvalue %}
                    <select class="pmb-input" id="empr_categ" name="{{ prefix_name }}categ{{ suffix_name }}" {% if empr.renewal_form_fields.empr_categ.mandatory %}required{% endif %} {% if !empr.renewal_form_fields.empr_categ.alterable %}readonly onclick="return false;"{% endif %} aria-describedby="pmb-input-categ-desc-error">
                        {% for categ in categs %}
                            <option value="{{ categ.id }}" {% if categ.id == empr.empr_categ %}selected="selected"{% endif %} {% if !empr.renewal_form_fields.empr_categ.alterable %}disabled {% endif %}>{{ categ.libelle }}</option>
                        {% endfor %}
                    </select>
                    <p id="pmb-input-categ-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                </div>
            {% endif %}
            {% if empr.renewal_form_fields.empr_codestat.display %}
                <div id="pmb-input-group-codestat" class="pmb-input-group pmb-empr-codestat {% if !empr.renewal_form_fields.empr_codestat.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_codestat" class="pmb-label {% if empr.renewal_form_fields.empr_codestat.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.profil_empr_codestat }}
                        {% if empr.renewal_form_fields.empr_codestat.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_codestat.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_codestat.explanation }}</span>
                        {% endif %}
                    </label>
                    {% sqlvalue codestats %}
                        SELECT idcode AS id, libelle FROM empr_codestat ORDER BY libelle
                    {% endsqlvalue %}
                    <select class="pmb-input" id="empr_codestat" name="{{ prefix_name }}codestat{{ suffix_name }}" {% if empr.renewal_form_fields.empr_codestat.mandatory %}required{% endif %} {% if !empr.renewal_form_fields.empr_codestat.alterable %}readonly onclick="return false;"{% endif %} aria-describedby="pmb-input-codestat-desc-error">
                        {% for codestat in codestats %}
                            <option value="{{ codestat.id }}" {% if codestat.id == empr.empr_codestat %}selected="selected"{% endif %}>{{codestat.libelle}}</option>
                        {% endfor %}
                    </select>
                    <p id="pmb-input-codestat-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                </div>
            {% endif %}
            {% if empr.renewal_form_fields.empr_sexe.display %}
                <div id="pmb-input-group-sexe" class="pmb-input-group pmb-empr-sexe {% if !empr.renewal_form_fields.empr_sexe.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_sexe" class="pmb-label {% if empr.renewal_form_fields.empr_sexe.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.profil_empr_sexe }}
                        {% if empr.renewal_form_fields.empr_sexe.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_sexe.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_sexe.explanation }}</span>
                        {% endif %}
                    </label>
                    <select class="pmb-input" id="empr_sexe" name="{{ prefix_name }}sexe{{ suffix_name }}" {% if empr.renewal_form_fields.empr_sexe.mandatory %}required{% endif %} {% if !empr.renewal_form_fields.empr_sexe.alterable %}disabled onclick="return false;"{% endif %} aria-describedby="pmb-input-sexe-desc-error">
                        <option value="1" {% if empr.empr_sexe == 1 %}selected="selected"{% endif %}>{{ msg.profil_empr_sexe_m }}</option>
                        <option value="2" {% if empr.empr_sexe == 2 %}selected="selected"{% endif %}>{{ msg.profil_empr_sexe_f }}</option>
                        <option value="0" {% if empr.empr_sexe == 0 %}selected="selected"{% endif %}>{{ msg.profil_empr_sexe_o }}</option>
                    </select>
                    <p id="pmb-input-sexe-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                </div>
            {% endif %}
            {% block empr_login %}
                {% if empr.renewal_form_fields.empr_login.display %}
                    <div id="pmb-input-group-login" class="pmb-input-group pmb-empr-login {% if !empr.renewal_form_fields.empr_login.alterable %}pmb-input-disabled{% endif %}">
                        <label for="empr_login" class="pmb-label {% if empr.renewal_form_fields.empr_login.mandatory %}pmb-input-mandatory{% endif %}">
                            {{ msg.profil_empr_login }}
                            {% if empr.renewal_form_fields.empr_login.mandatory %} *{% endif %}
                            {% if empr.renewal_form_fields.empr_login.explanation %}
                                <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_login.explanation }}</span>
                            {% endif %}
                        </label>
                        <input class="pmb-input" id="empr_login" name="{{ prefix_name }}login{{ suffix_name }}" type="text" value="{{ empr.empr_login }}" {% if empr.renewal_form_fields.empr_login.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_login.alterable %}readonly{% endif %} aria-describedby="pmb-input-login-desc-error" />
                        <div class='helper' id="empr_login_helper"></div>
                        <p id="pmb-input-login-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                    </div>
                {% endif %}
            {% endblock %}

            {% if empr.renewal_form_fields.empr_lang.display %}
                <div id="pmb-input-group-lang" class="pmb-input-group pmb-empr-lang {% if !empr.renewal_form_fields.empr_lang.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_lang" class="pmb-label {% if empr.renewal_form_fields.empr_lang.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.profil_empr_lang }}
                        {% if empr.renewal_form_fields.empr_lang.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_lang.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_lang.explanation }}</span>
                        {% endif %}
                    </label>
                    <select class='pmb-input' id='empr_lang' name='{{ prefix_name }}lang{{ suffix_name }}' {% if empr.renewal_form_fields.empr_lang.mandatory %} required {% endif %} {% if !empr.renewal_form_fields.empr_lang.alterable %} disabled onclick="return false;" {% endif %} aria-describedby="pmb-input-lang-desc-error">
                        {{ empr.languages_selector }}
                    </select>
                    <p id="pmb-input-lang-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                </div>
            {% endif %}

            {% block empr_location %}
                <!-- on ne permet pas la modification de la localisation en modification de profil -->
            {% endblock %}

            {% if empr.renewal_form_fields.empr_msg.display %}
                <div id="pmb-input-group-msg" class="pmb-input-group pmb-empr-msg {% if !empr.renewal_form_fields.empr_msg.alterable %}pmb-input-disabled{% endif %}">
                    <label for="empr_msg" class="pmb-label {% if empr.renewal_form_fields.empr_msg.mandatory %}pmb-input-mandatory{% endif %}">
                        {{ msg.empr_msg }}
                        {% if empr.renewal_form_fields.empr_msg.mandatory %} *{% endif %}
                        {% if empr.renewal_form_fields.empr_msg.explanation %}
                            <span class="pmb-input-explanation pmb-hint-text">{{ empr.renewal_form_fields.empr_msg.explanation }}</span>
                        {% endif %}
                    </label>
                    <textarea class="pmb-input" id="empr_msg" rows="5" cols="50" name="{{ prefix_name }}msg{{ suffix_name }}" {% if empr.renewal_form_fields.empr_msg.mandatory %}required {% endif %} {% if !empr.renewal_form_fields.empr_msg.alterable %}readonly {% endif %} aria-describedby="pmb-input-msg-desc-error">{{ empr.empr_msg }}</textarea>
                    <p id="pmb-input-msg-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                </div>
            {% endif %}

            {% block empr_p_perso %}
                <!-- On declare les variables avant le for pour ne pas rederclarer plusieurs fois avec let -->
                <script> let node = false; let i = 0; let inputs = [];</script>
                {% for cp in empr.p_perso %}
                    {% if cp.renewal_form_field.display %}
                        <div id="pmb-input-group-{{ cp.NAME }}" class="pmb-input-group pmb-empr-{{ cp.NAME }} {% if !cp.renewal_form_field.alterable %}pmb-input-disabled{% endif %}">
                            <label {% if cp.FOR %}for="{{ cp.FOR }}"{% endif %} class="pmb-label {% if cp.renewal_form_field.mandatory %}pmb-input-mandatory{% endif %}">
                                {{ cp.TITRE_CLEAN }}
                                {% if cp.renewal_form_field.mandatory %} *{% endif %}
                                {% if cp.renewal_form_field.explanation %}
                                    <span class="pmb-input-explanation pmb-hint-text">{{ cp.renewal_form_field.explanation }}</span>
                                {% endif %}
                            </label>
                            <div id="{{ cp.NAME }}_container" class="pmb-input-container">{{ cp.EDIT }}</div>
                            <p id="pmb-input-{{ cp.NAME }}-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                            <script>
                                //On recupere tout ce qui est contenu dans cp.EDIT et on ajoute les attributs a tous les inputs et selects
                                node = document.getElementById("{{ cp.NAME }}_container");
                                inputs = node.querySelectorAll("input,select,textarea");
                                if(inputs) {
                                    for(let element of inputs) {
                                        {% if cp.renewal_form_field.mandatory %}
                                            if(element.type != 'button') {
                                                element.setAttribute("required", "required");
                                            }
                                        {% endif %}
                                        {% if !cp.renewal_form_field.alterable %}
                                            element.setAttribute("disabled", "disabled");
                                        {% endif %}
                                        // Add pmb-input class and aria-describedby
                                        element.classList.add("pmb-input");
                                        element.setAttribute("aria-describedby", "pmb-input-" + "{{ cp.NAME }}" + "-desc-error");
                                    }
                                }
                            </script>
                        </div>
                    {% endif %}
                {% endfor %}
            {% endblock %}
            {% block captcha %}
                {% if empr.id_empr %}
                {% else %}
                    <div id="pmb-input-group-captcha" class="pmb-input-group pmb-captcha">
                        <label class="pmb-label pmb-input-mandatory">
                            {{ msg.subs_txt_codeverif}}
                        </label>
                        <div id='captcha_container' class="pmb-input-container">{{ empr.captcha }}</div>
                        <p id="pmb-input-captcha-desc-error" class="pmb-input-message visually-hidden" role="alert" aria-live="polite"></p>
                    </div>
                {% endif %}
            {% endblock %}
            {% block empr_other_properties %}
            {% endblock %}
        </div>
        {% block profil_buttons %}
            {{ empr.p_perso.CHECK_SCRIPTS }}
            <div class='clear'></div>
            <input type="submit" class="bouton" value="{{ msg.77 }}"/>
            {% if global.empr_opac_account_deleted_status %}
                <input type=button class='bouton' id='delete_account_button' value="{{ msg.empr_delete_account }}" onClick="delete_account();" />
            {% endif %}
        {% endblock %}
        </form>
    </div>
</div>

{% block profil_script %}
    {% if global.empr_opac_account_deleted_status %}
        <script>
            function delete_account() {
                var div = document.createElement('div');
                div.innerHTML = "{{ msg.empr_confirm_deleting_account }}";
                var confirm_message = div.firstChild.nodeValue;
                if (confirm(confirm_message)) {
                    window.location = './empr.php?lvl=delete_account';
                }
            }
        </script>
    {% endif %}
{% endblock %}

{% block mail_script %}
    {% if empr.renewal_form_fields.empr_mail.display %}
        {% if empr.renewal_form_fields.empr_mail.alterable %}
            <script>
                function empr_mail_add(name) {

                    // On recupere la liste des inputs empr_mail
                    var NodeList = document.querySelectorAll("input[name='"+name+"[]']");
                    if (NodeList) {

                        length_empr_mail = NodeList.length;
                        var last_id = "empr_mail_"+(length_empr_mail-1); // on recree le dernier id
                        var new_id = "empr_mail_"+length_empr_mail; // on recree un nouvel id

                        var add_button_id = "empr_mail_add_0"
                        var remove_last_id = "empr_mail_remove_"+(length_empr_mail-1);
                        var remove_new_id = "empr_mail_remove_"+length_empr_mail;

                        var add_button = document.getElementById(add_button_id);
                        // on recupere le node qui va contenir les inputs
                        var container_empr_mail = document.getElementById("empr_mail");
                        // on recupere le node que l'on va cloner
                        var last_empr_mail = document.getElementById(last_id);


                        // on recupere le button de suppression
                        var last_empr_mail_remove = document.getElementById(remove_last_id);


                        if (container_empr_mail && last_empr_mail) {

                            // Create wrapper div for input and button
                            var email_wrapper = document.createElement("div");
                            email_wrapper.className = "pmb-email-input-group";
                            email_wrapper.id = "pmb-input-group-email-" + new_id.replace("empr_mail_", "");

                            // On clone l'ancien input en modifiant les valeurs.
                            var new_empr_mail = last_empr_mail.cloneNode(true);
                            new_empr_mail.id = new_id;
                            new_empr_mail.value = "";
                            new_empr_mail.defaultValue = "";
                            new_empr_mail.required = false;
                            new_empr_mail.setAttribute("autocomplete", "email");
                            // Add pmb-input class and aria-describedby for accessibility
                            new_empr_mail.classList.add("pmb-input");
                            new_empr_mail.setAttribute("aria-describedby", "pmb-input-mail-desc-error");

                            // si on cree le button remove
                            var new_empr_mail_remove = document.createElement("button");
                            new_empr_mail_remove.type = "button";
                            new_empr_mail_remove.innerHTML = '<i class="fa fa-trash"></i> Supprimer l\'email';
                            new_empr_mail_remove.className = add_button.className;
                            new_empr_mail_remove.id = remove_new_id;
                            new_empr_mail_remove.setAttribute("aria-label", "Supprimer l'email " + new_id);
                            new_empr_mail_remove.onclick = function() { empr_mail_remove(new_empr_mail_remove); };

                            // Add input and button to wrapper
                            email_wrapper.append(new_empr_mail);
                            email_wrapper.append(new_empr_mail_remove);

                            // On ajoute le wrapper dans le container
                            container_empr_mail.append(email_wrapper);

                            // Set focus on new input
                            new_empr_mail.focus();
                        }

                    }
                }

                function empr_mail_remove(btn_remove){
                    var order = btn_remove.id.replace("empr_mail_remove_", "");

                    // on regarde si on a recupere le nombre
                    if (isNaN(parseInt(order)) == false && order != 0) {

                        // on recupere le node qui contient les inputs
                        var container_empr_mail = document.getElementById("empr_mail");

                        // on recupere le wrapper a supprimer (contient input et button)
                        var email_wrapper = btn_remove.parentElement;
                        var empr_mail_input = document.getElementById("empr_mail_"+order);

                        // si on a tout , on peut supprimer
                        if (container_empr_mail && email_wrapper && empr_mail_input && btn_remove) {
                            container_empr_mail.removeChild(email_wrapper);
                        }
                    }

                }
            </script>
        {% endif %}
    {% endif %}
{% endblock %}


{% block check_login_script %}
    <script>
        function check_empr_login() {

            let empr_id = '{{ empr.id_empr }}';
            let current_empr_login = '';
            if(empr_id) {
                current_empr_login = '{{ empr.empr_login }}';
            }
            let new_empr_login = document.getElementById('empr_login').value;
            let error = false;
            let helper = document.getElementById('empr_login_helper');
            let helper_msg = '';

            if(!error) {
                if( 2 > new_empr_login.length) {
                    helper_msg = '{{ msg.profil_login_too_short_error | escape }}';
                    error = true;
                }
            }
            if(!error) {
                let r = new RegExp("^[0-9|a-z|\\-|_|@|\.]{2,}$", 'g');
                if(false == r.test(new_empr_login)) {
                    helper_msg = '{{ msg.profil_login_pattern_error | escape }}';
                    error = true;
                }
            }
            if(!error) {
                let xhr = new http_request();
                let url = "./ajax.php?module=ajax&categ=empr&sub=check_login_uniqueness&query_id_empr={{ id_empr }}&query_empr_login="+new_empr_login;
                url = encodeURI(url);
                xhr.request(url, );

                if(1 != xhr.get_text()) {
                    helper_msg = '{{ msg.profil_login_allready_used_error | escape }}';
                    error = true;
                }
            }
            if(!error && ( '' != current_empr_login) && (new_empr_login != current_empr_login) ) {
                helper_msg = '{{ msg.profil_login_disconnect_after_change | escape }}';
            }

            helper.innerHTML = helper_msg;
            return !error;
        }

    </script>
{% endblock %}

{% block username_with_mail_script %}
{% endblock %}

{% block check_subscribe_script %}
{% endblock %}

{% block common_script %}
    <script src="./includes/javascript/ajax.js"></script>
    <script>ajax_parse_dom();</script>
{% endblock %}


{% block check_script %}
    <script>
        // Fonction universelle de gestion des etats de validation
        function setFieldState(fieldId, isValid, errorMessage = '') {
            let errorElementId;
            let inputGroupId;

            // Handle personal fields (those that don't start with empr_)
            if (fieldId.startsWith("pmb_")) {
                const fieldName = fieldId.replace("pmb_", "");
                errorElementId = "pmb-input-" + fieldName + "-desc-error";
                inputGroupId = "pmb-input-group-" + fieldName;
            } else {
                const fieldName = fieldId.replace("empr_", "");
                errorElementId = "pmb-input-" + fieldName + "-desc-error";
                inputGroupId = "pmb-input-group-" + fieldName;
            }

            const errorElement = document.getElementById(errorElementId);
            const inputGroup = document.getElementById(inputGroupId);

            if (!errorElement || !inputGroup) return;

            // Retirer les classes existantes
            inputGroup.classList.remove('pmb-input-error', 'pmb-input-success');

            if (isValid) {
                errorElement.textContent = "";
                inputGroup.classList.add('pmb-input-success');
                errorElement.classList.add('visually-hidden');
            } else {
                errorElement.textContent = getErrorMessage(fieldId);
                inputGroup.classList.add('pmb-input-error');
                errorElement.classList.remove('visually-hidden');
            }
        }

        function getErrorMessage(fieldId) {
            let text = "";
            switch(fieldId) {
                case "empr_cp":
                    text = "{{ msg.profil_empr_cp_validation_failed }}";
                    break;
                case "empr_tel1":
                case "empr_tel2":
                    text = "{{ msg.profil_empr_tel_validation_failed }}";
                    break;
                case "empr_year":
                    text = "{{ msg.profil_empr_year_validation_failed }}";
                    break;
                default:
                    return "";
            }
            //On html_entity_decode comme on peut
            let textarea = document.createElement('textarea');
            textarea.innerHTML = text;
            return textarea.value;
        }

        // Fonctions de validation pour chaque type de champ

        function validate_empr_tel1(phone) {
            const phoneRegex = new RegExp("^[\\d\\s\\.\\+\\(\\)-]+$");
            return phoneRegex.test(phone) && phone.replace(/\D/g, '').length >= 10;
        }

        function validate_empr_tel2(phone) {
            return validate_empr_tel1(phone);
        }

        function validate_empr_year(year) {
            const currentYear = new Date().getFullYear();
            const yearNum = parseInt(year);
            return yearNum >= 1900 && yearNum <= currentYear && yearNum.toString() === year;
        }

        function validate_empr_cp(cp) {
            const cpRegex = new RegExp("^\\d{5}$");
            return cpRegex.test(cp);
        }

        // Validation en temps reel pour les champs principaux
        function setupFieldValidation() {
            //const fields = ['empr_nom', 'empr_prenom', 'empr_mail', 'empr_tel1', 'empr_tel2', 'empr_year', 'empr_cp', 'empr_ville'];
            const fields = ['empr_tel1', 'empr_tel2', 'empr_year', 'empr_cp'];
            for(let field of fields) {
                let element = document.getElementById(field);
                //Pas besoin de valider les champs en readonly
                if(element && ! element.hasAttribute("readonly")) {
                    //On vérifie a chaque input
                    element.addEventListener('input', function() {
                        validateField(field, this.value);
                    });
                    //Et au chargement
                    validateField(field, element.value);
                }
            }
        }

        function validateField(field, value) {
            let isValid = true;
            //On cherche la fonction de verification spécifique
            if(typeof window["validate_" + field] == "function") {
                isValid = isValid && window["validate_" + field](value);
                errorMessage = "";
            }
            setFieldState(field, isValid);
        }

        window.addEventListener('DOMContentLoaded', function() {
            setupFieldValidation();
        });
    </script>

    {% if empr.renewal_form_fields.empr_login.display %}
        {% if empr.renewal_form_fields.empr_login.alterable %}
            <script>
                function check_before_submit(e) {
                    if (!check_empr_login()) {
                        e.preventDefault();
                        e.stopPropagation();
                        return;
                    };
                }

                var check_timeout = null;
                try {
                    document.getElementById('empr_login').addEventListener('input', function(e) {
                        clearTimeout(check_timeout);
                        check_timeout = setTimeout(function() {
                            check_empr_login();
                            // Integrer avec le systeme de validation universel
                            const isValid = check_empr_login();
                            setFieldState('empr_login', isValid, isValid ? '' : document.getElementById('empr_login_helper').textContent);
                        }, 1000);
                    });
                    document.getElementById('empr_form').addEventListener('submit', check_before_submit);
                } catch(err) {}

            </script>
        {% endif %}
    {% endif %}
{% endblock %}
