{% extends "settings_page.html" %}

{% block settings_pane %}

<div id="app">
    <div class="row r-10 m-2">
        <div class="col col-12">
            <div class="row">
                <div class="col-sm-12 col-md-6 text-center text-md-start">
                    <h2>New User</h2>
                </div>
            </div>
            <hr />
            <div class="row">
                <form method="POST">

                    {{ new_user_form.csrf_token }}

                    <div class="mb-3">
                        {{ new_user_form.username.label }}
                        {{ new_user_form.username(class_='form-control', placeholder=new_user_form.username.label.text) }}
                    </div>
                    <div class="mb-3">
                        {{ new_user_form.email.label }}
                        {{ new_user_form.email(class_='form-control', placeholder=new_user_form.email.label.text) }}
                    </div>
                    <div class="mb-3">
                        {{ new_user_form.password.label }}
                        {{ new_user_form.password(type='password', class_='form-control', placeholder=new_user_form.password.label.text) }}
                    </div>
                    <div class="mb-3">
                        {{ new_user_form.confirm_password.label }}
                        {{ new_user_form.confirm_password(type='password', class_='form-control', placeholder=new_user_form.confirm_password.label.text) }}
                    </div>
                    <div class="mb-3">
                        {{ new_user_form.role.label }}
                        {{ new_user_form.role(class_='form-control') }}
                    </div>
                    <div class="mb-3">
                        {{ new_user_form.age_rating.label }}
                        {{ new_user_form.age_rating(class_='form-control') }}
                    </div>
                    <div class="modal-footer">
                        {{ new_user_form.new_user_button(class_='btn btn-success') }}
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



{% endblock %}

{% block script %}
{% endblock %}