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

{% block title %}Créer un compte{% endblock %}

{% block body %}
    <div class="register">
        <div class="register-form">
            <h1>Créer un utilisateur</h1>
            {{ form_start(admin_form) }}
                <div>
                    <label>Nom utilisateur</label>
                    {{ form_widget(admin_form.username) }}
                </div>
                <div>
                    {{ form_widget(admin_form.password) }}
                </div>
                <div>
                    <label>Role utilisateur</label>
                    {{ form_widget(admin_form.role) }}
                </div>
                <div id="formateur" style="display: none">
                    <label>Formateur</label>
                    {{ form_widget(admin_form.nomFormateur) }}
                </div>
            {{ form_end(admin_form) }}
        </div>
    </div>
<script>
    let role = document.getElementById('form_role');
    role.addEventListener('change',function(){
        let elem = document.getElementById('formateur');
        if (role.value === "ROLE_TEACHER"){
            elem.style.display = "flex";
        }
        else{
            elem.style.display = "none";
        }
    });
</script>
{% endblock %}