{{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}
    
    <!-- Personal Information Card -->
    <div class="bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-800/50">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
            <i class="fas fa-user-circle text-secondary mr-3"></i>
            {{ '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': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.email, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.email.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.email.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.firstName, null, {'label_attr': {'class': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.firstName, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.firstName.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.firstName.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.lastName, null, {'label_attr': {'class': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.lastName, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.lastName.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.lastName.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.cellphone, null, {'label_attr': {'class': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.cellphone, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.cellphone.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.cellphone.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Work Information Card -->
    <div class="bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-800/50">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
            <i class="fas fa-building text-secondary mr-3"></i>
            {{ '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': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.company, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.company.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.company.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.companyPosition, null, {'label_attr': {'class': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.companyPosition, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.companyPosition.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.companyPosition.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Contact Information Card -->
    <div class="bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-800/50">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
            <i class="fas fa-phone text-secondary mr-3"></i>
            {{ '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': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.phone, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.phone.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.phone.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.fax, null, {'label_attr': {'class': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.fax, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.fax.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.fax.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Address Information Card -->
    <div class="bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-800/50">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
            <i class="fas fa-map-marker-alt text-secondary mr-3"></i>
            {{ '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': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.street, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.street.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.street.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.zip, null, {'label_attr': {'class': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.zip, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.zip.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.zip.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.city, null, {'label_attr': {'class': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.city, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.city.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% 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': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.country, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent appearance-none cursor-pointer'}}) }}
                {% if form.country.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.country.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Social Media Card -->
    <div class="bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-800/50">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
            <i class="fas fa-share-alt text-secondary mr-3"></i>
            {{ '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': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.urlInstagram, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.urlInstagram.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.urlInstagram.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.urlLinkedin, null, {'label_attr': {'class': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.urlLinkedin, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.urlLinkedin.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.urlLinkedin.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.urlFacebook, null, {'label_attr': {'class': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.urlFacebook, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.urlFacebook.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.urlFacebook.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            <div>
                {{ form_label(form.urlX, null, {'label_attr': {'class': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.urlX, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.urlX.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% 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': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
                {{ form_widget(form.myUrl, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
                {% if form.myUrl.vars.errors|length > 0 %}
                    <div class="mt-1 text-sm text-red-400">
                        {% for error in form.myUrl.vars.errors %}
                            <div>{{ error.message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Profile Picture Card -->
    <div class="bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-800/50">
        <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
            <i class="fas fa-image text-secondary mr-3"></i>
            {{ 'lang.myPicture'|trans }}
        </h2>
        <div>
            {{ form_label(form.myPicture, null, {'label_attr': {'class': 'block text-gray-400 text-sm font-medium mb-2'}}) }}
            {{ form_widget(form.myPicture, {'attr': {'class': 'w-full px-4 py-2 bg-gray-700 border border-gray-700 rounded-lg text-white file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-secondary file:text-white hover:file:bg-secondary-light cursor-pointer focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent'}}) }}
            {% if form.myPicture.vars.errors|length > 0 %}
                <div class="mt-1 text-sm text-red-400">
                    {% for error in form.myPicture.vars.errors %}
                        <div>{{ error.message }}</div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-800/50">
        <div class="flex flex-col sm:flex-row gap-3">
            <button type="submit" class="flex-1 flex items-center justify-center px-4 py-2 bg-secondary hover:bg-secondary-light text-white rounded-lg transition-all duration-200 hover:shadow-lg focus:outline-none text-sm font-medium">
                <i class="fa-solid fa-save mr-2"></i>
                {{ button_label|default('lang.update'|trans) }}
            </button>
            <a href="{{ path('app_user_show', {'id': user.id}) }}" 
               class="flex-1 flex items-center justify-center px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-all duration-200 hover:shadow-lg focus:outline-none text-sm font-medium">
                <i class="fa-solid fa-arrow-left mr-2"></i>
                {{ 'lang.back'|trans|default('Back') }}
            </a>
        </div>
    </div>

{{ form_end(form) }}

<!-- Delete Form (outside of main form) -->
<div class="bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-800/50 mt-6">
    <form method="post" action="{{ path('app_user_delete', {'id': user.id}) }}" onsubmit="return confirm('{{ 'lang.deleteAccount'|trans }}?');">
        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ user.id) }}">
        <button type="submit" class="w-full flex items-center justify-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-all duration-200 hover:shadow-lg focus:outline-none text-sm font-medium">
            <i class="fa-solid fa-trash mr-2"></i>
            {{ 'lang.deleteAccount'|trans }}
        </button>
    </form>
</div>