@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.Publisher?.Nick ?? Model.Publisher?.Name ?? "Solar Network";

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

@section Head {
    <title>@pageTitle - @siteName</title>
    <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)
                    {
                        <div class="card bg-base-200 shadow-md">
                            <div class="card-body flex flex-col gap-5">
                                <div>
                                    @if (!string.IsNullOrWhiteSpace(post.Title) || !string.IsNullOrWhiteSpace(post.Description))
                                    {
                                        <section class="mb-1">
                                            @if (!string.IsNullOrWhiteSpace(post.Title))
                                            {
                                                <h2 class="text-lg font-bold">
                                                    <a asp-page="/Posts/Details"
                                                       asp-route-slug="@(post.Slug ?? post.Id.ToString())">@post.Title</a>
                                                </h2>
                                            }
                                            @if (!string.IsNullOrWhiteSpace(post.Description))
                                            {
                                                <p>@post.Description</p>
                                            }
                                        </section>
                                    }
                                    <p>@Html.Raw(post.Content)</p>
                                </div>

                                @if (post.Attachments.Any())
                                {
                                    <div class="flex flex-col gap-4">
                                        @foreach (var attachment in post.Attachments)
                                        {
                                            <div>
                                                @if (attachment.MimeType!.StartsWith("image"))
                                                {
                                                    <figure>
                                                        <img src="/drive/files/@attachment.Id" alt="@attachment.Name"
                                                             class="max-w-full h-auto rounded-lg"/>
                                                    </figure>
                                                }
                                                else if (attachment.MimeType!.StartsWith("video"))
                                                {
                                                    <video controls src="/drive/files/@attachment.Id"
                                                           class="max-w-full h-auto rounded-lg"></video>
                                                }
                                                else if (attachment.MimeType!.StartsWith("audio"))
                                                {
                                                    <audio controls src="/drive/files/@attachment.Id"
                                                           class="max-w-full h-auto rounded-lg"></audio>
                                                }
                                                else
                                                {
                                                    <a href="/drive/files/@attachment.Id" target="_blank"
                                                       class="text-blue-500 hover:underline">@attachment.Name</a>
                                                }
                                            </div>
                                        }
                                    </div>
                                }

                                @if (post.Categories.Any() || post.Tags.Any())
                                {
                                    <div>
                                        @foreach (var category in post.Categories)
                                        {
                                            <span class="badge badge-primary">
                                                <span class="mdi mdi-shape"></span>
                                                @(!string.IsNullOrEmpty(category.Name) ? category.Name : category.Slug)
                                            </span>
                                        }
                                        @foreach (var tag in post.Tags)
                                        {
                                            <span class="badge badge-info">
                                                <span class="mdi mdi-tag"></span>
                                                @(!string.IsNullOrEmpty(tag.Name) ? tag.Name : tag.Slug)
                                            </span>
                                        }
                                    </div>
                                }

                                <div class="card-actions justify-end items-center">
                                    <div class="text-sm text-base-content/60">
                                        Posted on @post.CreatedAt.ToDateTimeOffset().ToString("yyyy-MM-dd")
                                    </div>
                                    <a asp-page="/Posts/Details" asp-route-slug="@(post.Slug ?? post.Id.ToString())"
                                       class="btn btn-sm btn-ghost btn-circle">
                                        <span class="mdi mdi-arrow-right text-lg"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    }
                </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">
                <div class="card bg-base-200 shadow-md">
                    @if (Model.Publisher!.Background != null)
                    {
                        <figure class="relative">
                            <img
                                src="/drive/files/@Model.Publisher!.Background.Id"
                                alt="Background"/>
                        </figure>
                    }
                    <div class="card-body">
                        <div class="flex gap-4 card-title">
                            <div class="avatar">
                                <div class="w-16 rounded-full">
                                    <img
                                        src="@(Model.Publisher.Picture is null ? defaultAvatar : "/drive/files/" + Model.Publisher.Picture!.Id)"
                                        alt="Avatar"/>
                                </div>
                            </div>
                            <h2 class="flex-1 flex flex-col">
                                @Model.Publisher.Nick
                                <span class="text-xs">@@@Model.Publisher.Name</span>
                            </h2>
                        </div>
                        @if (!string.IsNullOrWhiteSpace(Model.Publisher.Bio))
                        {
                            <p>@Model.Publisher.Bio</p>
                        }
                    </div>
                </div>
            </div>
        }
    </div>
</div>