{% embed "overall_header.html" %}
	{% block header_content %}
		<h1 class="text-slate-50 md:text-2xl text-xl flex flex-wrap items-center gap-4" id="flagusers">{{ FLAG }} {{ FLAG_IMAGE }}</h1>
	{% endblock %}
{% endembed %}

{% if S_FLAG_USERS %}
<div class="action-bar bar-top mt-3">
	<div class="pagination flex justify-end gap-1">
		<!-- IF .pagination -->
		{% include 'pagination.html' with {'TOTAL': TOTAL_USERS} %}
		<!-- ELSE -->
		<div class="card-sm">{TOTAL_USERS} &bull; {PAGE_NUMBER}</div>
		<!-- ENDIF -->
	</div>
</div>

<div class="mt-3">
	<div class="overflow-auto">
		<div class="min-w-full inline-block align-middle">
			<div class="border border-gray-200 rounded-lg overflow-hidden bg-white dark:bg-slate-900 dark:border-slate-900">
				<table id="memberlist" class="memberlist min-w-full">
					<thead class="bg-slate-50 border-b dark:bg-slate-800">
						<tr>
							<th scope="col" class="p-3 text-start text-xs font-medium text-secondary uppercase text-nowrap">{{ lang('USERNAME') }}</th>
							<th scope="col" class="p-3 text-center text-xs font-medium text-secondary uppercase">{{ lang('POSTS') }}</th>
							<th scope="col" class="p-3 text-center text-xs font-medium text-secondary uppercase">{{ lang('JOINED') }}</th>
						</tr>
					</thead>
					<tbody class="divide-y">
			      {% for user_row in loops.user_row %}
              <tr class="text-sm divide-y {% if user_row.S_ROW_COUNT is even %}bg2{% else %}max-lg:bg-gray-50 dark:max-lg:bg-slate-800 bg1{% endif %}">
								<td class="p-3 text-nowrap">
									<dfn>{{ lang('USERNAME') ~ lang('COLON') }}</dfn>
                  <span class="flex items-center gap-2"><span class="rounded-full overflow-hidden h-fit w-fit">{% if user_row.USER_AVATAR %}{{ user_row.USER_AVATAR }}{% endif %}</span> {{ user_row.USERNAME_FULL }}</span>
                </td>
                <td class="p-3 lg:text-center text-nowrap">
									<dfn>{{ lang('POSTS') ~ lang('COLON') }}</dfn>
                  {% if user_row.POSTS and S_DISPLAY_SEARCH %}<a href="{{ user_row.U_SEARCH_USER }}" title="{{ lang('SEARCH_USER_POSTS') }}">{{ user_row.POSTS }}</a>{% else %}{{ user_row.POSTS }}{% endif %}
                </td>
                <td class="p-3 lg:text-center text-nowrap">
									<dfn>{{ lang('JOINED') ~ lang('COLON') }}</dfn>
                  <span>{{ user_row.JOINED }}</span>
                </td>
              </tr>
			      {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="action-bar bar-bottom mt-3">
	<div class="pagination flex justify-end gap-1">
		<!-- IF .pagination -->
		{% include 'pagination.html' with {'TOTAL': TOTAL_USERS} %}
		<!-- ELSE -->
		<div class="card-sm">{TOTAL_USERS} &bull; {PAGE_NUMBER}</div>
		<!-- ENDIF -->
	</div>
</div>
{% else %}
<div class="content">
	<div class="card">
		<h2 class="card-title message-title">{{ lang('INFORMATION') }}</h2>
		<div class="p-4">
			<p class="font-semibold mt-3 py-3 border-t">{{ MESSAGE_TEXT }}</p>
		</div>
	</div>
</div>
{% endif %}

{% INCLUDE 'overall_footer.html' %}