{{-- Latest Posts Component --}}
@php
    $displayType = $component['content']['display_type'] ?? 'grid';
    $postsPerRow = $component['content']['posts_per_row'] ?? 3;
    $showExcerpt = $component['content']['show_excerpt'] ?? true;
    $showAuthor = $component['content']['show_author'] ?? true;
    $showDate = $component['content']['show_date'] ?? true;
    $showCategory = $component['content']['show_category'] ?? true;
    $showFeaturedImage = $component['content']['show_featured_image'] ?? true;
    $showReadMore = $component['content']['show_read_more'] ?? true;
    $categoryFilter = $component['content']['category_filter'] ?? null;
    $tagFilter = $component['content']['tag_filter'] ?? null;
    $filterType = $component['content']['filter_type'] ?? 'latest'; // latest, featured, category, tag
    $limit = $component['content']['limit'] ?? 6;
    $excerptLength = $component['content']['excerpt_length'] ?? 120;

    // Get posts from database
    $posts = [];
    if (class_exists('\App\Models\Post')) {
        $query = \App\Models\Post::where('status', 'published')
            ->where('published_at', '<=', now())
            ->with(['category', 'author', 'tags']);

        // Apply filters based on filter type
        if ($filterType === 'featured') {
            $query->where('is_featured', true);
        } elseif ($filterType === 'category' && $categoryFilter) {
            $query->where('post_category_id', $categoryFilter);
        } elseif ($filterType === 'tag' && $tagFilter) {
            $query->whereHas('tags', function($q) use ($tagFilter) {
                $q->where('post_tags.id', $tagFilter);
            });
        }

        $posts = $query->orderBy('published_at', 'desc')->limit($limit)->get();
    }
@endphp

@if(count($posts) > 0)
    <div class="latest-posts-showcase {{ $displayType === 'list' ? 'list-view' : 'grid-view' }}">
        @if($displayType === 'grid')
            <div class="row g-4">
                @foreach($posts as $post)
                    <div class="col-lg-{{ 12 / $postsPerRow }} col-md-6">
                        <article class="post-card h-100">
                            @if($showFeaturedImage && $post->featured_image)
                                <div class="post-image">
                                    <a href="{{ route('public.post', ['website' => $website->subdomain ?? $website->id, 'slug' => $post->slug]) }}">
                                        <img src="{{ Storage::url($post->featured_image) }}" alt="{{ $post->title }}" class="img-fluid">
                                    </a>
                                    @if($post->is_featured)
                                        <span class="badge bg-warning text-dark position-absolute top-0 start-0 m-2">
                                            <i class="bi bi-star-fill"></i> Featured
                                        </span>
                                    @endif
                                </div>
                            @endif

                            <div class="post-content p-3">
                                @if($showCategory && $post->category)
                                    <div class="post-category mb-2">
                                        <a href="#" class="badge bg-primary text-decoration-none">
                                            {{ $post->category->name }}
                                        </a>
                                    </div>
                                @endif

                                <h5 class="post-title mb-2" style="font-family: var(--heading-font);">
                                    <a href="{{ route('public.post', ['website' => $website->subdomain ?? $website->id, 'slug' => $post->slug]) }}"
                                       class="text-decoration-none text-dark">
                                        {{ $post->title }}
                                    </a>
                                </h5>

                                <div class="post-meta mb-2 d-flex flex-wrap gap-2 small text-muted">
                                    @if($showAuthor)
                                        <span><i class="bi bi-person"></i> {{ $post->author->name }}</span>
                                    @endif
                                    @if($showDate)
                                        <span><i class="bi bi-calendar"></i> {{ $post->published_at->format('M d, Y') }}</span>
                                    @endif
                                    <span><i class="bi bi-eye"></i> {{ $post->views_count }} views</span>
                                    <span><i class="bi bi-clock"></i> {{ $post->reading_time }} min read</span>
                                </div>

                                @if($showExcerpt && $post->excerpt)
                                    <p class="post-excerpt text-muted small mb-3">
                                        {{ Str::limit($post->excerpt, $excerptLength) }}
                                    </p>
                                @endif

                                @if($showReadMore)
                                    <a href="{{ route('public.post', ['website' => $website->subdomain ?? $website->id, 'slug' => $post->slug]) }}"
                                       class="btn btn-sm btn-outline-primary">
                                        Read More <i class="bi bi-arrow-right"></i>
                                    </a>
                                @endif
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>
        @else
            {{-- List View --}}
            <div class="posts-list">
                @foreach($posts as $post)
                    <article class="post-card-list mb-4">
                        <div class="row g-0">
                            @if($showFeaturedImage && $post->featured_image)
                                <div class="col-md-4">
                                    <div class="post-image-list h-100">
                                        <a href="{{ route('public.post', ['website' => $website->subdomain ?? $website->id, 'slug' => $post->slug]) }}">
                                            <img src="{{ Storage::url($post->featured_image) }}" alt="{{ $post->title }}" class="img-fluid h-100 w-100" style="object-fit: cover;">
                                        </a>
                                        @if($post->is_featured)
                                            <span class="badge bg-warning text-dark position-absolute top-0 start-0 m-2">
                                                <i class="bi bi-star-fill"></i> Featured
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            @endif

                            <div class="{{ $showFeaturedImage && $post->featured_image ? 'col-md-8' : 'col-md-12' }}">
                                <div class="post-content p-3">
                                    @if($showCategory && $post->category)
                                        <div class="post-category mb-2">
                                            <a href="#" class="badge bg-primary text-decoration-none">
                                                {{ $post->category->name }}
                                            </a>
                                        </div>
                                    @endif

                                    <h4 class="post-title mb-2" style="font-family: var(--heading-font);">
                                        <a href="{{ route('public.post', ['website' => $website->subdomain ?? $website->id, 'slug' => $post->slug]) }}"
                                           class="text-decoration-none text-dark">
                                            {{ $post->title }}
                                        </a>
                                    </h4>

                                    <div class="post-meta mb-2 d-flex flex-wrap gap-2 small text-muted">
                                        @if($showAuthor)
                                            <span><i class="bi bi-person"></i> {{ $post->author->name }}</span>
                                        @endif
                                        @if($showDate)
                                            <span><i class="bi bi-calendar"></i> {{ $post->published_at->format('M d, Y') }}</span>
                                        @endif
                                        <span><i class="bi bi-eye"></i> {{ $post->views_count }} views</span>
                                        <span><i class="bi bi-clock"></i> {{ $post->reading_time }} min read</span>
                                    </div>

                                    @if($showExcerpt && $post->excerpt)
                                        <p class="post-excerpt text-muted mb-3">
                                            {{ Str::limit($post->excerpt, $excerptLength) }}
                                        </p>
                                    @endif

                                    @if($showReadMore)
                                        <a href="{{ route('public.post', ['website' => $website->subdomain ?? $website->id, 'slug' => $post->slug]) }}"
                                           class="btn btn-sm btn-outline-primary">
                                            Read More <i class="bi bi-arrow-right"></i>
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>
        @endif
    </div>
@else
    {{-- Empty State --}}
    <div class="empty-posts-state text-center py-5">
        <div class="mb-4">
            <i class="bi bi-file-earmark-text" style="font-size: 4rem; color: var(--primary-color, #0066FF);"></i>
        </div>
        <h3 class="mb-3" style="font-family: var(--heading-font);">No Posts Yet</h3>
        <p class="text-muted mb-4">Start sharing your stories and insights with your audience.</p>

        @if(auth()->check())
            <a href="{{ route('posts.create', $website) }}" class="btn btn-primary btn-lg">
                <i class="bi bi-plus-circle me-2"></i>Create Your First Post
            </a>
        @endif
    </div>
@endif

<style>
    .post-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .post-card:hover {
        border-color: var(--primary-color);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transform: translateY(-5px);
    }

    .post-image {
        position: relative;
        overflow: hidden;
        height: 220px;
    }

    .post-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .post-card:hover .post-image img {
        transform: scale(1.05);
    }

    .post-content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .post-title {
        margin-bottom: 0.5rem;
        font-weight: 600;
        line-height: 1.4;
    }

    .post-title a:hover {
        color: var(--primary-color) !important;
    }

    .post-meta {
        font-size: 0.875rem;
    }

    .post-meta i {
        margin-right: 0.25rem;
    }

    .post-excerpt {
        flex: 1;
        line-height: 1.6;
    }

    .post-category .badge {
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* List View Styles */
    .post-card-list {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }

    .post-card-list:hover {
        border-color: var(--primary-color);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }

    .post-image-list {
        position: relative;
        overflow: hidden;
        min-height: 250px;
    }

    .post-image-list img {
        transition: transform 0.3s ease;
    }

    .post-card-list:hover .post-image-list img {
        transform: scale(1.05);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .post-image {
            height: 180px;
        }

        .post-image-list {
            min-height: 200px;
        }
    }
</style>