File: docs/templates/hero/user.profile.html.twig

{% extends 'base.html.twig' %}
{% block body %}
    <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="col-md-9 col-lg-6 col-xl-5">
            <img src="{{ main_url }}/themes/{{ theme }}/img/profile.png" class="img-fluid" alt="profile image">
        </div>
        <div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
            <form method="post" id="update_user">
                <input type="hidden" name="action" value="update_user"/>
                <div class="form-outline mb-4">
                    <label class="form-label" for="form3Example3">{{ langs.trans('FirstName') }}
                        <input name="first_name" type="text" id="form3Example3" class="form-control form-control-lg" value="{{ user.first_name }}"/>
                    </label>
                </div>

                <!-- Last name input -->
                <div class="form-outline mb-4">
                    <label class="form-label" for="form3Example3">{{ langs.trans('LastName') }}
                        <input name="last_name" type="text" id="form3Example3" class="form-control form-control-lg" value="{{ user.last_name }}"/>
                    </label>
                </div>

                <!-- Email input -->
                <div class="form-outline mb-3">
                    <label class="form-label" for="form3Example3">{{ langs.trans('EmailAddress') }}
                        <input name="email" type="email" id="form3Example3" class="form-control form-control-lg" value="{{ user.username }}"/>
                    </label>
                </div>

                <!-- Theme select -->
                <div class="form-outline mb-3">
                    <label class="form-label" for="form3Example3">{{ langs.trans('Theme') }}
                        <select class="form-select" name="user_theme">
                            {% for folder in theme_folders %}
                                {% if folder == user.theme %}
                                    <option value="{{ user.theme }}" selected>{{ user.theme }}</option>
                                {% else %}
                                    <option value="{{ folder }}">{{ folder }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </label>
                </div>

                <!-- Language select -->
                <div class="form-outline mb-3">
                    <label class="form-label" for="form3Example3">{{ langs.trans('Language') }}
                        <select class="form-select" name="user_language">
                            {% for folder in lang_folders %}
                                {% if folder == user.language %}
                                    <option value="{{ user.language }}" selected>{{ user.language }}</option>
                                {% else %}
                                    <option value="{{ folder }}">{{ folder }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </label>
                </div>

                <div class="text-center text-lg-start mt-3 pt-2">
                    <input class="btn btn-primary btn-lg pe-3 ps-3" type="submit" name="submit" value="{{ langs.trans('Confirm') }}"/>
                </div>
            </form>
            <form method="post" id="edit_password">
                <input type="hidden" name="action" value="edit_password"/>
                <input class="btn btn-primary btn-lg mt-3 pe-3 ps-3" type="submit" name="submit" value="{{ langs.trans('ChangePassword') }}"/>
            </form>
        </div>
    </div>
{% endblock %}