{% include 'overall_header.html' %}

{% EVENT viewforum_forum_title_before %}
<header class="iz-pagehead">
	<h1 class="iz-pagehead__title">
		{% EVENT viewforum_forum_name_prepend %}
		<a class="iz-link" href="{{ U_VIEW_FORUM }}">{{ FORUM_NAME }}</a>
		{% EVENT viewforum_forum_name_append %}
	</h1>
</header>
{% EVENT viewforum_forum_title_after %}

{% if FORUM_DESC or MODERATORS or U_MCP %}
<section class="iz-forum-meta">
	<!-- NOTE: remove the style="display: none" when you want to have the forum description on the forum body -->
	{% if FORUM_DESC %}<div style="display: none;">{{ FORUM_DESC }}<br /></div>{% endif %}
	{% if MODERATORS %}
		<p class="iz-forum-meta__line">
			<strong>{% if S_SINGLE_MODERATOR %}{{ L_MODERATOR }}{% else %}{{ L_MODERATORS }}{% endif %}{{ L_COLON }}</strong>
			{{ MODERATORS }}
		</p>
	{% endif %}
</section>
{% endif %}

{% if S_FORUM_RULES %}
<section class="iz-alert iz-alert--info" role="status">
	{% if U_FORUM_RULES %}
		<a class="iz-link" href="{{ U_FORUM_RULES }}">{{ L_FORUM_RULES }}</a>
	{% else %}
		<strong>{{ L_FORUM_RULES }}{{ L_COLON }}</strong>&nbsp;{{ FORUM_RULES }}
	{% endif %}
</section>
{% endif %}

{% if S_HAS_SUBFORUM %}
	{% if not S_IS_BOT and U_MARK_FORUMS %}
		<nav class="iz-toolbar iz-toolbar--end" aria-label="{{ L_MARK_SUBFORUMS_READ }}">
			<a href="{{ U_MARK_FORUMS }}" class="iz-link iz-link--action mark-read" data-ajax="mark_forums_read">
				{{ L_MARK_SUBFORUMS_READ }}
			</a>
		</nav>
		<div class="iz-space iz-space--md"></div>
	{% endif %}

	{% include 'forumlist_body.html' %}
{% endif %}

{% if S_DISPLAY_POST_INFO or .pagination or TOTAL_POSTS or TOTAL_TOPICS %}
<section class="iz-toolbar" aria-label="{{ L_OPTIONS }}">
	<div class="iz-toolbar__start">
		{% if S_DISPLAY_SEARCHBOX %}
		<form method="get" id="topic-search" action="{{ S_SEARCHBOX_ACTION }}" class="iz-search">
			<fieldset class="iz-search__fieldset">
				<label class="iz-visually-hidden" for="search_keywords">{{ L_SEARCH_FORUM }}</label>
				<input type="text" class="iz-input iz-input--search" name="keywords" id="search_keywords" value="" placeholder="{{ L_SEARCH_FORUM }}" />
				<button class="iz-btn iz-btn--secondary" type="submit" value="{{ L_SEARCH }}">{{ L_SEARCH }}</button>
				{{ S_SEARCH_LOCAL_HIDDEN_FIELDS }}
			</fieldset>
		</form>
		{% endif %}
	</div>

	<div class="iz-toolbar__end">
		<ul class="iz-pagination" aria-label="{{ L_TOPICS }}">
			{% if U_WATCH_FORUM_LINK and not S_IS_BOT %}
				<li class="iz-pagination__item t-{% if S_WATCHING_FORUM %}unsubscribe{% else %}subscribe{% endif %}">
					<a class="iz-link iz-link--icon t-icon"
					   href="{{ U_WATCH_FORUM_LINK }}"
					   title="{{ S_WATCH_FORUM_TITLE }}"
					   data-ajax="toggle_link"
					   data-toggle-class="t-{% if not S_WATCHING_FORUM %}unsubscribe{% else %}subscribe{% endif %}"
					   data-toggle-url="{{ U_WATCH_FORUM_TOGGLE }}"></a>
				</li>
			{% endif %}

			{% if not S_IS_BOT and U_MARK_TOPICS and .topicrow %}
				<li class="iz-pagination__item">
					<a class="iz-link iz-link--action mark" href="{{ U_MARK_TOPICS }}" data-ajax="mark_topics_read">{{ L_MARK_TOPICS_READ }}</a>
				</li>
			{% endif %}

			<li class="iz-pagination__item iz-pagination__count"><span class="iz-chip">{{ TOTAL_TOPICS }}</span></li>

			{% if pagination %}
				{% include 'pagination.html' %}
			{% else %}
				<li class="iz-pagination__item is-active"><span class="iz-chip">{{ PAGE_NUMBER }}</span></li>
			{% endif %}
		</ul>

		<!-- Mobile summary (kept minimal; no Bootstrap visibility helpers) -->
		<ul class="iz-pagination iz-pagination--compact" aria-label="{{ L_TOPICS }}">
			{% if pagination or TOTAL_POSTS or TOTAL_TOPICS %}
				{% if TOTAL_POSTS and not NEWEST_USER %}
					<li class="iz-pagination__item is-active"><span class="iz-chip">{{ TOTAL_POSTS }}</span></li>
				{% elseif TOTAL_TOPICS and not NEWEST_USER %}
					<li class="iz-pagination__item is-active"><span class="iz-chip">{{ TOTAL_TOPICS }}</span></li>
				{% endif %}
			{% endif %}
		</ul>
	</div>
</section>
{% endif %}

{% if not S_IS_BOT and S_DISPLAY_POST_INFO %}
<section class="iz-toolbar" aria-label="{{ L_POST_TOPIC_NEW }}">
	<div class="iz-toolbar__start">
		{% EVENT viewforum_buttons_top_before %}
		{% if S_IS_LOCKED %}
			<a href="{{ U_POST_NEW_TOPIC }}" role="button" class="iz-btn iz-btn--danger">
				{{ L_FORUM_LOCKED }}
			</a>
		{% else %}
			<a href="{{ U_POST_NEW_TOPIC }}" role="button" class="iz-btn iz-btn--primary btn-load"
			   data-loading-text="{{ L_LOADING }}&nbsp;">
				{{ L_POST_TOPIC_NEW }}
			</a>
		{% endif %}
		{% EVENT viewforum_buttons_top_after %}
	</div>
</section>
{% endif %}

<div class="iz-space iz-space--lg"></div>

{% if S_NO_READ_ACCESS %}
	<section class="iz-alert iz-alert--danger" role="alert">
		<strong>{{ L_NO_READ_ACCESS }}</strong>
	</section>

	{% if not S_USER_LOGGED_IN and not S_IS_BOT %}
	<section class="iz-card iz-card--auth">
		<header class="iz-card__header">
			<h2 class="iz-card__title">{{ L_SIGN_IN_ACCOUNT }}</h2>
		</header>

		<div class="iz-card__body iz-grid iz-grid--2">
			<div class="iz-auth__register">
				{% if S_REGISTER_ENABLED %}
					<h3 class="iz-h3">{{ L_CREATE_ACCOUNT }}</h3>
					<p class="iz-prose">{{ L_LOGIN_INFO }}</p>
					<p class="iz-prose">
						<a class="iz-link" href="{{ U_TERMS_USE }}">{{ L_TERMS_USE }}</a>
						&nbsp;|&nbsp;
						<a class="iz-link" href="{{ U_PRIVACY }}">{{ L_PRIVACY }}</a>
					</p>
					<p><a href="{{ U_REGISTER }}" class="iz-btn iz-btn--secondary">{{ L_REGISTER }}</a></p>
				{% else %}
					<h3 class="iz-h3">{{ L_CREATE_ACCOUNT_DISABLED }}</h3>
					<p class="iz-prose">{{ L_REGISTRATION_DISABLED }}</p>
					<p class="iz-prose">
						<a class="iz-link" href="{{ U_TERMS_USE }}">{{ L_TERMS_USE }}</a>
						&nbsp;|&nbsp;
						<a class="iz-link" href="{{ U_PRIVACY }}">{{ L_PRIVACY }}</a>
					</p>
					<p>
						<a class="iz-btn iz-btn--secondary"
						   href="mailto:{{ BOARD_EMAIL }}?subject=Registrations Closed&body=Dear Admin, %0A%0AI Just wanted to let you know that the board registrations are closed. %0A%0AThis might be an error and I would like to register. %0A%0APlease let me know if this is possible.%0A%0AThanks!">
							{{ L_CONTACT_WEBMASTER }}
						</a>
					</p>
				{% endif %}
			</div>

			<div class="iz-auth__login">
				<form method="post" action="{{ S_LOGIN_ACTION }}" class="iz-form">
					<fieldset class="iz-fieldset">
						<div class="iz-field">
							<label class="iz-visually-hidden" for="username">{{ L_USERNAME }}{{ L_COLON }}</label>
							<input type="text" class="iz-input" name="username" id="username" placeholder="{{ L_USERNAME }}">
						</div>

						<div class="iz-field">
							<label class="iz-visually-hidden" for="password">{{ L_PASSWORD }}{{ L_COLON }}</label>
							<input type="password" class="iz-input" name="password" id="password" placeholder="{{ L_PASSWORD }}">
						</div>

						<div class="iz-actions iz-actions--between">
							{% if S_AUTOLOGIN_ENABLED %}
								<label class="iz-check">
									<input type="checkbox" name="autologin" id="autologin">
									<span>{{ L_LOGIN_REMEMBER }}</span>
								</label>
							{% endif %}

							<button type="submit" class="iz-btn iz-btn--primary" name="login" value="{{ L_LOGIN }}">
								{{ L_LOGIN_ME_IN }}
							</button>
						</div>

						{{ S_LOGIN_REDIRECT }}
						{{ S_FORM_TOKEN_LOGIN }}
					</fieldset>
				</form>
			</div>
		</div>
	</section>
	{% endif %}
{% endif %}

{% EVENT viewforum_body_topic_row_before %}

{% for topicrow in topicrow %}
	{% if not topicrow.S_TOPIC_TYPE_SWITCH and not topicrow.S_FIRST_ROW %}
			</tbody>
		</table>
		</div>
	</section>
	{% endif %}

	{% if topicrow.S_FIRST_ROW or not topicrow.S_TOPIC_TYPE_SWITCH %}
	<section class="iz-card iz-card--forum">
		<header class="iz-card__header">
			<h2 class="iz-card__title">
				{% if S_DISPLAY_ACTIVE %}
					{{ L_ACTIVE_TOPICS }}
				{% elseif topicrow.S_TOPIC_TYPE_SWITCH and (topicrow.S_POST_ANNOUNCE or topicrow.S_POST_GLOBAL) %}
					{{ L_ANNOUNCEMENTS }}
				{% else %}
					{{ L_TOPICS }}
				{% endif %}
			</h2>
		</header>

		<div class="iz-card__body">
			<table class="iz-table iz-table--topics{% if not topicrow.S_POST_GLOBAL and not topicrow.S_POST_ANNOUNCE %} iz-table--topics-normal{% endif %}">
				<thead>
					<tr>
						<th scope="col">{{ L_TITLE }}</th>
					</tr>
				</thead>
				<tbody>
	{% endif %}

		{% EVENT viewforum_body_topicrow_row_before %}
		<tr>
			<td class="iz-topic">
				{% if topicrow.TOPIC_ICON_IMG and S_TOPIC_ICONS %}
					<span class="iz-topic__icon"
						  style="background-image: url('{% if not S_BBEMOJI %}{{ T_ICONS_PATH }}{% endif %}{{ topicrow.TOPIC_ICON_IMG }}'); background-repeat: no-repeat;"
						  title="{{ topicrow.TOPIC_FOLDER_IMG_ALT }}"></span>
				{% endif %}

				<span class="iz-topic__status">
					<i class="row-icon-font icon-moon-default2{% if topicrow.S_POST_ANNOUNCE %} icon-moon-voice2{% endif %}{% if topicrow.S_POST_GLOBAL %} icon-moon-podcast2{% endif %}{% if topicrow.S_POST_STICKY %} icon-moon-pushpin2{% endif %}{% if topicrow.S_HAS_POLL %} icon-moon-poll{% endif %}{% if topicrow.S_TOPIC_MOVED %} icon-moon-moved{% endif %}{% if topicrow.S_UNREAD_TOPIC %} forum-unread{% else %} forum-read{% endif %}"
					   title="{{ topicrow.TOPIC_FOLDER_IMG_ALT }}"></i>
				</span>

				<i class="row-icon-font-mini{% if topicrow.S_TOPIC_LOCKED %} icon-moon-lock forumview-lock{% endif %}"
				   title="{{ topicrow.TOPIC_FOLDER_IMG_ALT }}"></i>

				<div class="iz-topic__main">
					{% EVENT topiclist_row_prepend %}

					<div class="iz-topic__title">
						{% if topicrow.S_UNREAD_TOPIC %}
							<a class="iz-link iz-link--icon" href="{{ topicrow.U_NEWEST_POST }}" title="{{ L_VIEW_FIRST_UNREAD }}">*</a>&nbsp;
						{% endif %}

						{% if topicrow.U_VIEW_TOPIC %}
							<a href="{{ topicrow.U_VIEW_TOPIC }}" class="iz-link iz-link--title">{% if FORUM_NAME %}[{{ FORUM_NAME }}]: {% endif %}{{ topicrow.TOPIC_TITLE }}</a>
						{% else %}
							{{ topicrow.TOPIC_TITLE }}
						{% endif %}

						{% if topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED %}
							<a class="iz-link iz-link--muted" href="{{ topicrow.U_MCP_QUEUE }}"
							   title="{% if topicrow.S_TOPIC_UNAPPROVED %}{{ L_TOPIC_UNAPPROVED }}{% else %}{{ L_POSTS_UNAPPROVED }}{% endif %}">?</a>
						{% endif %}

						{% if topicrow.S_TOPIC_REPORTED %}
							<a class="iz-link iz-link--danger" href="{{ topicrow.U_MCP_REPORT }}" title="{{ L_TOPICS_ROW_REPORTED }}">!</a>
						{% endif %}

						{% if topicrow.S_TOPIC_DELETED %}
							<a class="iz-link iz-link--danger" href="{{ topicrow.U_MCP_QUEUE }}" title="{{ L_TOPICS_ROW_DELETED }}">!</a>
						{% endif %}
					</div>

					{% if topicrow.pagination %}
						<ul class="iz-pagination iz-pagination--topicpages" aria-label="{{ L_PAGE_NUMBER }}">
							{% for pagination in pagination %}
								{% if topicrow.pagination.S_IS_PREV %}
								{% elseif topicrow.pagination.S_IS_CURRENT %}
									<li class="iz-pagination__item is-active"><span class="iz-chip">{{ topicrow.pagination.PAGE_NUMBER }}</span></li>
								{% elseif topicrow.pagination.S_IS_ELLIPSIS %}
									<li class="iz-pagination__item"><span class="iz-chip">{{ L_ELLIPSIS }}</span></li>
								{% elseif topicrow.pagination.S_IS_NEXT %}
								{% else %}
									<li class="iz-pagination__item"><a class="iz-link" href="{{ topicrow.pagination.PAGE_URL }}">{{ topicrow.pagination.PAGE_NUMBER }}</a></li>
								{% endif %}
							{% endfor %}
						</ul>
					{% endif %}

					{# Meta intentionally hidden (author/time) per UI request: keep the topic list clean and title-only #}

					{% EVENT topiclist_row_append %}
				</div>
			</td>

		</tr>
		{% EVENT viewforum_body_topicrow_row_after %}

	{% if topicrow.S_LAST_ROW %}
				</tbody>
			</table>
		</div>
	</section>
	{% endif %}

<!-- BEGINELSE -->
	{# Demo fallback: show a sample topic row so "[Group]: Topic" is visible on fresh/empty forums. #}
	<section class="iz-card iz-card--forum" aria-label="Sample topic">
		<header class="iz-card__header">
			<h2 class="iz-card__title">{{ L_TOPICS }}</h2>
		</header>
		<div class="iz-card__body">
			<table class="iz-table iz-table--topics iz-table--topics-normal">
				<thead>
					<tr>
						<th scope="col">{{ L_TITLE }}</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="iz-topic">
							<div class="iz-topic__main">
								<div class="iz-topic__title">
									<a href="#" class="iz-link iz-link--title" onclick="return false;">[{{ FORUM_NAME|default('Politics') }}]: Your first post</a>
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</section>

	{% if S_IS_POSTABLE %}
		<section class="iz-alert iz-alert--info" role="status">
			<strong>{{ lang(S_SORT_DAYS ? 'NO_TOPICS_TIME_FRAME' : 'NO_TOPICS') }}</strong>
		</section>
	<!-- ELSE IF not S_HAS_SUBFORUM -->
		<section class="iz-alert iz-alert--info" role="status">
			<strong>{{ L_NO_FORUMS_IN_CATEGORY }}</strong>
		</section>
	{% endif %}
{% endfor %}

{% if topicrow and not S_DISPLAY_ACTIVE %}
<section class="iz-toolbar" aria-label="{{ L_OPTIONS }}">
	<div class="iz-toolbar__start">
		{% if not S_IS_BOT and S_DISPLAY_POST_INFO %}
			{% EVENT viewforum_buttons_bottom_before %}
			{% if S_IS_LOCKED %}
				<a href="{{ U_POST_NEW_TOPIC }}" role="button" class="iz-btn iz-btn--danger">{{ L_FORUM_LOCKED }}</a>
			{% else %}
				<a href="{{ U_POST_NEW_TOPIC }}" role="button" class="iz-btn iz-btn--primary btn-load" data-loading-text="{{ L_LOADING }}&nbsp;">
					{{ L_POST_TOPIC_NEW }}
				</a>
			{% endif %}
			{% EVENT viewforum_buttons_bottom_after %}
		{% endif %}
	</div>

	<div class="iz-toolbar__end">
		<ul class="iz-pagination iz-pagination--bottom" aria-label="{{ L_TOPICS }}">
			<li class="iz-pagination__item">
				<a href="javascript:void(0);" class="iz-link iz-link--action" data-target=".sorting">{{ L_OPTIONS }}</a>
			</li>

			<li class="iz-pagination__item iz-pagination__count"><span class="iz-chip">{{ TOTAL_TOPICS }}</span></li>

			{% if pagination %}
				{% include 'pagination.html' %}
			{% else %}
				<li class="iz-pagination__item is-active"><span class="iz-chip">{{ PAGE_NUMBER }}</span></li>
			{% endif %}
		</ul>
	</div>
</section>

<!-- Optional mobile pagination include (kept as-is if you still use it) -->
{% if pagination %}
	{% include 'pagination_mobile.html' %}
{% else %}
	<ul class="iz-pagination iz-pagination--compact" aria-label="{{ L_PAGE_NUMBER }}">
		<li class="iz-pagination__item is-active"><span class="iz-chip">{{ PAGE_NUMBER }}</span></li>
	</ul>
{% endif %}
{% endif %}

{% include 'jump_links.html' %}
<div class="iz-space iz-space--md"></div>

{% if S_SELECT_SORT_DAYS and not S_IS_BOT %}
	{% include 'display_options_viewforum.html' %}
{% endif %}

{% EVENT viewforum_sorting_after %}

{% if S_USER_LOGGED_IN %}
<section class="iz-grid iz-grid--2">
	{% if S_DISPLAY_ONLINE_LIST and U_VIEWONLINE %}
	<div class="iz-card iz-card--whois">
		<header class="iz-card__header">
			<h2 class="iz-card__title"><a class="iz-link" href="{{ U_VIEWONLINE }}">{{ L_WHO_IS_ONLINE }}</a></h2>
		</header>
		<div class="iz-card__body">
			<p class="iz-prose">{{ LOGGED_IN_USER_LIST }}</p>
		</div>
	</div>
	{% endif %}

	<div class="iz-card iz-card--perms">
		<header class="iz-card__header">
			<h2 class="iz-card__title">{{ L_FORUM_PERMISSIONS }}</h2>
		</header>
		<div class="iz-card__body">
			<p class="iz-prose">
				{% if S_IS_POSTABLE and rules|length %}
					{% for rules in rules %}{{ rules.RULE }}<br />{% endfor %}
				{% else %}
					{{ L_NOT_AVAILABLE }}
				{% endif %}
			</p>
		</div>
	</div>
</section>
{% endif %}

{% include 'overall_footer.html' %}