<!-- Trending Hashtags Widget START -->
<div class="card border-0 shadow-sm mb-3 trending-hashtags-widget">
    <div class="card-header bg-gradient-primary text-white border-0">
        <div class="d-flex align-items-center">
            <i class="bi bi-hash text-white fs-5 me-2"></i>
            <h6 class="mb-0">Trending Hashtags</h6>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="trending-hashtags-list" id="trendingHashtagsList">
            <!-- Loading skeleton -->
            <div class="hashtag-skeleton">
                <div class="skeleton-line"></div>
                <div class="skeleton-line short"></div>
            </div>
            <div class="hashtag-skeleton">
                <div class="skeleton-line"></div>
                <div class="skeleton-line short"></div>
            </div>
            <div class="hashtag-skeleton">
                <div class="skeleton-line"></div>
                <div class="skeleton-line short"></div>
            </div>
        </div>
    </div>
</div>
<!-- Trending Hashtags Widget END -->

<!-- People You May Know Widget START -->
<div class="card border-0 shadow-sm mb-3 people-widget">
    <div class="card-header bg-gradient-success text-white border-0">
        <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
                <i class="bi bi-people text-white fs-5 me-2"></i>
                <h6 class="mb-0">People You May Know</h6>
            </div>
            <button class="btn btn-sm btn-outline-light refresh-btn" onclick="loadSuggestedUsers()">
                <i class="bi bi-arrow-clockwise"></i>
            </button>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="people-list" id="suggestedUsersList">
            <!-- Loading skeleton -->
            <div class="person-skeleton">
                <div class="skeleton-avatar"></div>
                <div class="skeleton-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line short"></div>
                </div>
            </div>
            <div class="person-skeleton">
                <div class="skeleton-avatar"></div>
                <div class="skeleton-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line short"></div>
                </div>
            </div>
            <div class="person-skeleton">
                <div class="skeleton-avatar"></div>
                <div class="skeleton-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line short"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- People You May Know Widget END -->

<!-- Pages You May Like Widget START -->
<div class="card border-0 shadow-sm mb-3 pages-widget">
    <div class="card-header bg-gradient-info text-white border-0">
        <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
                <i class="bi bi-flag text-white fs-5 me-2"></i>
                <h6 class="mb-0">Pages You May Like</h6>
            </div>
            <button class="btn btn-sm btn-outline-light refresh-btn" onclick="loadSuggestedPages()">
                <i class="bi bi-arrow-clockwise"></i>
            </button>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="pages-list" id="suggestedPagesList">
            <!-- Loading skeleton -->
            <div class="page-skeleton">
                <div class="skeleton-avatar"></div>
                <div class="skeleton-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line short"></div>
                </div>
            </div>
            <div class="page-skeleton">
                <div class="skeleton-avatar"></div>
                <div class="skeleton-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line short"></div>
                </div>
            </div>
            <div class="page-skeleton">
                <div class="skeleton-avatar"></div>
                <div class="skeleton-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line short"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Pages You May Like Widget END -->

<!-- Suggested Groups Widget START -->
<div class="card border-0 shadow-sm mb-3 groups-widget">
    <div class="card-header bg-gradient-warning text-white border-0">
        <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
                <i class="bi bi-collection text-white fs-5 me-2"></i>
                <h6 class="mb-0">Suggested Groups</h6>
            </div>
            <button class="btn btn-sm btn-outline-light refresh-btn" onclick="loadSuggestedGroups()">
                <i class="bi bi-arrow-clockwise"></i>
            </button>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="groups-list" id="suggestedGroupsList">
            <!-- Loading skeleton -->
            <div class="group-skeleton">
                <div class="skeleton-avatar"></div>
                <div class="skeleton-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line short"></div>
                </div>
            </div>
            <div class="group-skeleton">
                <div class="skeleton-avatar"></div>
                <div class="skeleton-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line short"></div>
                </div>
            </div>
            <div class="group-skeleton">
                <div class="skeleton-avatar"></div>
                <div class="skeleton-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line short"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Suggested Groups Widget END -->

<!-- Suggested Events Widget START -->
<div class="card border-0 shadow-sm mb-3 events-widget">
    <div class="card-header bg-gradient-danger text-white border-0">
        <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
                <i class="bi bi-calendar-event text-white fs-5 me-2"></i>
                <h6 class="mb-0">Suggested Events</h6>
            </div>
            <button class="btn btn-sm btn-outline-light refresh-btn" onclick="loadSuggestedEvents()">
                <i class="bi bi-arrow-clockwise"></i>
            </button>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="events-list" id="suggestedEventsList">
            <!-- Loading skeleton -->
            <div class="event-skeleton">
                <div class="skeleton-avatar"></div>
                <div class="skeleton-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line short"></div>
                </div>
            </div>
            <div class="event-skeleton">
                <div class="skeleton-avatar"></div>
                <div class="skeleton-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line short"></div>
                </div>
            </div>
            <div class="event-skeleton">
                <div class="skeleton-avatar"></div>
                <div class="skeleton-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line short"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Suggested Events Widget END -->