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

{% block title %}{{ user }} - {{ 'lang.profile'|trans }}{% endblock %}

{% block body_class %}bg-gray-50{% endblock %}

{% block body %}
<div class="profile-page bg-gray-50 min-h-screen">
    {{ include('_components/profile_header.html.twig', { user: user }) }}

    {{ include('_components/profile_hero.html.twig', { user: user, variant: 'profile', show_actions: true, http_host: http_host }) }}

    <div class="profile-bcard-wrap pb-12">
        <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-start space-y-6 lg:space-y-0">
            <div>
                {{ include('_components/contact_list_card.html.twig', { user: user, show_heading: true }) }}
            </div>

            <div class="space-y-6">
                {{ include('_components/social_networks_card.html.twig', { user: user }) }}

                <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                        <i class="fas fa-info-circle text-primary"></i>
                        {{ 'lang.systemInformation'|trans }}
                    </h2>
                    <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                        <div>
                            <dt class="text-gray-500 font-medium">{{ 'lang.verificationStatus'|trans }}</dt>
                            <dd>
                                <span class="inline-flex items-center gap-1 {{ user.isVerified ? 'text-green-600' : 'text-amber-600' }}">
                                    <i class="fas {{ user.isVerified ? 'fa-check-circle' : 'fa-clock' }}"></i>
                                    {{ user.isVerified ? 'lang.verified'|trans : 'lang.notVerified'|trans }}
                                </span>
                            </dd>
                        </div>
                        <div>
                            <dt class="text-gray-500 font-medium">{{ 'lang.accountStatus'|trans }}</dt>
                            <dd>
                                <span class="inline-flex items-center gap-1 {{ user.isActive ? 'text-green-600' : 'text-gray-500' }}">
                                    <i class="fas {{ user.isActive ? 'fa-check-circle' : 'fa-minus-circle' }}"></i>
                                    {{ user.isActive ? 'lang.active'|trans : 'lang.inactive'|trans }}
                                </span>
                            </dd>
                        </div>
                        {% if user.regDatetime %}
                        <div>
                            <dt class="text-gray-500 font-medium">{{ 'lang.registrationDate'|trans }}</dt>
                            <dd class="text-gray-900">{{ user.regDatetime|date('d.m.Y') }}</dd>
                        </div>
                        {% endif %}
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('show') }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var btn = document.getElementById('myUrlBtn');
            var urlEl = document.getElementById('myUrl');
            if (btn && urlEl) {
                btn.addEventListener('click', function() {
                    var url = (urlEl.href && urlEl.href !== '') ? urlEl.href : urlEl.textContent.trim();
                    if (navigator.clipboard && navigator.clipboard.writeText) {
                        navigator.clipboard.writeText(url).then(function() {
                            if (window.translations && window.translations['lang.linkCopied']) {
                                alert(window.translations['lang.linkCopied']);
                            } else {
                                alert('Link copied!');
                            }
                        }).catch(function() {
                            if (window.translations && window.translations['lang.linkCopyError']) {
                                alert(window.translations['lang.linkCopyError']);
                            }
                            fallbackCopy(url);
                        });
                    } else {
                        fallbackCopy(url);
                    }
                });
            }
            function fallbackCopy(text) {
                var ta = document.createElement('textarea');
                ta.value = text;
                ta.style.position = 'fixed';
                ta.style.opacity = '0';
                document.body.appendChild(ta);
                ta.select();
                try {
                    document.execCommand('copy');
                    if (window.translations && window.translations['lang.linkCopied']) {
                        alert(window.translations['lang.linkCopied']);
                    }
                } catch (e) {
                    if (window.translations && window.translations['lang.linkCopyError']) {
                        alert(window.translations['lang.linkCopyError']);
                    }
                }
                document.body.removeChild(ta);
            }
        });
    </script>
{% endblock %}