{% extends 'base.html.twig' %}

{% block title %}{{ user }} - Info{% endblock %}

{% block body %}
    <!-- Hero Section with Profile Picture -->
    <div class="container mx-auto px-4 py-12">
        <div class="flex flex-col items-center">
            <!-- Profile Picture -->
            <div class="mb-6">
            {% if user.myPicture %}
                    <img src="{{ asset('images') }}/{{ user.myPicture }}" alt="{{ user.firstName }} {{ user.lastName }}"
                            class="w-32 h-32 md:w-40 md:h-40 rounded-full border-4 border-secondary shadow-2xl object-cover">
            {% else %}
                    <div class="w-32 h-32 md:w-40 md:h-40 rounded-full border-4 border-secondary bg-white/10 backdrop-blur-sm flex items-center justify-center shadow-2xl">
                        <i class="fas fa-user text-white text-5xl md:text-6xl"></i>
                    </div>
                {% endif %}
                </div>

            <!-- User Name -->
            <h1 class="text-3xl md:text-4xl font-bold text-white mb-2">
                {{ user.firstName }} {{ user.lastName }}
            </h1>
            {% if user.companyPosition %}
                <p class="text-xl text-white/90 mb-6">{{ user.companyPosition }}</p>
            {% endif %}

            <!-- URL Copy Section -->
            <div class="w-full max-w-2xl mb-4">
                <div class="flex items-center bg-white/10 backdrop-blur-sm rounded-lg border border-gray-700/30 p-1.5 shadow-lg">
                    <a href="https://{{ http_host }}{{ path('app_bcard', {'id': user.id }) }}"
                        target="_blank" 
                        id="myUrl"
                        class="flex-1 px-3 py-1.5 text-white text-sm md:text-base truncate hover:text-secondary transition-colors">
                        https://{{ http_host }}{{ path('app_bcard', {'id': user.id }) }}
                    </a>
                    <button type="button" 
                            id="myUrlBtn" 
                            class="ml-2 w-8 h-8 flex items-center justify-center bg-secondary/90 hover:bg-secondary text-white rounded-md transition-all duration-200 hover:shadow-md focus:outline-none">
                        <i class="fa-solid fa-copy text-xs"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
            <!-- Main Information Cards -->
            <div class="lg:col-span-3 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 class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.firstName'|trans }}</p>
                            <p class="text-white text-lg">{{ user.firstName ?: '-' }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.lastName'|trans }}</p>
                            <p class="text-white text-lg">{{ user.lastName ?: '-' }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.email'|trans }}</p>
                            <p class="text-white text-lg break-all">{{ user.email }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.verificationStatus'|trans }}</p>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ user.isVerified ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400' }}">
                                <i class="fas {{ user.isVerified ? 'fa-check-circle' : 'fa-times-circle' }} mr-2"></i>
                                {{ user.isVerified ? 'lang.verified'|trans : 'lang.notVerified'|trans }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Company Information Card -->
                {% if user.company or user.companyPosition %}
                <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">
                        {% if user.company %}
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.company'|trans }}</p>
                            <p class="text-white text-lg">{{ user.company }}</p>
                        </div>
                        {% endif %}
                        {% if user.companyPosition %}
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.companyPosition'|trans }}</p>
                            <p class="text-white text-lg">{{ user.companyPosition }}</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <!-- Contact Information Card -->
                {% if user.phone or user.cellphone or user.fax %}
                <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">
                        {% if user.phone %}
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.phone'|trans }}</p>
                            <a href="tel:{{ user.phone }}" class="text-white text-lg hover:text-secondary transition-colors">
                                <i class="fas fa-phone mr-2"></i>{{ user.phone }}
                            </a>
                        </div>
                        {% endif %}
                        {% if user.cellphone %}
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.cellphone'|trans }}</p>
                            <a href="tel:{{ user.cellphone }}" class="text-white text-lg hover:text-secondary transition-colors">
                                <i class="fas fa-mobile-alt mr-2"></i>{{ user.cellphone }}
                            </a>
                        </div>
                        {% endif %}
                        {% if user.fax %}
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.fax'|trans }}</p>
                            <p class="text-white text-lg">{{ user.fax }}</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <!-- Address Information Card -->
                {% if user.street or user.zip or user.city %}
                <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="space-y-2">
                        {% if user.street %}
                        <p class="text-white text-lg">{{ user.street }}</p>
                        {% endif %}
                        <div class="flex gap-2">
                            {% if user.zip %}
                            <p class="text-white text-lg">{{ user.zip }}</p>
                            {% endif %}
                            {% if user.city %}
                            <p class="text-white text-lg">{{ user.city }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endif %}

                <!-- Social Media Card -->
                {% if user.urlInstagram or user.urlLinkedIn or user.urlFacebook or user.urlX or user.myUrl %}
                <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">
                        {% if user.myUrl %}
                        <div class="space-y-1 md:col-span-2">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.myLink'|trans }}</p>
                            <a href="{{ user.myUrl }}" target="_blank" class="text-white text-lg hover:text-secondary transition-colors flex items-center">
                                <i class="fas fa-globe mr-2 text-secondary"></i>
                                <span class="truncate">{{ user.myUrl }}</span>
                            </a>
                        </div>
                        {% endif %}
                        {% if user.urlInstagram %}
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">Instagram</p>
                            <a href="{{ user.urlInstagram }}" target="_blank" class="text-white text-lg hover:text-secondary transition-colors flex items-center">
                                <i class="fab fa-instagram mr-2 text-pink-500"></i>
                                <span class="truncate">{{ user.urlInstagram }}</span>
                            </a>
                        </div>
                        {% endif %}
                        {% if user.urlLinkedIn %}
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">LinkedIn</p>
                            <a href="{{ user.urlLinkedIn }}" target="_blank" class="text-white text-lg hover:text-secondary transition-colors flex items-center">
                                <i class="fab fa-linkedin mr-2 text-blue-500"></i>
                                <span class="truncate">{{ user.urlLinkedIn }}</span>
                            </a>
                        </div>
                        {% endif %}
                        {% if user.urlFacebook %}
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">Facebook</p>
                            <a href="{{ user.urlFacebook }}" target="_blank" class="text-white text-lg hover:text-secondary transition-colors flex items-center">
                                <i class="fab fa-facebook mr-2 text-blue-600"></i>
                                <span class="truncate">{{ user.urlFacebook }}</span>
                            </a>
                        </div>
                        {% endif %}
                        {% if user.urlX %}
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">X (Twitter)</p>
                            <a href="{{ user.urlX }}" target="_blank" class="text-white text-lg hover:text-secondary transition-colors flex items-center">
                                <i class="fab fa-x-twitter mr-2 text-gray-400"></i>
                                <span class="truncate">{{ user.urlX }}</span>
                            </a>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <!-- System 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-info-circle text-secondary mr-3"></i>
                        {{ 'lang.systemInformation'|trans }}
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.accountStatus'|trans }}</p>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ user.isActive ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400' }}">
                                <i class="fas {{ user.isActive ? 'fa-check-circle' : 'fa-times-circle' }} mr-2"></i>
                                {{ user.isActive ? 'lang.active'|trans : 'lang.inactive'|trans }}
                            </span>
                        </div>
                        {% if user.regDatetime %}
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.registrationDate'|trans }}</p>
                            <p class="text-white text-lg">{{ user.regDatetime|date('d.m.Y H:i') }}</p>
                        </div>
                        {% endif %}
                        {% if user.ipAddress %}
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.ipAddress'|trans }}</p>
                            <p class="text-white text-lg font-mono">{{ user.ipAddress }}</p>
                        </div>
                        {% endif %}
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.agreeTerms'|trans }}</p>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ user.agreeTerms ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400' }}">
                                <i class="fas {{ user.agreeTerms ? 'fa-check' : 'fa-times' }} mr-2"></i>
                                {{ user.agreeTerms ? 'lang.yes'|trans : 'lang.no'|trans }}
                            </span>
                        </div>
                        <div class="space-y-1">
                            <p class="text-gray-400 text-sm font-medium">{{ 'lang.agreeDataProtection'|trans }}</p>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ user.agreeDataProtection ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400' }}">
                                <i class="fas {{ user.agreeDataProtection ? 'fa-check' : 'fa-times' }} mr-2"></i>
                                {{ user.agreeDataProtection ? 'lang.yes'|trans : 'lang.no'|trans }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar Actions -->
            <div class="lg:col-span-1">
                <div class="bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-800/50 sticky top-6">
                    <h3 class="text-xl font-bold text-white mb-6">{{ 'lang.actions'|trans }}</h3>
                    <div class="space-y-3">
                        <a href="{{ path('app_user_edit', {'id': user.id}) }}" 
                           class="flex items-center justify-center w-full 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">
                            <i class="fa-solid fa-pen-to-square mr-2"></i>
                            {{ 'lang.edit'|trans }}
                        </a>
                        <a href="{{ path('app_logout') }}" 
                           class="flex items-center justify-center w-full 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">
                            <i class="fa-solid fa-right-from-bracket mr-2"></i>
                            {{ 'lang.Logout'|trans }}
                        </a>
                        <div class="pt-4 border-t border-gray-800/50">
                            {{ include('user/_delete_form.html.twig') }}
                        </div>
            </div>
        </div>
            </div>
        </div>
    </div>
{% endblock %}

    {% block javascripts %}
        {{ encore_entry_script_tags('show') }}
    {% endblock %}