{% include 'overall_header.html' %}

<header class="iz-pagehead">
	<h1 class="iz-pagehead__title">{{ TOTAL_REGISTERED_USERS_ONLINE }}</h1>
</header>

<p class="iz-prose">
	{{ TOTAL_GUEST_USERS_ONLINE }}
	{% if S_SWITCH_GUEST_DISPLAY %}
		&nbsp;&#166;&nbsp;<a class="iz-link" href="{{ U_SWITCH_GUEST_DISPLAY }}">{{ L_SWITCH_GUEST_DISPLAY }}</a>
	{% endif %}
</p>

{% if LEGEND %}
<section class="iz-forum-meta">
	<p class="iz-forum-meta__line">
		<small>{{ L_LEGEND }}{{ L_COLON }}&nbsp;{{ LEGEND }}</small>
	</p>
</section>
{% endif %}

<section class="iz-card iz-card--forum">
	<header class="iz-card__header">
		<h2 class="iz-card__title">{{ L_WHO_IS_ONLINE }}</h2>
	</header>

	<div class="iz-card__body">
		<table class="iz-table iz-table--online viewonline-table">
			{% if user_row %}
			<thead>
				<tr>
					<th scope="col"><a class="iz-link" href="{{ U_SORT_USERNAME }}">{{ L_USERNAME }}</a></th>
					<th scope="col"><a class="iz-link" href="{{ U_SORT_LOCATION }}">{{ L_FORUM_LOCATION }}</a></th>
					<th scope="col"><a class="iz-link" href="{{ U_SORT_UPDATED }}">{{ L_LAST_UPDATED }}</a></th>
				</tr>
			</thead>
			<tbody>
				{% for user_row in user_row %}
				<tr>
					<td>
						{{ user_row.USERNAME_FULL }}
						{% if user_row.USER_IP %}
							&nbsp;&#166;&nbsp;{{ L_IP }}{{ L_COLON }}&nbsp;
							<a class="iz-link" href="{{ user_row.U_USER_IP }}">{{ user_row.USER_IP }}</a>
							&nbsp;&#187;&nbsp;
							<a class="iz-link" href="{{ user_row.U_WHOIS }}" onclick="popup(this.href, 750, 500); return false;">{{ L_WHOIS }}</a>
						{% endif %}
						{% if user_row.USER_BROWSER %}<br />{{ user_row.USER_BROWSER }}{% endif %}
					</td>
					<td><a class="iz-link" href="{{ user_row.U_FORUM_LOCATION }}">{{ user_row.FORUM_LOCATION }}</a></td>
					<td>{{ user_row.LASTUPDATE }}</td>
				</tr>
				{% endfor %}
			</tbody>
			{% else %}
			<tbody>
				<tr>
					<td colspan="3">
						{{ L_NO_ONLINE_USERS }}
						{% if S_SWITCH_GUEST_DISPLAY %}
							&nbsp;&bull;&nbsp;<a class="iz-link" href="{{ U_SWITCH_GUEST_DISPLAY }}">{{ L_SWITCH_GUEST_DISPLAY }}</a>
						{% endif %}
					</td>
				</tr>
			</tbody>
			{% endif %}
		</table>
	</div>
</section>

<section class="iz-toolbar iz-toolbar--between" aria-label="{{ L_OPTIONS }}">
	<div class="iz-toolbar__start">
		{% include 'jumpbox_options.html' %}
	</div>

	<div class="iz-toolbar__end">
		<ul class="iz-pagination iz-pagination--bottom" aria-label="{{ L_PAGE_NUMBER }}">
			{% 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>

{% include 'overall_footer.html' %}