{{- /*gotype: vivaplusdl.VideoInfoVM*/}}
{{define "frag-index"}}
<div class="video-box">
	<div class="thumbnail-container">
		<a href="/video/{{.ID}}">
			<img src="{{.Thumbnail}}" alt="Thumbnail" class="video-thumbnail" />
			<div class="play-button">
				<span class="play-symbol">▶</span>
			</div>
		</a>
	</div>
	<div class="video-info">
		<h2 class="video-title">{{.Title}}</h2>
		<p class="video-description">{{.Description}}</p>
		<div class="video-actions">
			<a href="/video/{{.ID}}" class="watch-button">Watch Now</a>
			<form hx-boost="true" method="post" action="{{if .IsWatched}}/mark-unwatched/{{.ID}}{{else}}/mark-watched/{{.ID}}{{end}}">
				<button type="submit" class="mark-watched">
					{{if .IsWatched}}
					Mark as Unwatched
					{{else}}
					Mark as Watched
					{{end}}
				</button>
			</form>
			{{if ne .PreviousID 0}}
			<a href="/?video={{.PreviousID}}" class="mark-watched">Show Previous</a>
			{{end}}
		</div>
	</div>
</div>
{{end}}