<div class="container py-5" id="mainPageContainer">
    <div class="row">
        <!-- Левая панель: аватар + навигация -->
        <div class="col-lg-4 mb-4" id="left-panel">
            <div class="sidebar">
                <div class="text-center">
                    <div class="profile-sidebar-avatar mx-auto mb-3" id="sidebarAvatarInitials"></div>
                    <h4 class="mb-1 fw-bold" id="sidebarFullName"></h4>
                    <p class="text-muted mb-3" id="sidebarPhone"></p>
                    <div class="match-badge" id="sidebarRoleBadge"></div>
                </div>

                <nav class="nav flex-column mt-4" id="profile-sections-navigator">
                    <a class="profile-nav-link-custom active" data-section="profileSection" href="#">
                        <i class="fas fa-user me-3"></i>Мой профиль
                    </a>
                    <a class="profile-nav-link-custom" data-section="proposalsSection" href="#">
                        <i class="fas fa-heart me-3"></i>Мои предложения
                        <span class="notification-badge">3</span>
                    </a>
                    <a class="profile-nav-link-custom" data-section="organizationsSection" href="#">
                        <i class="fas fa-building me-3"></i>Мои организации
                    </a>
                    <a class="profile-nav-link-custom" data-section="eventsSection" href="#">
                        <i class="fas fa-calendar-alt me-3"></i>Мероприятия
                    </a>
                    <a class="profile-nav-link-custom" data-section="settingsSection" href="#">
                        <i class="fas fa-cog me-3"></i>Настройки
                    </a>
                </nav>

                <div class="mt-4">
                    <button class="btn btn-heart w-100">
                        <i class="fas fa-plus me-2"></i>Предложить свидание
                    </button>
                </div>
            </div>
        </div>

        <!-- Правая панель: контент секций -->
        <div class="col-lg-8">
            <div class="profile-main-content">
                <div class="section-content d-block" id="profileSection"></div>
                <div class="section-content d-none" id="proposalsSection">
                    <h2 class="section-title">Мои предложения</h2>
                    <p class="text-muted">Раздел в разработке</p>
                </div>
                <div class="section-content d-none" id="organizationsSection"
                     style="max-height: 2000px; overflow-x: auto;"></div>
                <div class="section-content d-none" id="eventsSection">
                    <h2 class="section-title">Мероприятия</h2>
                    <p class="text-muted">Раздел в разработке</p>
                </div>
                <div class="section-content d-none" id="settingsSection">
                    <h2 class="section-title">Настройки</h2>
                    <p class="text-muted">Раздел в разработке</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Навигация по секциям
    $('#profile-sections-navigator').on('click', '.profile-nav-link-custom', function (e) {
        e.preventDefault();
        $('#profile-sections-navigator .profile-nav-link-custom').removeClass('active');
        $(this).addClass('active');
        const sectionId = $(this).data('section');
        $('.section-content').removeClass('d-block').addClass('d-none');
        $(`#${sectionId}`).removeClass('d-none').addClass('d-block');
    });

    // Заполняем сайдбар данными из переменной user (инжектированной сервером)
    if (user) {
        const initials = `${user.firstName.charAt(0)}${user.lastName.charAt(0)}`;
        $('#sidebarAvatarInitials').text(initials);
        $('#sidebarFullName').text(`${user.firstName} ${user.lastName}`);
        $('#sidebarPhone').text(user.phone);
        $('#sidebarRoleBadge').text(user.role || 'USER');
    }
</script>

<script src="/js/site/pages/account/my-profile-block.js"></script>
<script src="/js/site/pages/account/my-organizations-block.js"></script>
<script src="/js/site/pages/account/init-modal-map.js"></script>
