{include "layout.html"}

{block "content"}
<div class="thread-title mb-05">
	<h2>Forum</h2>
	<div>
		<a href="/forum/new"><button class="btn btn-primary">New Thread</button></a>
	</div>
</div>

{if #threadInfos > 0}
<table style="width: 100%; border-collapse: collapse;">
	<thead>
		<tr style="background-color: #f5f5f5;">
			<th style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd;">Thread</th>
			<th style="padding: 10px; text-align: center; border-bottom: 1px solid #ddd; width: 100px;">Replies</th>
			<th style="padding: 10px; text-align: left; border-bottom: 1px solid #ddd; width: 200px;">Last Reply</th>
		</tr>
	</thead>
	<tbody>
		{for threadInfo in threadInfos}
			<tr style="border-bottom: 1px solid #eee;">
				<td style="padding: 10px;">
					<div style="font-weight: bold; margin-bottom: 5px;">
						<a href="/forum/{threadInfo.Thread.ID}" style="text-decoration: none; color: #333;">{threadInfo.Thread.Title}</a>
					</div>
					<div style="font-size: 12px; color: #666;">
						by {threadInfo.Author.Username} • {threadInfo.PostedTime}
					</div>
				</td>
				<td style="padding: 10px; text-align: center;">
					{threadInfo.Thread.Replies}
				</td>
				<td style="padding: 10px; font-size: 12px; color: #666;">
					{if threadInfo.LastReplyBy}
						by {threadInfo.LastReplyBy.Username}<br>
						{threadInfo.LastPostTime}
					{else}
						No replies
					{/if}
				</td>
			</tr>
		{/for}
	</tbody>
</table>

{if totalPages > 1}
<div style="margin-top: 20px; text-align: center;">
	{if hasPrev}
		<a href="/forum?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?page={currentPage + 1}"><button class="btn">Next</button></a>
	{/if}
</div>
{/if}

{else}
<div style="text-align: center; padding: 40px; color: #666;">
	No threads yet. <a href="/forum/new">Create the first one!</a>
</div>
{/if}
{/block}