Swarm/DysonNetwork.Zone/Pages/Posts.cshtml

@page
@model DysonNetwork.Zone.Pages.PostsModel
@{
    Layout = "_LayoutContained";
    const string defaultAvatar = "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp";

    var pageTitle = "Posts";
    var pageDescription = "A collection of posts.";
    string? ogImageUrl = null;
    var canonicalUrl = $"{Request.Scheme}://{Request.Host}{Request.Path}{Request.QueryString}";
    var siteName = Model.Site?.Name ?? "Solar Network";

    if (Model.Publisher != null)
    {
        pageTitle = $"Posts";
        pageDescription = $"Browse posts written by {Model.Publisher.Nick}.";
        if (Model.Publisher.Background != null)
            ogImageUrl = $"{Request.Scheme}://{Request.Host}/drive/files/{Model.Publisher.Background.Id}";
    }
    ViewData["Title"] = $"{pageTitle} - {siteName}";
}

@section Head {

    <meta name="description" content="@pageDescription" />
    <link rel="canonical" href="@canonicalUrl" />

    <meta property="og:title" content="@pageTitle" />
    <meta property="og:description" content="@pageDescription" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="@canonicalUrl" />
    @if (!string.IsNullOrEmpty(ogImageUrl))
    {
        <meta property="og:image" content="@ogImageUrl" />
    }
    <meta property="og:site_name" content="@siteName" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="@pageTitle" />
    <meta name="twitter:description" content="@pageDescription" />
    @if (!string.IsNullOrEmpty(ogImageUrl))
    {
        <meta name="twitter:image" content="@ogImageUrl" />
    }
}



<div class="container mx-auto px-8 py-8">
    <h1 class="text-3xl font-bold mb-8 px-5">
        <span class="mdi mdi-note-text-outline"></span> Posts
    </h1>

    <div class="w-full grid grid-cols-3 gap-4">
        <div class="col-span-3 md:col-span-2">
            @if (Model.Posts.Any())
            {
                <div class="space-y-8">
                    @foreach (var post in Model.Posts)
                    {
                        <partial name="Shared/_PostItem" model="post" />
                    }
                </div>
            }
            else
            {
                <div class="text-center py-16">
                    <p class="text-lg">No posts found.</p>
                </div>
            }

            @if (Model.TotalPages > 1)
            {
                <div class="flex justify-center mt-8">
                    <div class="join">
                        @{
                            var maxPagesToShow = 5; // e.g., 2 before, current, 2 after
                            var startPage = Math.Max(1, Model.CurrentPage - (maxPagesToShow / 2));
                            var endPage = Math.Min(Model.TotalPages, Model.CurrentPage + (maxPagesToShow / 2));

                            // Adjust startPage and endPage to ensure exactly maxPagesToShow are shown if possible
                            if (endPage - startPage + 1 < maxPagesToShow)
                            {
                                if (startPage == 1)
                                {
                                    endPage = Math.Min(Model.TotalPages, startPage + maxPagesToShow - 1);
                                }
                                else if (endPage == Model.TotalPages)
                                {
                                    startPage = Math.Max(1, endPage - maxPagesToShow + 1);
                                }
                            }
                        }

                        <a asp-page="/Posts"
                           asp-route-currentPage="@(Model.CurrentPage > 1 ? Model.CurrentPage - 1 : 1)"
                           class="join-item btn @(Model.CurrentPage == 1 ? "btn-disabled" : "")">«</a>

                        @if (startPage > 1)
                        {
                            <a asp-page="/Posts"
                               asp-route-currentPage="1"
                               class="join-item btn @(1 == Model.CurrentPage ? "btn-active" : "")">
                                1
                            </a>
                            @if (startPage > 2)
                            {
                                <span class="join-item btn btn-disabled">...</span>
                            }
                        }

                        @for (var idx = startPage; idx <= endPage; idx++)
                        {
                            var pageIdx = idx;
                            <a asp-page="/Posts"
                               asp-route-currentPage="@pageIdx"
                               class="join-item btn @(pageIdx == Model.CurrentPage ? "btn-active" : "")">
                                @pageIdx
                            </a>
                        }

                        @if (endPage < Model.TotalPages)
                        {
                            @if (endPage < Model.TotalPages - 1)
                            {
                                <span class="join-item btn btn-disabled">...</span>
                            }
                            <a asp-page="/Posts"
                               asp-route-currentPage="@Model.TotalPages"
                               class="join-item btn @(Model.TotalPages == Model.CurrentPage ? "btn-active" : "")">
                                @Model.TotalPages
                            </a>
                        }

                        <a asp-page="/Posts"
                           asp-route-currentPage="@(Model.CurrentPage < Model.TotalPages ? Model.CurrentPage + 1 : Model.TotalPages)"
                           class="join-item btn @(Model.CurrentPage == Model.TotalPages ? "btn-disabled" : "")">»</a>
                    </div>
                </div>
            }
        </div>

        @if (Model.Publisher != null)
        {
            <div class="col-span-3 md:col-span-1">
                <partial name="Shared/_PublisherInfo" model="Model.Publisher" />
            </div>
        }
    </div>
</div>