{include "layout.html"}

{block "content"}
<div class="thread-title mb-05">
	<h2>{thread.Title}</h2>
	<div>
		<a href="/forum"><button class="btn">Back</button></a>
		<a href="/forum/{thread.ID}/reply"><button class="btn btn-primary">Reply</button></a>
	</div>
</div>

<!-- Original Thread Post -->
<div style="display: flex; border: 1px solid #ddd; margin-bottom: 20px; background-color: #fafafa;">
	<div style="width: 150px; padding: 15px; background-color: #f5f5f5; border-right: 1px solid #ddd;">
		<div style="font-weight: bold; color: #333;">{threadAuthor.Username}</div>
		<div style="font-size: 12px; color: #666; margin-top: 5px;">
			Level {threadAuthor.Level}<br>
			{threadAuthorClass}
		</div>
	</div>
	<div style="flex: 1; padding: 15px;">
		<div style="margin-bottom: 10px;">
			{threadContent}
		</div>
		<div style="font-size: 11px; color: #888; border-top: 1px solid #eee; padding-top: 10px; margin-top: 10px;">
			Posted: {threadPostedTime}
		</div>
	</div>
</div>

<!-- Replies -->
{if #replyInfos > 0}
{for replyInfo in replyInfos}
<div style="display: flex; border: 1px solid #ddd; margin-bottom: 10px;">
	<div style="width: 150px; padding: 15px; background-color: #f9f9f9; border-right: 1px solid #ddd;">
		<div style="font-weight: bold; color: #333;">{replyInfo.Author.Username}</div>
		<div style="font-size: 12px; color: #666; margin-top: 5px;">
			Level {replyInfo.Author.Level}<br>
			{replyInfo.AuthorClass}
		</div>
	</div>
	<div style="flex: 1; padding: 15px;">
		<div style="margin-bottom: 10px;">
			{replyInfo.Content}
		</div>
		<div style="font-size: 11px; color: #888; border-top: 1px solid #eee; padding-top: 10px; margin-top: 10px;">
			Posted: {replyInfo.PostedTime}
		</div>
	</div>
</div>
{/for}
{/if}

<!-- Pagination -->
{if totalPages > 1}
<div style="margin-top: 20px; text-align: center;">
	{if hasPrev}
		<a href="/forum/{thread.ID}?page={currentPage - 1}"><button class="btn">Previous</button></a>
	{/if}

	<span style="margin: 0 10px;">Page {currentPage} of {totalPages}</span>

	{if hasNext}
		<a href="/forum/{thread.ID}?page={currentPage + 1}"><button class="btn">Next</button></a>
	{/if}
</div>
{/if}

<!-- Reply Button at Bottom -->
<div style="margin-top: 20px; text-align: center;">
	<a href="/forum/{thread.ID}/reply"><button class="btn btn-primary">Reply to Thread</button></a>
</div>
{/block}