@page "/posts/{PostId:guid}"
@model DysonNetwork.Sphere.Pages.Posts.PostDetailModel
@using Markdig
@{
    ViewData["Title"] = Model.Post?.Title + " | Solar Network";
    var imageUrl = Model.Post?.Attachments?.FirstOrDefault(a => a.MimeType.StartsWith("image/"))?.Id;
}

@section Head {
    <meta property="og:title" content="@Model.Post?.Title" />
    <meta property="og:type" content="article" />
    @if (imageUrl != null)
    {
        <meta property="og:image" content="/api/files/@imageUrl" />
    }
    <meta property="og:url" content="@Request.Scheme://@Request.Host@Request.Path" />
    <meta property="og:description" content="@Model.Post?.Description" />
}

<div class="container mx-auto p-4">
    @if (Model.Post != null)
    {
        <h1 class="text-3xl font-bold mb-4">@Model.Post.Title</h1>
        <p class="text-gray-600 mb-2">
            Created at: @Model.Post.CreatedAt
            @if (Model.Post.Publisher?.Account != null)
            {
                <span>by <a href="#" class="text-blue-500">@@@Model.Post.Publisher.Name</a></span>
            }
        </p>
        <div class="prose lg:prose-xl mb-4">
            @Html.Raw(Markdown.ToHtml(Model.Post.Content ?? string.Empty))
        </div>

        @if (Model.Post.Attachments != null && Model.Post.Attachments.Any())
        {
            <h2 class="text-2xl font-bold mb-2">Attachments</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach (var attachment in Model.Post.Attachments)
                {
                    <div class="border p-2 rounded-md">
                        @if (attachment.MimeType != null && attachment.MimeType.StartsWith("image/"))
                        {
                            <img src="/api/files/@attachment.Id" alt="@attachment.Name" class="w-full h-auto object-cover mb-2" />
                        }
                        else if (attachment.MimeType != null && attachment.MimeType.StartsWith("video/"))
                        {
                            <video controls class="w-full h-auto object-cover mb-2">
                                <source src="/api/files/@attachment.Id" type="@attachment.MimeType">
                                Your browser does not support the video tag.
                            </video>
                        }
                        <a href="/api/files/@attachment.Id" target="_blank" class="text-blue-500 hover:underline">
                            @attachment.Name
                        </a>
                    </div>
                }
            </div>
        }
    }
    else
    {
        <div class="alert alert-error">
            <span>Post not found.</span>
        </div>
    }
</div>