{% extends layout %}

{% block title %}Profile Settings{% endblock %}

{% block content %}
    <div class="row d-flex justify-content-center">
        <div class="col-xl-8">
            {% if app.user.getPasswordChangeRequired %}
                <div class="alert alert-danger fade show" role="alert">
                    <strong>Warning!</strong> Your password is not valid. Please update your password.
                </div>
            {% endif %}

            <h1 class="h4">Profile Settings</h1>
            <div class="card card-body border-0 shadow mb-4" data-controller="profile">
                {{ form_start(form) }}
                {{ form_widget(form) }}
                <div class="d-flex justify-content-end">
                    <button type="button" class="btn btn-outline-gray-500 mt-2 animate-up-2" data-action="profile#generateRandomPassword">
                        <svg class="icon icon-xxs" data-slot="icon" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path clip-rule="evenodd" fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z"></path>
                        </svg>
                        Generate random password
                    </button>
                </div>
                <div class="mt-3">
                    <button class="btn btn-gray-800 mt-2 animate-up-2" data-turbo="false">{{ button_label|default('Save') }}</button>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
{% endblock %}