function initHeader($header){
    console.log("init header date")

    let authSection
    if(!auth) {
        authSection = `
            <div id="authButtonContainer" class="d-flex align-items-center ms-0 ms-lg-3 mt-2 mt-lg-0">
                <button class="auth-btn" data-bs-toggle="modal" data-bs-target="#authModal" style="padding-top: 12px; padding-bottom: 12px;">
                    <i class="fas fa-user"></i>
                    <span class="auth-btn-text">Войти</span>
                </button>
            </div>
        `;
    } else {
        authSection = `
            <div id="userProfileContainer" class="dropdown ms-0 ms-lg-3 mt-2 mt-lg-0">
                <a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle" 
                   data-bs-toggle="dropdown" aria-expanded="false">
                    <div class="user-avatar" id="userAvatar">${user.firstName.charAt(0)}${user.lastName.charAt(0)}</div>
                    <span class="ms-2 d-md-inline" id="userName">${user.firstName}</span>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li>
                        <a href="/account/profile" class="text-decoration-none text-black">
                            <div class="user-info">
                                <div class="user-avatar" id="dropdownUserAvatar">${user.firstName.charAt(0)}${user.lastName.charAt(0)}</div>
                                <div class="user-details">
                                    <h6 id="dropdownUserName">${user.firstName} ${user.lastName}</h6>
                                    <small id="dropdownUserEmail">${user.phone}</small>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#"><i class="fas fa-heart"></i> Мои избранные</a></li>
                    <li><a class="dropdown-item" href="#"><i class="fas fa-calendar-alt"></i> Мои бронирования</a></li>
                    <li><a class="dropdown-item" href="#"><i class="fas fa-star"></i> Мои отзывы</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#" onclick="showAddPlaceModal()"><i class="fas fa-plus-circle"></i> Добавить место</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#"><i class="fas fa-cog"></i> Настройки</a></li>
                    <li>
                        <form action="/account/logout" method="post" style="display: inline;">
                            <input type="hidden" name="_csrf" value="${csrf.token}"/>
                            <button type="submit" class="dropdown-item text-danger" style="border: none; background: none; width: 100%; text-align: left;">
                                <i class="fas fa-sign-out-alt"></i> Выйти
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        `;
    }
    $header.append(`
        <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top">
            <div class="container">
                <a class="fs-3 fw-bold text-decoration-none text-reset" href="#">
                    <i class="fas fa-heart heart-icon me-2" style="color: #E74C3CFF"></i>DatePlanner
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#places">Места</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#map-section">Карта</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#ideas">Идеи</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#admin">Для организаций</a>
                        </li>
                    </ul>
                    <button class="btn btn-heart ms-0 ms-lg-3" onclick="showLoginModal()">
                        <i class="fas fa-plus me-2"></i>Добавить место
                    </button>
                    
                    <!-- Кнопка авторизации (показывается когда пользователь не авторизован) -->
                    <!--                                 или                       -->
                    <!-- Профиль пользователя (показывается после авторизации) -->
                    ${authSection}
                </div>
            </div>
        </nav>
        <!-- Модальное окно авторизации -->
        <div class="modal fade" id="authModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <h5 class="modal-title">Вход в DatePlanner</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body p-4">
                        
                        <ul class="nav nav-tabs auth-tabs" id="authTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button">
                                    Вход
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button">
                                    Регистрация
                                </button>
                            </li>
                        </ul>
                        
                        <div class="tab-content" id="authTabContent">
                            <!-- Форма входа -->
                            <div class="tab-pane fade show active" id="login" role="tabpanel">
                                <form id="loginForm" method="POST" action="/account/login">
                                    <input type="hidden" name="_csrf" value="${csrf.token}"/>
                                    <div class="mb-3">
                                        <label class="form-label">Email или телефон</label>
                                        <input type="text" class="form-control" id="loginEmail" placeholder="example@mail.ru" name="username" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Пароль</label>
                                        <input type="password" class="form-control" id="loginPassword" name="password" required>
                                        <div class="text-end mt-2">
                                            <a href="#" class="forgot-password" onclick="showForgotPassword()">Забыли пароль?</a>
                                        </div>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input" id="rememberMe">
                                        <label class="form-check-label" for="rememberMe">Запомнить меня</label>
                                    </div>
                                    <button type="submit" class="btn btn-heart w-100">Войти</button>
                                </form>
                                
                                <div class="auth-divider">
                                    <span>или войдите через</span>
                                </div>
                                
                                <button class="social-auth-btn vk" onclick="loginWithVK()">
                                    <i class="fab fa-vk"></i> ВКонтакте
                                </button>
                                <button class="social-auth-btn google" onclick="loginWithGoogle()">
                                    <i class="fab fa-google"></i> Google
                                </button>
                                <button class="social-auth-btn yandex" onclick="loginWithYandex()">
                                    <i class="fab fa-yandex"></i> Яндекс
                                </button>
                            </div>
                            
                            <!-- Форма регистрации -->
                            <div class="tab-pane fade" id="register" role="tabpanel">
                                <form id="registerForm">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Имя</label>
                                            <input type="text" class="form-control" id="registerFirstName" required>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Фамилия</label>
                                            <input type="text" class="form-control" id="registerLastName">
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Email</label>
                                        <input type="email" class="form-control" id="registerEmail" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Пароль</label>
                                        <input type="password" class="form-control" id="registerPassword" required>
                                        <small class="text-muted">Минимум 6 символов</small>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Подтвердите пароль</label>
                                        <input type="password" class="form-control" id="registerPasswordConfirm" required>
                                    </div>
                                    <div class="mb-3 form-check">
                                        <input type="checkbox" class="form-check-input" id="acceptTerms" required>
                                        <label class="form-check-label" for="acceptTerms">
                                            Я принимаю <a href="#" class="forgot-password">условия использования</a> и 
                                            <a href="#" class="forgot-password">политику конфиденциальности</a>
                                        </label>
                                    </div>
                                    <button type="submit" class="btn btn-heart w-100">Зарегистрироваться</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `)
}
