<div class="container py-5" id="mainPageContainer">
    <div class="row">
        <div class="col-lg-4 mb-4">
            <div class="sidebar">
                <div class="text-center">
                    <img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
                         class="profile-user-avatar" alt="Анна">
                    <h4 class="mb-1">Анна, 26</h4>
                    <p class="text-muted mb-3">Москва</p>
                    <div class="match-badge">Профиль на 85%</div>
                </div>

                <div class="profile-completion">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Заполненность профиля:</span>
                        <span class="completion-percentage">85%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar" style="width: 85%"></div>
                    </div>
                    <p class="small text-muted mt-2 mb-0">Полный профиль привлекает на 60% больше откликов</p>
                </div>

                <nav class="nav flex-column" id="profile-sections-navigator">
                    <a class="profile-nav-link-custom active" data-section="profileSection" href="#"
                       onclick="showSection('profile')">
                        <i class="fas fa-user me-3"></i>Мой профиль
                    </a>
                    <a class="profile-nav-link-custom" data-section="proposalsSection" href="#"
                       onclick="showSection('proposals')">
                        <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="#"
                       onclick="showSection('organizations')">
                        <i class="fas fa-building me-3"></i>Мои организации
                    </a>
                    <a class="profile-nav-link-custom" data-section="eventsSection" href="#"
                       onclick="showSection('events')">
                        <i class="fas fa-calendar-alt me-3"></i>Мероприятия
                    </a>
                    <a class="profile-nav-link-custom" data-section="settingsSection" href="#"
                       onclick="showSection('settings')">
                        <i class="fas fa-cog me-3"></i>Настройки
                    </a>
                </nav>

                <div class="mt-4">
                    <button class="btn btn-heart w-100" onclick="createNewProposal()">
                        <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">
1
                </div>
                <div class="section-content d-none" id="proposalsSection">
2
                </div>
                <div class="section-content d-none" id="organizationsSection">
3
                </div>
                <div class="section-content d-none" id="eventsSection">
4
                </div>
                <div class="section-content d-none" id="settingsSection">
5
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('#profile-sections-navigator').on('click', '.profile-nav-link-custom', function () {
        $('#profile-sections-navigator').find('.profile-nav-link-custom').removeClass('active');
        $(this).addClass('active');
        const selectedSectionId = $(this).data('section');
        console.log(selectedSectionId);
        $('.section-content').removeClass('d-block').addClass('d-none');
        $(`#${selectedSectionId}`).removeClass('d-none').addClass('d-block');
    })
</script>