nyaabooru/resources/views/livewire/posts/view.blade.php

<div class="wa-flank wa-align-items-start wa-gap-3xl" style="--flank-size: 20rem;">

	{{-- Sidebar --}}
	<div class="wa-stack">

		{{-- Post navigation --}}
		<div class="wa-cluster">
			@if ($prev = $post->getPreviousPost())
				<wa-button appearance="plain" href="{{ url("posts/$prev->id") }}" label="Previous" style="color: var(--wa-color-text-link);" wire:navigate.hover>
					<livewire:app.icon name="arrow-left" />
				</wa-button>
			@else
				<wa-button appearance="plain" label="Previous" disabled>
					<livewire:app.icon name="arrow-left" />
				</wa-button>
			@endif

			@if ($next = $post->getNextPost())
				<wa-button appearance="plain" href="{{ url("posts/$next->id") }}" label="Next" style="color: var(--wa-color-text-link);" wire:navigate.hover>
					<livewire:app.icon name="arrow-right" />
				</wa-button>
			@else
				<wa-button appearance="plain" label="Next" disabled>
					<livewire:app.icon name="arrow-right" />
				</wa-button>
			@endif

			<wa-button appearance="plain" href="{{ url("posts/$post->id/edit") }}" label="Edit" style="color: var(--wa-color-text-link);" wire:navigate.hover>
				<livewire:app.icon name="file-pen" />
			</wa-button>
			<wa-button appearance="plain" href="{{ url("posts/$post->id/download") }}" label="Download" style="color: var(--wa-color-text-link);">
				<livewire:app.icon name="download" />
			</wa-button>
			<wa-button appearance="plain" wire:click="$js.showFullImage" label="Expand" style="color: var(--wa-color-text-link);">
				<livewire:app.icon name="arrow-up-right-and-arrow-down-left-from-center" />
			</wa-button>
		</div>

		<wa-divider></wa-divider>

		{{-- Post ID --}}
		<div class="wa-cluster">
			<livewire:app.icon name="hashtag" />
			<span>{{ $post->id }}</span>
		</div>

		{{-- Post author --}}
		<div class="wa-cluster">
			<livewire:app.icon name="user" />
			<span>{{ $post->user->name }}</span>
		</div>

		{{-- Post upload date --}}
		<div class="wa-cluster">
			<livewire:app.icon name="calendar" />
			<wa-format-date
				month="numeric"
				day="numeric"
				year="numeric"
				hour="numeric"
				minute="numeric"
				date="{{ $post->created_at }}">
			</wa-format-date>
		</div>

		{{-- Post dimensions --}}
		<div class="wa-cluster">
			<livewire:app.icon name="image" />
			<span>{{ $post->getDimensionsStr() }}, <wa-format-bytes value="{{ $post->getFileSize() }}"></wa-format-bytes> {{ $post->extension }}</span>
		</div>

		{{-- Post rating --}}
		<div class="wa-cluster">
			<livewire:app.icon name="face-hand-peeking" />
			<span style="color: var(--wa-color-{{ $post->getRatingColor() }}-on-normal);">{{ $post->rating }}</span>
		</div>

		<wa-divider></wa-divider>

		{{-- Tags --}}
		<div class="wa-cluster wa-heading-m">
			<livewire:app.icon name="tags" />
			<span>Tags</span>
		</div>

		<div class="wa-stack wa-gap-2xs" wire:poll>
			@foreach ($post->tags as $tag)
				<span style="color: {{ $tag->tagGroup->color }};">{{ $tag->name }}</span>
			@endforeach
		</div>

	</div>

	{{-- Main content --}}
	<div class="wa-stack wa-gap-2xl" wire:poll.visible>
		<a wire:click="$js.showFullImage" style="cursor: pointer;">
			<livewire:posts.image :$post lazy />
		</a>

		<span class="wa-heading-m">
			<wa-format-number value="{{ $post->comments->count() }}"></wa-format-number>
			{{ Str::plural("Comment", $post->comments->count()) }}
		</span>

		<form wire:submit="postComment">
			<wa-input wire:model.live="message" type="text" placeholder="Leave a comment, press enter to post." clearable multiline>
				<livewire:app.icon name="comment" slot="prefix" />
			</wa-input>
		</form>

		@foreach ($comments as $comment)
			<livewire:posts.comment :$comment :key="$comment->id" />
		@endforeach

		{{-- Full image dialog --}}
		@php [$imgw, $imgh] = $post->getDimensions(); @endphp
		<wa-dialog id="fullImagePreview" without-header without-footer light-dismiss style="--width: calc(95vh * ({{ $imgw }} / {{ $imgh }}));" wire:ignore>
			<livewire:posts.full-image :$post lazy />
		</wa-dialog>

		@script
		<script>
			$js('showFullImage', () => {
				document.querySelector('#fullImagePreview').open = true
			});
		</script>
		@endscript
	</div>

</div>