@using Wave.Data
@using Humanizer
@using Wave.Utilities

@inject IStringLocalizer<Pages.ArticleView> Localizer

<SectionContent SectionName="GlobalHeader">
	<header class="bg-secondary text-secondary-content border-b-2 border-current py-6 px-4 md:px-12">
		<h1 class="text-3xl lg:text-5xl font-light">
			@Article.Title
		</h1>
		<p>
			<small class="text-sm">
				@Article.Author.FullName <br>

				<time datetime="@Article.PublishDate.ToString("u")"
				      title="@Article.PublishDate.ToString("g")">
					@Article.PublishDate.ToString("g")
				</time>
				
				@if (Article.LastModified is not null && Article.LastModified > Article.PublishDate) {
					<time datetime="@Article.LastModified.Value.ToString("u")"
					      title="@Article.LastModified.Value.ToString("g")">
						(@Localizer["ModifiedOn"] @Article.LastModified.Humanize())
					</time>
				}
			</small>
			@if (Article.Status < ArticleStatus.Published) {
				<span class="badge badge-sm badge-outline badge-warning ml-2">
					@Article.Status.Humanize()
				</span>
			}
		</p>
		<div class="flex justify-between items-end my-3">
			@if (Article.Categories.Count > 0) {
				<p class="flex flex-wrap gap-2">
					@foreach (var category in Article.Categories.OrderBy(c => c.Color)) {
						<CategoryBadgeComponent Category="category" />
					}
				</p>
			} else {
				<p> </p>
			}
			<ReaderToggle Label="@Localizer["ToggleReader_Label"]" />
		</div>
	</header>
</SectionContent>

<article class="mb-6">
	<div class="prose prose-neutral max-w-none hyphens-auto text-justify">
        @Content
    </div>
</article>

@if (!string.IsNullOrWhiteSpace(Article.Author.AboutTheAuthor)) {
	<section class="mb-2">
		<div class="card sm:card-side card-compact bg-secondary text-secondary-content rounded shadow">
			<figure class="shrink-0">
				<img class="sm:max-h-56" src="/api/user/pfp/@Article.Author.Id?size=400" alt="" width="400" loading="async">
			</figure>
			<div class="card-body sm:border-l-2 border-current">
				<h2 class="card-title">About The Author</h2>
				<h3><strong>@Article.Author.Name</strong></h3>
				<p>
					@Article.Author.AboutTheAuthor
				</p>
				<div class="card-actions justify-around md:justify-start flex gap-2 flex-wrap">
					@foreach (var link in Article.Author.Links) {
						<UserLinkComponent Link="link" class="badge hover:badge-outline flex gap-2 p-4" />
					}
					<UserContactBadges User="Article.Author" />
					<a class="badge hover:badge-outline flex gap-2 p-4" href="/profile/@Article.Author.Id">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
							<path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" clip-rule="evenodd" />
						</svg>
						@Localizer["AboutTheAuthor_Profile_Label"]
					</a>
				</div>
			</div>
		</div>
	</section>
}

<div class="flex gap-2 flex-wrap w-full">
	@if (string.IsNullOrWhiteSpace(Article.Author.AboutTheAuthor)) {
		<ProfilePill Profile="Article.Author" RoleTag="@Localizer["Author"]"/>
	}
	@if (Article.Reviewer is not null && Article.Reviewer.Id != Article.Author.Id) {
		<ProfilePill Profile="Article.Reviewer" RoleTag="@Localizer["Reviewer"]" DisableProfileLink="true" />
	}
</div>

<template id="copyButtonTemplate">
	<button class="btn btn-sm btn-accent btn-square absolute top-2 right-2" title="copy">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
			<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
		</svg>
	</button>
</template>
<script>
	async function copyCode(event) {
		const container = event.srcElement.closest("pre, div").querySelector("code, pre");
		let text = container.innerText;
		await navigator.clipboard.writeText(text);
	}

	document.querySelectorAll(".prose div > pre, .prose pre > code").forEach((block) => {
		// only add a button if browser supports Clipboard API
		if (navigator.clipboard) {
			block.parentElement.classList.add("relative");
			const copyButton = document.getElementById("copyButtonTemplate").content.firstElementChild;
			let button = copyButton.cloneNode(true);
			button.addEventListener("click", copyCode);
			block.parentElement.appendChild(button);
		}
	});
</script>

@code {
    [Parameter]
    public required Article Article { get; set; }
    private MarkupString Content => new(Article.BodyHtml);
}
