{{-- Post placeholder for lazy loading --}}
<div id="post-{{$post->id}}" class="post-media post-placeholder" data-post-id="{{$post->id}}" data-access-community-id="{{$accessCommunityId ?? ''}}" data-access-category-id="{{$accessCategoryId ?? ''}}" data-community-owner-actions="{{$communityOwnerActions ?? ''}}" data-community-owner="{{$communityOwner ?? ''}}" data-single-post="{{$singlePost ?? ''}}" data-ownership="{{$ownership ?? ''}}">
    <div class="post-loading-skeleton">
        <div class="skeleton-header">
            <div class="skeleton-avatar shimmer"></div>
            <div class="skeleton-user-info">
                <div class="skeleton-name shimmer"></div>
                <div class="skeleton-time shimmer"></div>
            </div>
        </div>
        <div class="skeleton-content">
            <div class="skeleton-line shimmer"></div>
            <div class="skeleton-line shimmer"></div>
            <div class="skeleton-line shimmer"></div>
            <div class="skeleton-line short shimmer"></div>
            <div class="skeleton-line shimmer"></div>
            <div class="skeleton-line medium shimmer"></div>
        </div>
        <div class="skeleton-actions">
            <div class="skeleton-button shimmer"></div>
            <div class="skeleton-button shimmer"></div>
            <div class="skeleton-button shimmer"></div>
        </div>
    </div>
</div>

<style>
.post-loading-skeleton {
    padding: 20px; /* Increased from 15px */
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    margin-bottom: 0px; /* Increased margin */
    background: #f8f9fa;
    position: relative;
    overflow: hidden;
    min-height: 350px; /* Added minimum height */
}

/* Shimmer effect for skeleton elements */
.shimmer {
    background: linear-gradient(90deg, #e1e8ed 25%, #f0f0f0 50%, #e1e8ed 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-header {
    display: flex;
    align-items: center;
    margin-bottom: 50px; /* Increased margin */
}

.skeleton-avatar {
    width: 45px; /* Increased from 40px */
    height: 45px; /* Increased from 40px */
    border-radius: 50%;
    margin-right: 12px; /* Increased margin */
}

.skeleton-user-info {
    flex: 1;
}

.skeleton-name {
    width: 350px; /* Increased from 120px */
    height: 16px; /* Increased from 14px */
    border-radius: 4px;
    margin-bottom: 8px; /* Increased margin */
}

.skeleton-time {
    width: 90px; /* Increased from 80px */
    height: 14px; /* Increased from 12px */
    border-radius: 4px;
}

.skeleton-content {
    margin-bottom: 50px; /* Increased margin */
}

.skeleton-line {
    height: 14px; /* Increased from 12px */
    border-radius: 4px;
    margin-bottom: 10px; /* Increased margin */
}

.skeleton-line.short {
    width: 60%;
}

.skeleton-line.medium {
    width: 80%;
}

.skeleton-actions {
    display: flex;
    gap: 20px; /* Increased gap */
    margin-top: 15px; /* Added top margin */
}

.skeleton-button {
    width: 70px; /* Increased from 60px */
    height: 14px; /* Increased from 12px */
    border-radius: 4px;
}

/* Animations */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Failed state */
.post-placeholder.load-failed {
    border-color: #dc3545;
    background: #f8d7da;
}
</style>