From 28bb043fb8ee74ec21cecdbedf39de94e98e8518 Mon Sep 17 00:00:00 2001
From: kek7198 <grayboy99@protonmail.com>
Date: Wed, 24 Nov 2021 21:00:38 -0600
Subject: [PATCH] fix

---
 files/templates/submission_listing.html | 416 ++++++++++++------------
 1 file changed, 208 insertions(+), 208 deletions(-)

diff --git a/files/templates/submission_listing.html b/files/templates/submission_listing.html
index 87a9751a0d..f9c54f4b61 100644
--- a/files/templates/submission_listing.html
+++ b/files/templates/submission_listing.html
@@ -1,5 +1,5 @@
 {% if v %}
-{% include "award_modal.html" %}
+	{% include "award_modal.html" %}
 {% endif %}
 
 {% for p in listing %}
@@ -9,27 +9,27 @@
 {% set score=ups-downs %}
 
 {% if v %}
-{% set voted= p.voted %}
+	{% set voted= p.voted %}
 {% else %}
-{% set voted=-2 %}
+	{% set voted=-2 %}
 {% endif %}
 
 {% if request.host == 'pcmemes.net' %}
-{% set cc='SPLASH MOUNTAIN' %}
+	{% set cc='SPLASH MOUNTAIN' %}
 {% else %}
-{% set cc='COUNTRY CLUB' %}
+	{% set cc='COUNTRY CLUB' %}
 {% endif %}
 
 {% if p.active_flags %}
-<div id="flaggers-{{p.id}}" class="flaggers hidden">
-	<strong><i class="far fa-fw fa-flag"></i> Reported by:</strong>
-	<pre></pre>
-	<ul style="padding-left:20px; margin-bottom: 0;">
-		{% for f in p.ordered_flags %}
-		<li><a style="font-weight:bold" href="{{f.user.url}}">{{f.user.username}}</a>{% if f.reason %}: {{f.reason | safe}}{% endif %} {% if v.admin_level==6 %}<a href="javascript:void(0)" onclick="post_toast('/del_report/p{{ f.id }}')">[remove]</a>{% endif %}</li>
-		{% endfor %}
-	</ul>
-</div>
+	<div id="flaggers-{{p.id}}" class="flaggers hidden">
+		<strong><i class="far fa-fw fa-flag"></i> Reported by:</strong>
+		<pre></pre>
+		<ul style="padding-left:20px; margin-bottom: 0;">
+			{% for f in p.ordered_flags %}
+				<li><a style="font-weight:bold" href="{{f.user.url}}">{{f.user.username}}</a>{% if f.reason %}: {{f.reason | safe}}{% endif %} {% if v.admin_level==6 %}<a href="javascript:void(0)" onclick="post_toast('/del_report/p{{ f.id }}')">[remove]</a>{% endif %}</li>
+			{% endfor %}
+		</ul>
+	</div>
 {% endif %}
 
 <li id="post-{{p.id}}" class="mb-4 pb-4 border-b border-gray-700 {% if p.is_banned %} banned{% endif %}{% if p.deleted_utc %} deleted{% endif %}{% if p.stickied %} stickied{% endif %}{% if voted==1 %} upvoted{% elif voted==-1 %} downvoted{% endif %}{% if p.over_18 %} nsfw{% endif %}">
@@ -37,55 +37,55 @@
 	<div class="flex md:flex-row flex-nowrap">
 
 		{% if not postembed %}
-		<div class="voting my-2 hidden md:block pr-2">
-			{% if v and request.path.startswith('/@') and not v.admin_level %}
+			<div class="voting my-2 hidden md:block pr-2">
+				{% if v and request.path.startswith('/@') and not v.admin_level %}
 
-			{% if voted==1 %}
-			<div class="mx-auto arrow-up post-{{p.id}}-up active"></div>
-			{% endif %}
+					{% if voted==1 %}
+					<div class="mx-auto arrow-up post-{{p.id}}-up active"></div>
+					{% endif %}
 
-			<span id="post-score-{{p.id}}" class="score post-score-{{p.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}"{% endif %}>{{score}}</span>
+					<span id="post-score-{{p.id}}" class="score post-score-{{p.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}"{% endif %}>{{score}}</span>
 
-			{% if voted==-1 %}
-			<div class="text-muted mx-auto arrow-down post-{{p.id}}-down active"></div>
-			{% endif %}
+					{% if voted==-1 %}
+						<div class="text-muted mx-auto arrow-down post-{{p.id}}-down active"></div>
+					{% endif %}
 
-			{% elif v %}
+				{% elif v %}
 
-			<div id="post-{{p.id}}-up" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '1')" class="mx-auto arrow-up upvote-button post-{{p.id}}-up {% if voted==1 %}active{% endif %}"></div>
+				<div id="post-{{p.id}}-up" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '1')" class="mx-auto arrow-up upvote-button post-{{p.id}}-up {% if voted==1 %}active{% endif %}"></div>
 
-			<span id="post-score-{{p.id}}" class="score post-score-{{p.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}"{% endif %}>{{score}}</span>
+				<span id="post-score-{{p.id}}" class="score post-score-{{p.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}"{% endif %}>{{score}}</span>
 
-			<div {% if environ.get('DISABLE_DOWNVOTES') == '1' %}style="display:None!important"{% endif %} id="post-{{p.id}}-down" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '-1')" class="text-muted mx-auto arrow-down downvote-button post-{{p.id}}-down {% if voted==-1 %}active{% endif %}"></div>
+				<div {% if environ.get('DISABLE_DOWNVOTES') == '1' %}style="display:None!important"{% endif %} id="post-{{p.id}}-down" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '-1')" class="text-muted mx-auto arrow-down downvote-button post-{{p.id}}-down {% if voted==-1 %}active{% endif %}"></div>
 
-			{% else %}
+				{% else %}
 
-			<div id="post-{{p.id}}-up" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '1')" class="mx-auto arrow-up" onclick="location.href='/login';"></div>
+				<div id="post-{{p.id}}-up" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '1')" class="mx-auto arrow-up" onclick="location.href='/login';"></div>
 
-			<span id="post-{{p.id}}-score-none" class="score"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}"{% endif %}>{{score}}</span>
+				<span id="post-{{p.id}}-score-none" class="score"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="" data-bs-original-title="+{{ups}} | -{{downs}}"{% endif %}>{{score}}</span>
 
-			<div {% if environ.get('DISABLE_DOWNVOTES') == '1' %}style="display:None!important"{% endif %} id="post-{{p.id}}-down" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '-1')" class="text-muted mx-auto arrow-down" onclick="location.href='/login';"></div>
+				<div {% if environ.get('DISABLE_DOWNVOTES') == '1' %}style="display:None!important"{% endif %} id="post-{{p.id}}-down" tabindex="0" href="javascript:void(0)" onclick="vote('post', '{{p.id}}', '-1')" class="text-muted mx-auto arrow-down" onclick="location.href='/login';"></div>
 
-			{% endif %}
+				{% endif %}
 
-		</div>
+			</div>
 		{% endif %}
 
 		<div class="flex flex-col flex-shrink-0 items-center mr-4">
 			<img loading="lazy" src="{{ p.author.profile_url }}" class="hidden md:block flex-shrink-0 w-16 h-16 mb-2 p-[3px] bg-white border border-gray-900 object-cover" alt="{{ p.author.username }} avatar"/>
 		</div>
-		
+		  
 		<div class="card-block text-left x-scroll-parent my-md-auto w-100">
 
 			<div class="flex items-center space-x-2 md:-ml-2 mb-1 text-sm text-gray-500 leading-normal {% if p.award_count('ghosts') %}ghosts{% endif %}">
 				{% if p.bannedfor and p.author.banned_by %}
-				<a><i class="fad fa-gavel text-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="User was banned for this post by @{{p.author.banned_by.username}}"></i></a>
+					<a><i class="fad fa-gavel text-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="User was banned for this post by @{{p.author.banned_by.username}}"></i></a>
 				{% endif %}
 
 				{% if p.awards %}
-				{% for a in p.awards %}
-				<i class="{{a.class_list}} px-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="{{a.title}} Award given by @{{a.user.username}}"></i>
-				{% endfor %}
+					{% for a in p.awards %}
+						<i class="{{a.class_list}} px-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="{{a.title}} Award given by @{{a.user.username}}"></i>
+					{% endfor %}
 				{% endif %}
 				{% if v and v.admin_level==6 and p.author.shadowbanned %}<i class="fas fa-user-times text-admin" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Shadowbanned by @{{p.author.shadowbanned}}"></i>{% endif %}
 				{% if p.stickied %}<i id='pinned-{{p.id}}' class="fas fa-thumbtack fa-rotate--45 text-admin" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Pinned {% if p.stickied.startswith('t:') %}until {{p.stickied[2:]}}{% else %}by @{{p.stickied}}{%endif%}"></i>{% endif %}
@@ -117,35 +117,35 @@
 			<div class="hidden md:block pt-4">
 				{% include "/submission/SubmissionActions.html" %}
 			</div>
-		</div>
+	</div>
 
-		<div class="card-header bg-transparent border-0 flex flex-row flex-nowrap pl-2 pl-md-0 p-0 mr-md-2">
+			<div class="card-header bg-transparent border-0 flex flex-row flex-nowrap pl-2 pl-md-0 p-0 mr-md-2">
 
 			<div style="z-index: 3;">
 				{% if p.club and not (v and v.paid_dues) %}
-				<img loading="lazy" src="/assets/images/emojis/marseyglow.webp" class="post-img">
+					<img loading="lazy" src="/assets/images/emojis/marseyglow.webp" class="post-img">
 				{% elif not p.url %}
-				<a {% if v and v.newtab %}target="_blank"{% endif %} {% if v %}href="{{p.permalink}}"{% else %}href="/logged_out{{p.permalink}}"{% endif %}>
-					<img loading="lazy" src="{{p.thumb_url}}" class="post-img">
-				</a>
+					<a {% if v and v.newtab %}target="_blank"{% endif %} {% if v %}href="{{p.permalink}}"{% else %}href="/logged_out{{p.permalink}}"{% endif %}>
+						<img loading="lazy" src="{{p.thumb_url}}" class="post-img">
+					</a>
 				{% elif p.is_image %}
-				<button data-bs-toggle="modal" data-bs-target="#expandImageModal" data-bs-url="{{p.realurl(v)}}" onclick="expandDesktopImage('{{ p.realurl(v) }}')">
-					<img loading="lazy" src="{{p.thumb_url}}" class="post-img">
-				</button>
+					<button data-bs-toggle="modal" data-bs-target="#expandImageModal" data-bs-url="{{p.realurl(v)}}" onclick="expandDesktopImage('{{ p.realurl(v) }}')">
+						<img loading="lazy" src="{{p.thumb_url}}" class="post-img">
+					</button>
 				{% elif (p.url and p.url.lower().endswith('.mp4')) or (p.embed_url and "youtu" in p.domain) or (p.url and "streamable.com/e/" in p.url) %}
-				<button onclick="document.getElementById('video-{{p.id}}').classList.toggle('hidden')">
-					<img loading="lazy" src="{{p.thumb_url}}" class="post-img">
-				</button>
+					<button onclick="document.getElementById('video-{{p.id}}').classList.toggle('hidden')">
+						<img loading="lazy" src="{{p.thumb_url}}" class="post-img">
+					</button>
 				{% else %}
-				<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}">
-					<img loading="lazy" src="{{p.thumb_url}}" class="post-img">
-				</a>
+					<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}">
+						<img loading="lazy" src="{{p.thumb_url}}" class="post-img">
+					</a>
 				{% endif %}
 			</div>
 
 
 		</div>
-	</div>
+</div>
 
 <!-- <div class="card-footer md:hidden mt-2 {% if request.path == '/changelog' %}px-0{% endif %}">
 	<div class="post-actions">
@@ -222,190 +222,190 @@
 </li>
 
 {% if not p.club or v and v.paid_dues %}
-{% if p.realbody(v) %}
-<div class="hidden bg-gray-900 rounded-bottom shadow-inner p-3 mb-3" id="post-text-{{p.id}}">
-	{{p.realbody(v) | safe}}
-</div>
-{% endif %}
+	{% if p.realbody(v) %}
+		<div class="hidden bg-gray-900 rounded-bottom shadow-inner p-3 mb-3" id="post-text-{{p.id}}">
+			{{p.realbody(v) | safe}}
+		</div>
+	{% endif %}
 
-{% if p.is_image and not p.over_18 and ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}
-<div style="text-align: center" class="mt-3 mb-4">
-	<a target="_blank" rel="nofollow noopener noreferrer" href="{{p.url}}">
-		<img loading="lazy" src="/assets/images/loading.gif" data-src="{{p.url}}" class="img-fluid" style="max-height:500px;" alt="Unable to load image">
-	</a>
-</div>
-{% endif %}
+	{% if p.is_image and not p.over_18 and ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}
+		<div style="text-align: center" class="mt-3 mb-4">
+			<a target="_blank" rel="nofollow noopener noreferrer" href="{{p.url}}">
+				<img loading="lazy" src="/assets/images/loading.gif" data-src="{{p.url}}" class="img-fluid" style="max-height:500px;" alt="Unable to load image">
+			</a>
+		</div>
+	{% endif %}
 
-{% if p.url and p.url.lower().endswith('.mp4') %}
-<div id="video-{{p.id}}" style="text-align: center" class="{% if p.over_18 or not ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}hidden{% endif %} mt-4">
-	<video controls loop preload="metadata" style="max-width: 100%">
-		<source src="{{p.realurl(v)}}" type="video/mp4">
-		</video>
-	</div>
+	{% if p.url and p.url.lower().endswith('.mp4') %}
+		<div id="video-{{p.id}}" style="text-align: center" class="{% if p.over_18 or not ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}hidden{% endif %} mt-4">
+			<video controls loop preload="metadata" style="max-width: 100%">
+				<source src="{{p.realurl(v)}}" type="video/mp4">
+			</video>
+		</div>
 	{% elif p.embed_url and "youtu" in p.domain %}
-	<div id="video-{{p.id}}" style="text-align: center" class="{% if p.over_18 or not ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}hidden{% endif %} mt-3 mb-4">
-		<iframe loading="lazy" src="{{p.embed_url}}" frameborder="0" style="max-width: 100%" width="600" height="337" allow="fullscreen"></iframe>
-	</div>
+		<div id="video-{{p.id}}" style="text-align: center" class="{% if p.over_18 or not ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}hidden{% endif %} mt-3 mb-4">
+			<iframe loading="lazy" src="{{p.embed_url}}" frameborder="0" style="max-width: 100%" width="600" height="337" allow="fullscreen"></iframe>
+		</div>
 	{% elif p.url and "streamable.com/e/" in p.url %}
-	<div id="video-{{p.id}}" style="text-align: center" class="{% if p.over_18 or not ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}hidden{% endif %} mt-3 mb-4">
-		<iframe loading="lazy" src="{{p.url}}" frameborder="0" style="max-width: 100%" width="600" height="337" allow="fullscreen"></iframe>
-	</div>
-	{% endif %}
+		<div id="video-{{p.id}}" style="text-align: center" class="{% if p.over_18 or not ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}hidden{% endif %} mt-3 mb-4">
+			<iframe loading="lazy" src="{{p.url}}" frameborder="0" style="max-width: 100%" width="600" height="337" allow="fullscreen"></iframe>
+		</div>
 	{% endif %}
+{% endif %}
 
-	{% else %}
+{% else %}
 
-	{% if request.path.endswith('/admin/queue') %}
+{% if request.path.endswith('/admin/queue') %}
 
-	<div class="row no-gutters">	
-		<div class="col">			
-			<div class="text-center py-7">
-				<div class="h4 p-2">This queue is empty. (That's a good thing.)</div>
-			</div>			
-		</div>	
-	</div>
-
-
-	{% elif u %}
-	{% if v and v.id == u.id %}
-	<div class="row no-gutters">	
-		<div class="col">			
-			<div class="text-center px-3 my-3">
-				<span class="fa-stack fa-2x text-muted mb-4">
-					<i class="fas fa-square text-gray-500 opacity-25 fa-stack-2x"></i>
-					<i class="fas text-gray-500 fa-ghost fa-stack-1x text-lg"></i>
-				</span>
-				<h2 class="h5">You haven't {% if "saved" in request.full_path %}saved{% else %}made{% endif %} a post yet</h2>
-				<p class="text-muted mb-md-5">Your {% if "saved" in request.full_path %}saved posts{% else %}posting history{% endif %} will show here.</p>
-				{% if "saved" not in request.full_path %}<a href="/submit" class="btn btn-primary">Create a post</a>{% endif %}
-			</div>			
-		</div>	
-	</div>
-
-
-	{% else %}
-	<div class="row no-gutters">	
-		<div class="col">			
-			<div class="text-center px-3 my-3">
-				<span class="fa-stack fa-2x text-muted mb-4">
-					<i class="fas fa-square text-gray-500 opacity-25 fa-stack-2x"></i>
-					<i class="fas text-gray-500 fa-scroll-old fa-stack-1x text-lg"></i>
-				</span>
-				<h2 class="h5">@{{u.username}} hasn't made a post yet</h2>
-				<p class="text-muted">Their posting history will show here.</p>
-				<pre>
-				</pre>
-			</div>			
-		</div>	
-	</div>
-	{% endif %}
-
-	{% else %}
-	<div class="flex flex-col items-center justify-center py-24 md:py-48">
-		<img loading="lazy" src="https://c.tenor.com/NhDy-AkelhQAAAAM/marsey-drama.gif" class="w-20 h-20 mb-4 rounded-md object-cover"/>
-		<h2 class="text-xl font-bold leading-normal font-heading">No posts here :/</h2>
-		<p class="text-muted">
-			Looks like there is no content atm.
-		</p>
+<div class="row no-gutters">	
+	<div class="col">			
+		<div class="text-center py-7">
+			<div class="h4 p-2">This queue is empty. (That's a good thing.)</div>
+		</div>			
 	</div>	
+</div>
 
 
-	{% endif %}
+{% elif u %}
+{% if v and v.id == u.id %}
+<div class="row no-gutters">	
+	<div class="col">			
+		<div class="text-center px-3 my-3">
+			<span class="fa-stack fa-2x text-muted mb-4">
+				<i class="fas fa-square text-gray-500 opacity-25 fa-stack-2x"></i>
+				<i class="fas text-gray-500 fa-ghost fa-stack-1x text-lg"></i>
+			</span>
+			<h2 class="h5">You haven't {% if "saved" in request.full_path %}saved{% else %}made{% endif %} a post yet</h2>
+			<p class="text-muted mb-md-5">Your {% if "saved" in request.full_path %}saved posts{% else %}posting history{% endif %} will show here.</p>
+			{% if "saved" not in request.full_path %}<a href="/submit" class="btn btn-primary">Create a post</a>{% endif %}
+		</div>			
+	</div>	
+</div>
 
-	{% endfor %}
 
-	{% if v %}
+{% else %}
+<div class="row no-gutters">	
+	<div class="col">			
+		<div class="text-center px-3 my-3">
+			<span class="fa-stack fa-2x text-muted mb-4">
+				<i class="fas fa-square text-gray-500 opacity-25 fa-stack-2x"></i>
+				<i class="fas text-gray-500 fa-scroll-old fa-stack-1x text-lg"></i>
+			</span>
+			<h2 class="h5">@{{u.username}} hasn't made a post yet</h2>
+			<p class="text-muted">Their posting history will show here.</p>
+			<pre>
+			</pre>
+		</div>			
+	</div>	
+</div>
+{% endif %}
+
+{% else %}
+<div class="flex flex-col items-center justify-center py-24 md:py-48">
+	<img loading="lazy" src="https://c.tenor.com/NhDy-AkelhQAAAAM/marsey-drama.gif" class="w-20 h-20 mb-4 rounded-md object-cover"/>
+	<h2 class="text-xl font-bold leading-normal font-heading">No posts here :/</h2>
+	<p class="text-muted">
+		Looks like there is no content atm.
+	</p>
+</div>	
+
+
+{% endif %}
+
+{% endfor %}
+
+{% if v %}
 	{% include "delete_post_modal.html" %}
 	{% include "report_post_modal.html" %}
 	{% if v.admin_level == 6 %}
-	{% include "ban_modal.html" %}
+		{% include "ban_modal.html" %}
 	{% endif %}
-	{% endif %}
-	{% include "expanded_image_modal.html" %}
+{% endif %}
+{% include "expanded_image_modal.html" %}
 
-	{% block popovers %}
+{% block popovers %}
 
-	{% for p in listing %}
-	<div style="display:none" id="popover-{{p.id}}">
-		<div class="popover-user-profile" role="tooltip">
-			<img class="w-100 h-64 object-cover" src="{{p.author.banner_url}}">
-			<div class="flex align-items-end px-3 mt-n6 mb-3">
-				<img class="avatar-72 rounded img-thumbnail shadow-sm" src="{{p.author.profile_url}}">
-				<div class="px-3 text-truncate">
-					<h5 class="text-truncate text-black">{{p.author.username}}</h5>
-				</div>
-			</div>
-			<div class="px-3">
-				<span class="popover-bio text-black">{% if p.author.bio_html %}{{p.author.bio_html_eager | safe}}{% endif %}</span>
-			</div>
-			<div class="border-top flex align-items-center p-3 gap-3 smol">
-				<span>
-					<strong class="text-black">{{p.author.post_count}}</strong>
-					<span class="text-black">posts</span>
-				</span>
-				<span class="ml-3">
-					<strong class="text-black">{{p.author.comment_count}}</strong>
-					<span class="text-black">comments</span>
-				</span>
-				<span class="ml-3">
-					<strong class="text-black">{{p.author.coins}}</strong>
-					<span class="text-black">coins</span>
-				</span>  
-				&nbsp;&nbsp;&nbsp;&nbsp;
-				<a {% if v %}href="{{p.author.url}}"{% else %}href="/logged_out{{p.author.url}}"{% endif %} target="_blank" class="ml-auto text-decoration-none">
-					View
-					<i class="fas fa-arrow-right fa-sm px-1"></i>
-				</a>
-			</div>
+{% for p in listing %}
+<div style="display:none" id="popover-{{p.id}}">
+	<div class="popover-user-profile" role="tooltip">
+	  <img class="w-100 h-64 object-cover" src="{{p.author.banner_url}}">
+	  <div class="flex align-items-end px-3 mt-n6 mb-3">
+		<img class="avatar-72 rounded img-thumbnail shadow-sm" src="{{p.author.profile_url}}">
+		<div class="px-3 text-truncate">
+		  <h5 class="text-truncate text-black">{{p.author.username}}</h5>
 		</div>
+	  </div>
+	  <div class="px-3">
+		<span class="popover-bio text-black">{% if p.author.bio_html %}{{p.author.bio_html_eager | safe}}{% endif %}</span>
+	  </div>
+	  <div class="border-top flex align-items-center p-3 gap-3 smol">
+		<span>
+		  <strong class="text-black">{{p.author.post_count}}</strong>
+		  <span class="text-black">posts</span>
+		</span>
+		<span class="ml-3">
+		  <strong class="text-black">{{p.author.comment_count}}</strong>
+		  <span class="text-black">comments</span>
+		</span>
+		<span class="ml-3">
+			<strong class="text-black">{{p.author.coins}}</strong>
+			<span class="text-black">coins</span>
+		</span>  
+		&nbsp;&nbsp;&nbsp;&nbsp;
+		<a {% if v %}href="{{p.author.url}}"{% else %}href="/logged_out{{p.author.url}}"{% endif %} target="_blank" class="ml-auto text-decoration-none">
+		  View
+		  <i class="fas fa-arrow-right fa-sm px-1"></i>
+		</a>
+	  </div>
 	</div>
-	{% endfor %}
+</div>
+{% endfor %}
 
-	{% endblock %}
+{% endblock %}
 
-	<script src="/assets/js/new_comments_count.js?v=54"></script>
+<script src="/assets/js/new_comments_count.js?v=54"></script>
 
-	{% for p in listing %}
-	<script>
-		(() => {
-			const date = new Date({{p.created_utc*1000}});
-			document.getElementById('timestamp-{{p.id}}').title = date.toString();
-			{% if p.edited_utc %}
+{% for p in listing %}
+<script>
+	(() => {
+		const date = new Date({{p.created_utc*1000}});
+		document.getElementById('timestamp-{{p.id}}').title = date.toString();
+		{% if p.edited_utc %}
 			const dateEdited = new Date({{p.edited_utc*1000}});
 			document.getElementById('edited_timestamp-{{p.id}}').title = dateEdited.toString();
-			{% endif %}
+		{% endif %}
 
-			{% if (not v or v.highlightcomments) %}
+		{% if (not v or v.highlightcomments) %}
 			showNewCommentCounts('{{p.id}}', {{p.comment_count}})
-			{% endif %}
+		{% endif %}
 
-			{% if p.stickied %}
-			const pinned_info = document.getElementById('pinned-{{p.id}}')
-			{% if p.stickied.startswith('t:') %}
+		{% if p.stickied %}
+		const pinned_info = document.getElementById('pinned-{{p.id}}')
+		{% if p.stickied.startswith('t:') %}
 			pinned_info.setAttribute("data-bs-original-title", `Pinned until ${new Date({{p.stickied[2:]}} * 1000).toString()}`)
-				{% else %}
-				pinned_info.setAttribute("data-bs-original-title", "Pinned by @{{p.stickied}}")
-				{%endif%}
-				{%endif%}
-			})()
-		</script>
-		{% endfor %}
+		{% else %}
+			pinned_info.setAttribute("data-bs-original-title", "Pinned by @{{p.stickied}}")
+		{%endif%}
+		{%endif%}
+	})()
+</script>
+{% endfor %}
 
-		<style>
-			.mod:before {
-				content: '(((';
-			}
+<style>
+	.mod:before {
+		content: '(((';
+	}
 
-			.mod:after {
-				content: ')))';
-			}
+	.mod:after {
+		content: ')))';
+	}
 
-			.mod {
-				padding: 2px 5px 3px 5px;
-				border-radius: 5px;
-				color:white!important;
-				background: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet);
-				background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet );
-				text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black;
-			}
-		</style>
\ No newline at end of file
+	.mod {
+		padding: 2px 5px 3px 5px;
+		border-radius: 5px;
+		color:white!important;
+		background: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet);
+		background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet );
+		text-shadow:-1px -1px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black;
+	}
+</style>
\ No newline at end of file