{% set form_card = 'bg-white rounded-xl border border-gray-200 shadow-sm p-6' %}
{% set form_title = 'text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2' %}
{% set form_icon_wrapper = 'flex-shrink-0 w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-600' %}
{% set form_label_class = 'block text-sm font-semibold text-gray-700 mb-2' %}
{% set form_input_class = 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-gray-400 transition-all duration-200 text-gray-900 text-sm' %}
{% set form_error_class = 'mt-1 text-sm text-red-600' %}

{{ form_start(form, {'attr': {'class': two_columns|default(false) ? 'space-y-0' : 'space-y-6'}}) }}
{% if two_columns|default(false) %}
    <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-start">
        <div class="space-y-6">
{% endif %}

    <!-- Personal Information Card -->
    <div class="{{ form_card }}">
        <h2 class="{{ form_title }}">
            <span class="{{ form_icon_wrapper }}"><i class="fas fa-user-circle"></i></span>
            {{ 'lang.personalInformation'|trans }}
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                {{ form_label(form.email, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.email, {'attr': {'class': form_input_class}}) }}
                {% if form.email.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">
                        {% for error in form.email.vars.errors %}<div>{{ error.message }}</div>{% endfor %}
                    </div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.firstName, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.firstName, {'attr': {'class': form_input_class}}) }}
                {% if form.firstName.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">
                        {% for error in form.firstName.vars.errors %}<div>{{ error.message }}</div>{% endfor %}
                    </div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.lastName, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.lastName, {'attr': {'class': form_input_class}}) }}
                {% if form.lastName.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">
                        {% for error in form.lastName.vars.errors %}<div>{{ error.message }}</div>{% endfor %}
                    </div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.cellphone, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.cellphone, {'attr': {'class': form_input_class}}) }}
                {% if form.cellphone.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">
                        {% for error in form.cellphone.vars.errors %}<div>{{ error.message }}</div>{% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Work Information Card -->
    <div class="{{ form_card }}">
        <h2 class="{{ form_title }}">
            <span class="{{ form_icon_wrapper }}"><i class="fas fa-building"></i></span>
            {{ 'lang.workInformation'|trans }}
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                {{ form_label(form.company, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.company, {'attr': {'class': form_input_class}}) }}
                {% if form.company.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">{% for error in form.company.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.companyPosition, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.companyPosition, {'attr': {'class': form_input_class}}) }}
                {% if form.companyPosition.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">{% for error in form.companyPosition.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Contact Information Card -->
    <div class="{{ form_card }}">
        <h2 class="{{ form_title }}">
            <span class="{{ form_icon_wrapper }}"><i class="fas fa-phone"></i></span>
            {{ 'lang.contactInformation'|trans }}
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                {{ form_label(form.phone, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.phone, {'attr': {'class': form_input_class}}) }}
                {% if form.phone.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">{% for error in form.phone.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.fax, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.fax, {'attr': {'class': form_input_class}}) }}
                {% if form.fax.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">{% for error in form.fax.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Address Information Card -->
    <div class="{{ form_card }}">
        <h2 class="{{ form_title }}">
            <span class="{{ form_icon_wrapper }}"><i class="fas fa-map-marker-alt"></i></span>
            {{ 'lang.address'|trans }}
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="md:col-span-2">
                {{ form_label(form.street, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.street, {'attr': {'class': form_input_class}}) }}
                {% if form.street.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">{% for error in form.street.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.zip, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.zip, {'attr': {'class': form_input_class}}) }}
                {% if form.zip.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">{% for error in form.zip.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.city, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.city, {'attr': {'class': form_input_class}}) }}
                {% if form.city.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">{% for error in form.city.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
                {% endif %}
            </div>
            <div class="md:col-span-2">
                {{ form_label(form.country, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.country, {'attr': {'class': form_input_class ~ ' appearance-none cursor-pointer'}}) }}
                {% if form.country.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">{% for error in form.country.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
                {% endif %}
            </div>
        </div>
    </div>

{% if two_columns|default(false) %}
        </div>
        <div class="space-y-6">
{% endif %}

    <!-- Social Media Card -->
    <div class="{{ form_card }}">
        <h2 class="{{ form_title }}">
            <span class="{{ form_icon_wrapper }}"><i class="fas fa-share-alt"></i></span>
            {{ 'lang.socialNetworks'|trans }}
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                {{ form_label(form.urlInstagram, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.urlInstagram, {'attr': {'class': form_input_class}}) }}
                {% if form.urlInstagram.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">{% for error in form.urlInstagram.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.urlLinkedin, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.urlLinkedin, {'attr': {'class': form_input_class}}) }}
                {% if form.urlLinkedin.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">{% for error in form.urlLinkedin.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.urlFacebook, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.urlFacebook, {'attr': {'class': form_input_class}}) }}
                {% if form.urlFacebook.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">{% for error in form.urlFacebook.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.urlX, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.urlX, {'attr': {'class': form_input_class}}) }}
                {% if form.urlX.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">{% for error in form.urlX.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
                {% endif %}
            </div>
            <div class="md:col-span-2">
                {{ form_label(form.myUrl, null, {'label_attr': {'class': form_label_class}}) }}
                {{ form_widget(form.myUrl, {'attr': {'class': form_input_class}}) }}
                {% if form.myUrl.vars.errors|length > 0 %}
                    <div class="{{ form_error_class }}">{% for error in form.myUrl.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Profile Picture Card -->
    <div class="{{ form_card }}">
        <h2 class="{{ form_title }}">
            <span class="{{ form_icon_wrapper }}"><i class="fas fa-image"></i></span>
            {{ 'lang.myPicture'|trans }}
        </h2>
        <div>
            {{ form_label(form.myPicture, null, {'label_attr': {'class': form_label_class}}) }}
            {{ form_widget(form.myPicture, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg text-gray-900 text-sm file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-gray-200 file:text-gray-800 hover:file:bg-gray-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-gray-400 transition-all duration-200'}}) }}
            {% if form.myPicture.vars.errors|length > 0 %}
                <div class="{{ form_error_class }}">{% for error in form.myPicture.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
            {% endif %}
        </div>
    </div>

    <!-- Header Background Card -->
    <div class="{{ form_card }}">
        <h2 class="{{ form_title }}">
            <span class="{{ form_icon_wrapper }}"><i class="fas fa-image"></i></span>
            {{ 'lang.headerBackground'|trans }}
        </h2>
        <div>
            {{ form_label(form.headerBackground, null, {'label_attr': {'class': form_label_class}}) }}
            {{ form_widget(form.headerBackground, {'attr': {'class': 'w-full px-3 py-2 bg-white border border-gray-300 rounded-lg text-gray-900 text-sm file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-gray-200 file:text-gray-800 hover:file:bg-gray-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-gray-400 transition-all duration-200'}}) }}
            {% if form.headerBackground.vars.errors|length > 0 %}
                <div class="{{ form_error_class }}">{% for error in form.headerBackground.vars.errors %}<div>{{ error.message }}</div>{% endfor %}</div>
            {% endif %}
        </div>
    </div>

    <!-- CSRF and any other unrendered fields -->
    {{ form_rest(form) }}

    <!-- Action Buttons -->
    <div class="{{ form_card }}">
        <div class="flex flex-col sm:flex-row gap-3">
            <button type="submit" class="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 bg-gray-800 hover:bg-gray-700 text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                <i class="fa-solid fa-save text-xs"></i>
                {{ button_label|default('lang.update'|trans) }}
            </button>
            <a href="{{ back_path|default(user.id ? path('app_user_show', {'id': user.id}) : path('app_user_index')) }}"
               class="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2">
                <i class="fa-solid fa-arrow-left text-xs"></i>
                {{ 'lang.back'|trans|default('Back') }}
            </a>
        </div>
    </div>

{% if two_columns|default(false) %}
        </div>
    </div>
{% endif %}

{{ form_end(form) }}

{% if show_delete|default(false) %}
{# Delete account block — always outside main form to avoid nested forms #}
<div class="{{ form_card }} mt-6">
    <form id="delete-account-form" method="post" action="{{ path('app_user_delete', {'id': user.id}) }}">
        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ user.id) }}">
        <button type="button" id="delete-account-btn" class="w-full flex items-center justify-center gap-1.5 px-3 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
            <i class="fa-solid fa-trash text-xs"></i>
            {{ 'lang.deleteAccount'|trans }}
        </button>
    </form>
</div>

{# Confirmation modal #}
<div id="delete-account-modal" class="fixed inset-0 z-50 hidden" aria-modal="true" role="dialog" aria-labelledby="delete-modal-title">
    <div class="fixed inset-0 bg-black/50" id="delete-modal-backdrop"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-xl max-w-md w-full p-6 relative z-10">
            <h2 id="delete-modal-title" class="text-lg font-semibold text-gray-900 mb-3">{{ 'lang.deleteAccountConfirmTitle'|trans }}</h2>
            <p class="text-sm text-gray-600 mb-6">{{ 'lang.deleteAccountConfirmBody'|trans }}</p>
            <div class="flex flex-col-reverse sm:flex-row gap-3 sm:justify-end">
                <button type="button" id="delete-modal-cancel" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors">
                    {{ 'lang.cancel'|trans }}
                </button>
                <button type="button" id="delete-modal-confirm" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors">
                    {{ 'lang.deleteAccountConfirm'|trans }}
                </button>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    var modal = document.getElementById('delete-account-modal');
    var btn = document.getElementById('delete-account-btn');
    var form = document.getElementById('delete-account-form');
    var cancelBtn = document.getElementById('delete-modal-cancel');
    var confirmBtn = document.getElementById('delete-modal-confirm');
    var backdrop = document.getElementById('delete-modal-backdrop');
    function openModal() { modal.classList.remove('hidden'); }
    function closeModal() { modal.classList.add('hidden'); }
    function submitForm() { form.submit(); }
    if (btn) btn.addEventListener('click', openModal);
    if (cancelBtn) cancelBtn.addEventListener('click', closeModal);
    if (backdrop) backdrop.addEventListener('click', closeModal);
    if (confirmBtn) confirmBtn.addEventListener('click', function() { closeModal(); submitForm(); });
})();
</script>
{% endif %}