rDrama/files/templates/user_listing.html

{% for u in users %}
<div class="my-2 px-2 w-1/2 overflow-hidden lg:w-1/3 xl:w-1/5">
	<div id="user-{{u.id}}" class="shadow-sm rounded-md bg-gray-100 border border-gray-300 h-full overflow-hidden">
		<div class="relative">
			<img loading="lazy" src="{{u.banner_url}}" class="object-cover" alt="@{{u.username}} user banner" height=175>
			<div class="absolute bottom-3 left-3">
				<img loading="lazy" src="{{u.profile_url}}" class="h-12 w-12 bg-white p-[3px] border border-gray-300">
			</div>
		</div>

		<div class="break-word">
			<div class="flex flex-wrap justify-between items-center p-2.5 md:p-3 truncate">

				<a class="block font-bold text-base text-black hover:text-primary truncate ellipsis" href="{{u.url}}">@{{u.username}}</a>

				{% if v %}
					{% if v.id!=u.id and not u.is_private and not u.is_nofollow %}
					<div id="button-sub-{{u.id}}" class="{% if u.has_follower(v) %}hidden{% endif %} z-10">
						<button class="btn btn-green" onclick="post_toast2('/follow/{{u.username}}','button-sub-{{u.id}}','button-unsub-{{u.id}}')">Follow
						</button>
					</div>
					{% if u.id != 995 %}
					<div id="button-unsub-{{u.id}}" class="{% if not u.has_follower(v) %}hidden{% endif %} z-10">
						<button class="btn btn-gray" onclick="post_toast2('/unfollow/{{u.username}}','button-sub-{{u.id}}','button-unsub-{{u.id}}')">Unfollow
						</button>
					</div>
					{% endif %}
					{% endif %}
				{% else %}
					<div id="button-sub-{{u.id}}" class="z-10">
						<a class="btn btn-green " href="/signup?redirect={{request.path}}">Follow</a>
					</div>
				{% endif %}
			</div>

			{% if not hide_bios and u.bio_html %}
				<div class="text-black">
					{{u.bio_html | safe}}
				</div>
			{% endif %}
		</div>
	</div>
</div>
{% endfor %}