@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">
                        @for (var idx = 1; idx <= Model.TotalPages; idx++)
                        {
                            var pageIdx = idx;
                            <a asp-page="/Posts"
                               asp-route-currentPage="@pageIdx"
                               class="join-item btn @(pageIdx == Model.CurrentPage ? "btn-active" : "")">
                                @pageIdx
                            </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>