MarseyWorld/files/templates/submission.html

{% extends "default.html" %}


{% set ups=p.upvotes %}
{% set downs=p.downvotes %}
{% set score=ups-downs %}

{% if v %}
	{% set voted=p.voted if p.voted else 0 %}
{% else %}
	{% set voted=-2 %}
{% endif %}

{% set v_forbid_deleted = (p.deleted_utc != 0) and not (v and v.admin_level >= PERMS['POST_COMMENT_MODERATION']) and not (v and v.id == p.author_id) %}

{% block title %}

<style>
	body > .container {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
</style>

{% if SITE_NAME == 'PCM' %}
	{% set wholesome = '/i/wholesome.webp' %}
{% else %}
	{% set wholesome = '/e/marseywholesome.webp' %}
{% endif %}

{% if p.award_count("confetti", v) %}
	<div id="post-award-confetti"></div>
{% endif %}

{% if g.inferior_browser %}
	{% if p.award_count("wholesome", v) %}
		<style>
			.sealimg {
				width: 100px !important;
				height: 89.5px !important;
			}
			@media (max-width: 992px) {
				.sealimg {
					width: 30px !important;
					height: 27px !important;
				}
			}
			
			.seal {
				position:fixed;
				z-index:9999;
				pointer-events: none;
				width: 100% !important;
				height: 100% !important;
			}
			
			@keyframes moveX {
				from {} to {transform: translateX(98vw)}
			}

			@keyframes moveY {
				from {} to {transform: translateY(90vh)}
			}

			.seal1 {
				animation: moveX 4s linear 0s infinite alternate !important;
				animation-delay:0s;
			}
			.seal1 > img {
				animation: moveY 6.8s linear 0s infinite alternate !important;
			}
		</style>
		<div class="seal seal1" height="100%" width="100%">
			<img alt=":#marseywholesome:" class="sealimg seal1" src="{{wholesome}}">
		</div>

		{% if p.award_count("wholesome", v) > 1 %}
			<style>
				.seal2 {
					animation: moveX 5s linear 0s infinite alternate !important;
					animation-delay:1s;
				}
				.seal2 > img {
					animation: moveY 8s linear 0s infinite alternate !important;
					animation-delay:1s;
				}
			</style>
			<div class="seal seal2" height="100%" width="100%">
				<img alt=":#marseywholesome:" class="sealimg" src="{{wholesome}}">
			</div>
		{% endif %}

		{% if p.award_count("wholesome", v) > 2 %}
			<style>
				.seal3 {
					animation: moveX 4s linear 0s infinite alternate !important;
					animation-delay:2s;
				}
				.seal3 > img {
					animation: moveY 5s linear 0s infinite alternate !important;
					animation-delay:2s;
				}
			</style>
			<div class="seal seal3" height="100%" width="100%">
				<img alt=":#marseywholesome:" class="sealimg" src="{{wholesome}}">
			</div>
		{% endif %}

		{% if p.award_count("wholesome", v) > 3 %}
			<style>
				.seal4 {
					animation: moveX 5s linear 0s infinite alternate !important;
					animation-delay:3s;
				}
				.seal4 > img {
					animation: moveY 6.8s linear 0s infinite alternate !important;
					animation-delay:3s;
				}
			</style>
			<div class="seal seal4" height="100%" width="100%">
				<img alt=":#marseywholesome:" class="sealimg" src="{{wholesome}}">
			</div>
		{% endif %}
	{% endif %}

	{% if SITE_NAME == 'PCM' and p.award_count("toe", v) %}
		<style>
			.toeimg {
				width: 100px !important;
				height: auto !important;
			}
			@media (max-width: 992px) {
				.toeimg {
					width: 30px !important;
					height: auto !important;
				}
			}
			
			.toe {
				position:fixed;
				z-index:9999;
				pointer-events: none;
				width: 100% !important;
				height: 100% !important;
			}
			
			@keyframes moveX {
				from {} to {transform: translateX(98vw)}
			}

			@keyframes moveY {
				from {} to {transform: translateY(90vh)}
			}

			.toe1 {
				animation: moveX 4s linear 0s infinite alternate !important;
				animation-delay:0s;
			}
			.toe1 > img {
				animation: moveY 6.8s linear 0s infinite alternate !important;
			}
		</style>
		<div class="toe toe1" height="100%" width="100%">
			<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
		</div>
		
		{% if p.award_count("toe", v) > 1 %}
			<style>
				.toe2 {
					animation: moveX 5s linear 0s infinite alternate !important;
					animation-delay:1s;
				}
				.toe2 > img {
					animation: moveY 8s linear 0s infinite alternate !important;
					animation-delay:1s;
				}
			</style>
			<div class="toe toe2" height="100%" width="100%">
				<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
			</div>
		{% endif %}
		
		{% if p.award_count("toe", v) > 2 %}
			<style>
				.toe3 {
					animation: moveX 4s linear 0s infinite alternate !important;
					animation-delay:2s;
				}
				.toe3 > img {
					animation: moveY 5s linear 0s infinite alternate !important;
					animation-delay:2s;
				}
			</style>
			<div class="toe toe3" height="100%" width="100%">
				<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
			</div>
		{% endif %}
		
		{% if p.award_count("toe", v) > 3 %}
			<style>
				.toe4 {
					animation: moveX 5s linear 0s infinite alternate !important;
					animation-delay:3s;
				}
				.toe4 > img {
					animation: moveY 6.8s linear 0s infinite alternate !important;
					animation-delay:3s;
				}
			</style>
			<div class="toe toe4" height="100%" width="100%">
				<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
			</div>
		{% endif %}
	{% endif %}
{% else %}
	{% if p.award_count("wholesome", v) %}
		<style>
			.seal {
				position:fixed;
				z-index:9999;
				pointer-events: none;
				width: 100% !important;
				height: 100% !important;
			}
			.sealimg {
				width: 100px !important;
				height: 89.5px !important;
			}
			@media (max-width: 992px) {
				.sealimg {
					width: 30px !important;
					height: 27px !important;
				}
			}
		</style>
		<div class="seal" height="100%" width="100%">
			<marquee class="seal" scrollamount=10 behavior="alternate" direction="up" height="100%" width="100%">
				<marquee direction="right" scrollamount=10 behavior="alternate" height="100%" width="100%">
					<img alt=":#marseywholesome:" class="sealimg" src="{{wholesome}}">
				</marquee>
			</marquee>
		</div>

		{% if p.award_count("wholesome", v) > 1 %}
			<marquee class="seal" scrollamount=10 behavior="alternate" direction="down" height="100%">
				<marquee direction="right" scrollamount=10 behavior="alternate" width="100%">
					<img alt=":#marseywholesome:" class="sealimg" src="{{wholesome}}">
				</marquee>
			</marquee>
		{% endif %}

		{% if p.award_count("wholesome", v) > 2 %}
			<marquee class="seal" scrollamount=10 behavior="alternate" direction="up" height="100%">
				<marquee direction="left" scrollamount=10 behavior="alternate" width="100%">
					<img alt=":#marseywholesome:" class="sealimg" src="{{wholesome}}">
				</marquee>
			</marquee>
		{% endif %}

		{% if p.award_count("wholesome", v) > 3 %}
			<marquee class="seal" scrollamount=10 behavior="alternate" direction="down" height="100%">
				<marquee direction="left" scrollamount=10 behavior="alternate" width="100%">
					<img alt=":#marseywholesome:" class="sealimg" src="{{wholesome}}">
				</marquee>
			</marquee>
		{% endif %}
	{% endif %}

	{% if SITE_NAME == 'PCM' and p.award_count("toe", v) %}
		<style>
			.toe {
				position:fixed;
				z-index:9999;
				pointer-events: none;
				width: 100% !important;
				height: 100% !important;
			}
			.toeimg {
				width: 100px !important;
				height: auto !important;
			}
			@media (max-width: 992px) {
				.toeimg {
					width: 30px !important;
					height: auto !important;
				}
			}
		</style>
		<div class="toe" height="100%" width="100%">
			<marquee class="toe" scrollamount=10 behavior="alternate" direction="up" height="100%" width="100%">
				<marquee direction="right" scrollamount=10 behavior="alternate" height="100%" width="100%">
					<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
				</marquee>
			</marquee>
		</div>

		{% if p.award_count("toe", v) > 1 %}
			<marquee class="toe" scrollamount=10 behavior="alternate" direction="down" height="100%">
				<marquee direction="right" scrollamount=10 behavior="alternate" width="100%">
					<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
				</marquee>
			</marquee>
		{% endif %}

		{% if p.award_count("toe", v) > 2 %}
			<marquee class="toe" scrollamount=10 behavior="alternate" direction="up" height="100%">
				<marquee direction="left" scrollamount=10 behavior="alternate" width="100%">
					<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
				</marquee>
			</marquee>
		{% endif %}

		{% if p.award_count("toe", v) > 3 %}
			<marquee class="toe" scrollamount=10 behavior="alternate" direction="down" height="100%">
				<marquee direction="left" scrollamount=10 behavior="alternate" width="100%">
					<img alt="Blade's toe" class="toeimg" src="/i/PCM/toe.webp?v=2000">
				</marquee>
			</marquee>
		{% endif %}
	{% endif %}
{% endif %}





{% if p.award_count("train", v) or p.award_count("scooter", v) %}
	<style>
		.train {
			position:fixed;
			z-index:9999;
			pointer-events: none;
		}
		.train1 {
			top: 10%
		}
		.train2 {
			top: 35%
		}
		.train3 {
			top: 60%
		}
		.train4 {
			top: 85%
		}
	</style>
{% endif %}

{% if p.award_count("train", v) %}
	<style>
		.trainimg {
			width: 100px !important;
			height: 51px !important;
		}
		@media (max-width: 992px) {
			.trainimg {
				width: 40px !important;
				height: 20px !important;
			}
		}
	</style>

	<marquee class="train train1" direction="left" scrollamount=10 width="100%">
		<img alt=":#marseytrain:" class="trainimg mirrored" src="/e/marseytrain.webp">
	</marquee>

	{% if p.award_count("train", v) > 1 %}
		<marquee class="train train2" direction="right" scrollamount=10 width="100%">
			<img alt=":#marseytrain:" class="trainimg" src="/e/marseytrain.webp">
		</marquee>
	{% endif %}

	{% if p.award_count("train", v) > 2 %}
		<marquee class="train train3" direction="left" scrollamount=10 width="100%">
			<img alt=":#marseytrain:" class="trainimg mirrored" src="/e/marseytrain.webp">
		</marquee>
	{% endif %}

	{% if p.award_count("train", v) > 3 %}
		<marquee class="train train4" direction="right" scrollamount=10 width="100%">
			<img alt=":#marseytrain:" class="trainimg" src="/e/marseytrain.webp">
		</marquee>
	{% endif %}
{% endif %}


{% if SITE_NAME == 'PCM' and p.award_count("croag", v) %}
	<style>
		.croag {
			position:fixed;
			z-index:9999;
			pointer-events: none;
		}
		.croag1 {
			top: 15%
		}
		.croag2 {
			top: 40%
		}
		.croag3 {
			top: 65%
		}
		.croag4 {
			top: 90%
		}
		.croagimg {
			width: 169px !important;
			height: 68px !important;
		}
		@media (max-width: 992px) {
			.croagimg {
				width: 100px !important;
				height: 40px !important;
			}
		}
	</style>

	<marquee class="croag croag1" direction="left" scrollamount=10 width="100%">
		<img alt="croag" class="croagimg mirrored" src="/i/PCM/croag.webp?v=2000">
	</marquee>

	{% if p.award_count("croag", v) > 1 %}
		<marquee class="croag croag2" direction="right" scrollamount=10 width="100%">
			<img alt="croag" class="croagimg" src="/i/PCM/croag.webp?v=2000">
		</marquee>
	{% endif %}

	{% if p.award_count("croag", v) > 2 %}
		<marquee class="croag croag3" direction="left" scrollamount=10 width="100%">
			<img alt="croag" class="croagimg mirrored" src="/i/PCM/croag.webp?v=2000">
		</marquee>
	{% endif %}

	{% if p.award_count("croag", v) > 3 %}
		<marquee class="croag croag4" direction="right" scrollamount=10 width="100%">
			<img alt="croag" class="croagimg" src="/i/PCM/croag.webp?v=2000">
		</marquee>
	{% endif %}
{% endif %}


{% if p.award_count("scooter", v) %}
	<style>
		.scooterimg {
			width: 100px !important;
			height: 135px !important;
		}
		@media (max-width: 992px) {
			.scooterimg {
				width: 40px !important;
				height: 54px !important;
			}
		}
	</style>
	<marquee class="train train3" direction="right" scrollamount=10 width="100%">
		<img alt=":#marseyscooter:" class="scooterimg" src="/e/marseyscooter.webp">
	</marquee>

	{% if p.award_count("scooter", v) > 1 %}
		<marquee class="train train4" direction="left" scrollamount=10 width="100%">
			<img alt=":#marseyscooter:" class="scooterimg mirrored" src="/e/marseyscooter.webp">
		</marquee>
	{% endif %}

	{% if p.award_count("scooter", v) > 2 %}
		<marquee class="train train1" direction="right" scrollamount=10 width="100%">
			<img alt=":#marseyscooter:" class="scooterimg" src="/e/marseyscooter.webp">
		</marquee>
	{% endif %}

	{% if p.award_count("scooter", v) > 3 %}
		<marquee class="train train2" direction="left" scrollamount=10 width="100%">
			<img alt=":#marseyscooter:" class="scooterimg mirrored" src="/e/marseyscooter.webp">
		</marquee>
	{% endif %}
{% endif %}



{% if p.award_count("tilt", v) %}
	<style>
		@keyframes post-tilt {
			0% {transform: rotate(0deg);}
			25% {transform: rotate({{p.award_count("tilt", v)}}deg);}
			75% {transform: rotate(-{{p.award_count("tilt", v)}}deg);}
			100% {transform: rotate(0deg);}
		}
		@media (max-width: 720px) {
			@keyframes post-tilt {
				0% {transform: rotate(0deg);}
				25% {transform: rotate({{p.award_count("tilt", v)/4}}deg);}
				75% {transform: rotate(-{{p.award_count("tilt", v)/4}}deg);}
				100% {transform: rotate(0deg);}
			}
		}
		#post-root {
			animation-name: post-tilt;
			animation-duration: 60s !important;
			animation-iteration-count: infinite !important;
			animation-direction: alternate !important;
			animation-timing-function: linear !important;
		}
	</style>
{% endif %}


<meta charset="utf-8">
<meta property="og:type" content="article">
<meta property="og:site_name" content="{{SITE}}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="{{SITE_FULL}}">

{% if not v_forbid_deleted -%}
	<meta property="og:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb%}{{p.thumb_url}}{% else %}{{SITE_FULL}}{{'site_preview.webp' | asset_siteimg}}{% endif %}">
	{% if p.is_video %}
		<meta property="og:video" content="{{p.realurl(v)}}">
	{% elif p.is_audio %}
		<meta property="og:audio" content="{{p.realurl(v)}}">
	{% endif %}
	<meta name="twitter:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb%}{{p.thumb_url}}{% else %}{{SITE_FULL}}{{'site_preview.webp' | asset_siteimg}}{% endif %}">
{% endif %}


{% if comment_info and not comment_info.is_banned and not comment_info.deleted_utc %}
	<title>{{'@'+comment_info.author_name}} comments on "{{p.plaintitle(v)}} - {{SITE_NAME}}"</title>

	<meta property="og:author" content="{{'@'+comment_info.author_name}}">
	<meta property="og:description" name="description" content="{{comment_info.plainbody(v)}}">
	<meta property="og:title" content="{{'@'+comment_info.author_name}} comments on {{p.plaintitle(v)}} - {{SITE_NAME}}">
	<meta property="og:url" content="{{comment_info.permalink}}">

	<meta property="article:author" content="{{'@'+comment_info.author_name}}">
	<meta property="article:published_time" content="{{comment_info.created_datetime}}">
	{% if comment_info.edited_utc %}
		<meta property="article:modified_time" content="{{comment_info.edited_string}}">
	{% endif %}

	<meta name="twitter:title" content="{{'@'+comment_info.author_name}} comments on {{p.plaintitle(v)}} - {{SITE_NAME}}">
	<meta name="twitter:creator" content="{{'@'+comment_info.author_name}}">
	<meta name="twitter:description" content="{{comment_info.plainbody(v)}}">
	<meta name="twitter:url" content="{{comment_info.permalink}}">
{% else %}
	<title>{{p.plaintitle(v)}} - {{SITE_NAME}}</title>

	<meta property="og:author" name="author" content="{{'@'+p.author_name}}">
	<meta property="og:description" name="description" content="{{p.plainbody(v)}}">
	<meta property="og:title" content="{{p.plaintitle(v)}} - {{SITE_NAME}}">
	<meta property="og:url" content="{{p.permalink}}">

	<meta property="article:author" content="{{'@'+p.author_name}}">
	<meta property="article:published_time" content="{{p.created_datetime}}">
	{% if p.edited_utc %}
		<meta property="article:modified_time" content="{{p.edited_string}}">
	{% endif %}

	<meta name="twitter:title" content="{{p.plaintitle(v)}} - {{SITE_NAME}}">
	<meta name="twitter:creator" content="{{'@'+p.author_name}}">
	<meta name="twitter:description" content="{{p.plainbody(v)}}">
	<meta name="twitter:url" content="{{p.permalink}}">
{%- endif %}
{% endblock %}

{% block pagetype %}thread{% endblock %}

{% block actionsModal %}

{% if v %}
	<div class="modal fade d-md-none" id="actionsModal" tabindex="-1" role="dialog" aria-labelledby="actionsModalTitle" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered" role="document">
			<div class="modal-content">
				<div class="modal-header p-3">
					<h5 class="col modal-title text-center h6">More options</h5>
					<button class="close position-absolute py-3" style="right: 1rem"data-bs-dismiss="modal" aria-label="Close">
						<span aria-hidden="true"><i class="fas fa-times-circle text-gray-500"></i></span>
					</button>
				</div>
				<div class="modal-body">
					<ul class="list-group post-actions">
						{% if v.id==p.author_id %}
							<button class="nobackground btn btn-link btn-block btn-lg text-left text-muted" data-bs-dismiss="modal" onclick="togglePostEdit('{{p.id}}')"><i class="far fa-edit text-center text-muted mr-2"></i>Edit</button>
						{% elif p.body %}
							<button class="nobackground btn btn-link btn-block btn-lg text-left text-muted" data-bs-dismiss="modal" onclick="expandMarkdown('{{p.id}}','p')"><i class="fas text-expand-icon-{{p.id}} fa-expand-alt text-center mr-2"></i><span class="expand-text-p-{{p.id}}">View source</span></button>
						{% endif %}

						{% include "post_actions_mobile.html" %}
					</ul>
				</div>
			</div>
		</div>
	</div>
{% endif %}

{% if v and v.admin_level >= PERMS['POST_COMMENT_MODERATION_TOOLS_VISIBLE'] %}
	{% include "post_admin_actions_mobile.html" %}
{% endif %}

{% endblock %}

{% block content %}

{% if SITE == 'pcmemes.net' %}
	{% set cc='SPLASH MOUNTAIN' %}
{% else %}
	{% set cc='COUNTRY CLUB' %}
{% endif %}

<div class="row mb-3">

	<div id="post-root" class="col-12">

		<div class="card border-0 mt-3 {% if p.stickied %}stickied{% endif %} {% if voted==1 %}upvoted{% elif voted==-1 %} downvoted{% endif %}">
			<div id="post-{{p.id}}" class="actual-post {% if p.is_banned %}banned{% endif %} {% if p.deleted_utc %}deleted {% endif %} {% if p.award_count('tilt', v) %}p-3{% endif %} {% if p.award_count('glowie', v) %}glow{% endif %} d-flex flex-row-reverse flex-nowrap justify-content-end">

				{% if not p.is_image and p.thumb_url and not p.embed_url %}
				<div class="card-header bg-transparent border-0 d-none d-md-flex flex-row flex-nowrap pl-3 p-0">
					<a rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}" style="height: fit-content"{% if not v or v.newtabexternal %}target="_blank"{% endif %}><img loading="lazy" src="{{p.thumb_url}}" class="post-img d-none d-md-block" alt="Unable to load image"></a>
				</div>
				{% endif %}

				<div id="post-content" class="card-block w-100 my-md-auto">

					<div class="post-meta text-left mb-2">
						{% if p.sub %}
							{% if not HOLE_STYLE_FLAIR -%}
								<a href='/h/{{p.sub}}'>/h/{{p.sub}}</a>&nbsp;&nbsp;
							{%- else -%}
								<a href='/h/{{p.sub}}' class="sub-flair">{{p.sub|capitalize}}</a>
							{%- endif %}
						{% endif %}

						{% if p.sub and p.author.exiled_from(p.sub) %}
							<a><i class="fas fa-campfire text-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="User has been exiled from /h/{{p.sub}}"></i></a>
						{% endif %}
				
						{% if p.bannedfor %}
							<i class="fas fa-hammer-crash text-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="User was banned for this post {{p.bannedfor}}"></i>
						{% endif %}

						{% for a in p.awards %}
							<i class="{{a.class_list}} px-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{a.title}} Award given by @{{a.user.username}}"></i>
						{% endfor %}

						{% if v and v.admin_level >= PERMS['USER_SHADOWBAN'] and p.author.shadowbanned %}<i class="fas fa-user-times text-admin" data-bs-toggle="tooltip" data-bs-placement="bottom" title='Shadowbanned by @{{p.author.shadowbanned}} for "{{p.author.ban_reason}}"'></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="Pinned by @{{p.stickied}}" {% if p.stickied_utc %}onmouseover="pinned_timestamp('pinned-{{p.id}}')" data-timestamp={{p.stickied_utc}} {% endif %}></i>
						{% endif %}

						{% if p.hole_pinned %}
							<i id='hole-pinned-{{p.id}}' class="fas fa-thumbtack fa-rotate--45 text-blue" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Pinned to /h/{{p.sub}} by @{{p.hole_pinned}}"></i>
						{% endif %}

						{% if p.is_pinned %}<i class="fas fa-thumbtack fa-rotate--45 fa-fw text-admin" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Pinned to profile"></i>{% endif %}
						{% if p.distinguish_level %} <i class="fas fa-broom text-admin" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{SITE_NAME}} Admin, speaking officially"></i>{% endif %}
						{% if p.is_bot %} <i class="fas fa-robot text-info" data-bs-toggle="tooltip" data-bs-placement="bottom"	title="Bot"></i>{% endif %}
						{% if p.over_18 %}<span class="badge badge-danger text-small-extra mr-1">+18</span>{% endif %}
						{% if p.private %}<span class="badge border-warning border-1 text-small-extra">Draft</span>{% endif %}
						{% if p.active_flags(v) %}<a class="btn btn-primary" role="button" style="padding:1px 5px; font-size:10px"onclick="document.getElementById('flaggers').classList.toggle('d-none')">{{p.active_flags(v)}} Report{{help.plural(p.active_flags(v))}}</a>{% endif %}

						{% if p.ghost %}
							<span {% if p.distinguish_level %}class="mod"{% endif %}>👻</span>
						{% else %}
							{% if FEATURES['PATRON_ICONS'] and p.author.patron %}
								<img loading="lazy" src="/i/{{SITE_NAME}}/patron_badges/2{{p.author.patron}}.webp?v=1" height="20" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.patron_tooltip}}" alt="{{p.author.patron_tooltip}}">
							{% endif %}

							{% if FEATURES['HOUSES'] and p.author.house %}
								<img loading="lazy" src="/i/{{SITE_NAME}}/houses/{{p.author.house}}.webp?v=2000" height="20" data-bs-toggle="tooltip" data-bs-placement="bottom" title="House {{p.author.house}}" alt="House {{p.author.house}}">
							{% endif %}

							{% if p.author.verified %}<i class="fas fa-badge-check align-middle ml-1 {% if p.author.verified=='Glowiefied' %}glow{% endif %}" style="color:{% if p.author.verifiedcolor %}#{{p.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.verified}}"></i>
							{% endif %}
							<a class="user-name text-decoration-none" href="{{p.author.url}}" data-pop-info='{{p.author.json_popover(v) | tojson}}' onclick='popclick(event)' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="click" data-content-id="popover" role="button" tabindex="0" style="color: #{{p.author.name_color}}; font-weight: bold"class="user-name">
								<div class="profile-pic-30-wrapper">
									<img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-30 mr-2">
									{% if p.author.hat_active -%}
										<img class="profile-pic-30-hat hat" loading="lazy" src="{{p.author.hat_active}}?h=7" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.hat_tooltip(v)}}">
									{%- endif %}
								</div>
								<span {% if p.author.patron and not p.distinguish_level %}class="patron" style="background-color:#{{p.author.name_color}};"{% elif p.distinguish_level %}class="mod"{% endif %}>{{p.author_name}}</span>
							</a>
							{% if FEATURES['PRONOUNS'] %}
								<span class="pronouns" style="color:#{{p.author.titlecolor}};border-color:#{{p.author.titlecolor}}">{{p.author.pronouns}}</span>
							{% endif %}
							{% if p.author.customtitle %}
								&nbsp;<bdi style="color: #{{p.author.titlecolor}}">&nbsp;{{p.author.customtitle | safe}}</bdi>
							{% endif %}
						{% endif %}
						<span data-bs-toggle="tooltip" data-bs-placement="bottom" id="timestamp" onmouseover="timestamp('timestamp','{{p.created_utc}}')">&nbsp;{{p.age_string}}</span>
						({% if p.is_image %}image post{% elif p.is_video %}video post{% elif p.is_audio %}audio post{% elif p.domain %}<a href="/search/posts/?q=domain%3A{{p.domain}}&sort=new&t=all" class="post-meta-domain" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>{{p.domain|truncate(50, True)}}</a>{% else %}text post{% endif %})

						{% if p.edited_utc %}
							&nbsp;&nbsp;Edited <span data-bs-toggle="tooltip" data-bs-placement="bottom" onmouseover="timestamp('edited_timestamp','{{p.edited_utc}}')" id="edited_timestamp">{{p.edited_string}}</span>
						{% endif %}
						&nbsp;&nbsp;{{p.views}} thread views
					</div>
					{% if p.active_flags(v) %}
					<div id="flaggers" class="flaggers d-none">
						<strong><i class="far fa-fw fa-flag"></i> Reported by:</strong>
						<pre></pre>
						<ul style="padding-left:20px; margin-bottom: 0;word-wrap:break-word">
							{% for f in p.filtered_flags(v) %}
								<li><a style="font-weight:bold" href="{{f.user.url}}">{{f.user.username}}</a>{% if f.reason %}: {{f.realreason(v) | safe}}{% endif %} {% if v and v.admin_level >= PERMS['FLAGS_REMOVE'] %}<a role="button" onclick="post_toast(this,'/del_report/post/{{f.post_id}}/{{f.user_id}}')">[remove]</a>{% endif %}</li>
							{% endfor %}
						</ul>
					</div>
					{% endif %}
					{% if p.realurl(v) and not v_forbid_deleted %}
						<h1 id="post-title" class="card-title post-title text-left mb-md-3 {% if p.author.agendaposter and p.sub != 'chudrama' %}agendaposter{% endif %}">
								<a {% if p.author.rainbow %}class="rainbow-text"{% endif %} {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}">
								{% if p.club %}<span class="patron font-weight-bolder mr-1" style="background-color:red; font-size:12px; line-height:2;">{{CC}}</span>{% endif %}
								{% if p.flair %}<span class="patron font-weight-bolder mr-1" style="background-color:var(--primary); font-size:12px; line-height:2;">{{p.flair | safe}}</span>{% endif %}
								{{p.realtitle(v) | safe}}
							</a>
						</h1>
					{% else %}
						<h1 id="post-title" class="card-title post-title text-left mb-md-3 {% if p.author.agendaposter and p.sub != 'chudrama' %}agendaposter{% endif %} {% if p.author.rainbow %}rainbow-text{% endif %}">
							{% if p.club %}<span class="patron font-weight-bolder mr-1" style="background-color:red; font-size:12px; line-height:2;">{{CC}}</span>{% endif %}
							{% if p.flair %}<span class="patron font-weight-bolder mr-1" style="background-color:var(--primary); font-size:12px; line-height:2;">{{p.flair | safe}}</span>{% endif %}
							{{p.realtitle(v) | safe}}
						</h1>
					{% endif %}

					{% if not v_forbid_deleted %}
					<div id="post-body" class="post-body mt-3">
						{% if p.realurl(v) %}
							{% if not p.embed_url and not p.is_image %}
								<a rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>
									<div class="d-flex {% if p.is_video or p.is_audio %}d-md-none{% endif %} justify-content-between align-items-center border rounded p-2 mb-3">
										<span>{{p.realurl(v)}}</span>
										<i class="fas fa-external-link-alt text-small"></i>
									</div>
								</a>
							{% endif %}
						{% endif %}


						{% if p.embed_url %}
							{% if p.domain == "twitter.com" %}
								{{p.embed_url | safe}}
								{% if v and v.theme.split("_")[0] in ["light", "coffee", "4chan"] %}
									<script defer src="{{'js/twitterlight.js' | asset}}"></script>
								{% else %}
									<script defer src="{{'js/twitter.js' | asset}}"></script>
								{% endif %}
							{% elif p.domain in ['youtu.be','youtube.com'] and p.embed_url and p.embed_url.startswith('<lite-youtube') %}
								{{p.embed_url | safe}}
							{% endif %}
						{% endif %}

						
						<div id="post-text" class="{% if p.author.agendaposter and p.sub != 'chudrama' %}agendaposter{% endif %} {% if p.author.rainbow %}rainbow-text{% endif %}">
							{% if p.is_image %}
								<div class="row no-gutters">
									<div class="col">
										<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}">
											<img onclick="expandDesktopImage()" src="{{p.realurl(v)}}" class="img-fluid" style="max-height:500px" alt="Unable to load image">
										</a>
									</div>
								</div>
								<pre></pre>
							{% elif p.is_video %}
								<div class="row no-gutters">
									<div class="col">
										<video controls preload="metadata">
											<source src="{{p.realurl(v)}}">
										</video>
									</div>
								</div>
								<pre></pre>
							{% elif p.is_audio %}
								<div class="row no-gutters">
									<div class="col">
										<audio controls preload="metadata" src="{{p.realurl(v)}}"></audio>
									</div>
								</div>
								<pre></pre>
							{% endif %}
							{{p.realbody(v) | safe}}

							{% if p.is_banned and p.ban_reason %}
								<div class="text-removed mb-0">removed by @{{p.ban_reason}} (Admin)</div>
							{% endif %}

						</div>
					</div>
					{% else %}
					<div id="post-body" class="post-body mt-3">
						<div id="post-text"><code>[Deleted by author.]</code></div>
					</div>
					{% endif %}

					{% if v and (v.id==p.author_id or v.admin_level >= PERMS['POST_EDITING']) and not v.is_suspended %}
						<div id="edit-post-body-{{p.id}}" class="d-none comment-write collapsed child">
							<form id="post-edit-form-{{p.id}}" action="/edit_post/{{p.id}}" method="post" enctype="multipart/form-data">
									<input type="hidden" name="formkey" value="{{v.formkey}}">
									<input type="hidden" name="current_page" value="{{request.path}}">
									<textarea autocomplete="off" max-length="500" name="title" class="comment-box form-control rounded" required placeholder="title">{{p.title}}</textarea>
									<textarea autocomplete="off" name="body" {% if v.longpost %}minlength="280"{% endif %} maxlength="{% if v.bird %}140{% else %}20000{% endif %}" data-preview="post-edit-{{p.id}}" oninput="markdown(this);charLimit('post-edit-box-{{p.id}}','charcount-post-edit')" id="post-edit-box-{{p.id}}" form="post-edit-form-{{p.id}}" class="comment-box form-control rounded" aria-label="With textarea" placeholder="Add text to your post..." rows="10" data-id="{{p.id}}">{{p.body}}</textarea> 
									
									<div class="text-small font-weight-bold mt-1" id="charcount-post-edit" style="right: 1rem; bottom: 0.5rem; z-index: 3;"></div>

									<div class="comment-format">
										<small class="format btn btn-secondary"><i class="fas fa-bold" aria-hidden="true" onclick="makeBold('post-edit-box-{{p.id}}')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Bold"></i></small> 
										<a class="format btn btn-secondary" role="button"><i class="fas fa-italic" aria-hidden="true" onclick="makeItalics('post-edit-box-{{p.id}}')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Italicize"></i></a> 
										<a class="format btn btn-secondary" role="button"><i class="fas fa-quote-right" aria-hidden="true" onclick="makeQuote('post-edit-box-{{p.id}}')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Quote"></i></a>
										<a class="format btn btn-secondary" role="button"><span class="font-weight-bolder text-uppercase" onclick="commentForm('post-edit-box-{{p.id}}');getGif()" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF">GIF</span></a>
										<div onclick="loadEmojis('post-edit-box-{{p.id}}')" class="format btn btn-secondary" role="button" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></div>	

										<label class="format btn btn-secondary m-0 ml-1 {% if v %}d-inline-block{% else %}d-none{% endif %}" for="file-upload-edit-{{p.id}}">
											<div id="filename-show-edit-{{p.id}}"><i class="fas fa-file"></i></div>
											<input autocomplete="off" id="file-upload-edit-{{p.id}}" accept="image/*, video/*, audio/*" type="file" multiple="multiple" name="file" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} onchange="changename('filename-show-edit-{{p.id}}','file-upload-edit-{{p.id}}')" hidden>
										</label>
						
										<small class="format d-none"><i class="fas fa-link" aria-hidden="true"></i></small> 
								</div>
								<button form="post-edit-form-{{p.id}}" class="btn btn-primary ml-2 fl-r" onclick="disable(this);remove_dialog()">Save Edit</button>
								<a role="button" onclick="togglePostEdit('{{p.id}}');remove_dialog()" class="btn btn-link text-muted ml-auto cancel-form fl-r">Cancel</a> 
							</form>
							<div id="post-edit-{{p.id}}" class="preview mb-3 mt-5"></div>
							<div class="form-text text-small p-0 m-0"><a href="/formatting" {% if v and v.newtab and not g.webview %}target="_blank"{% endif %}>Formatting help</a></div>
						</div>
					{% endif %}

							{% if p.embed_url and "http" not in p.embed_url and "<" not in p.embed_url %}
								<div id="crosspost-embed" class="mb-3">
									<div class="row no-gutters">
										<div id="frontpage" class="col-12 pt-0">
											<div class="posts" id="posts">
												{{p.embed_url | post_embed(v) | safe}}
											</div>
										</div>
									</div>
								</div>
							{% endif %}
							<div class="d-none d-md-flex justify-content-between align-items-center mt-2">
								<div class="post-actions mt-2">
				<ul class="list-inline text-right d-flex">

						<li class="list-inline-item">
							<a {% if v and v.newtab and not g.webview %}target="_blank"{% endif %} href="{{p.permalink}}">
								<i class="fas fa-comment-dots"></i>{{p.comment_count}}
								<span class="text-info d-none {{p.id}}-new-comments"></span>
							</a>
						</li>

						{% if v and (v.id==p.author_id or v.admin_level >= PERMS['POST_EDITING']) %}
							<a class="list-inline-item" role="button" onclick="togglePostEdit('{{p.id}}')"><i class="fas fa-edit"></i>Edit</a>
						{% endif %}

						{% if v and v.id != p.author_id and p.body and not v_forbid_deleted %}
							<a class="list-inline-item" role="button" onclick="expandMarkdown('{{p.id}}','p')"><i class="fas text-expand-icon-{{p.id}} fa-expand-alt"></i><span class="expand-text-p-{{p.id}}">View source</span></a>
						{% endif %}

						{% include 'post_actions.html' %}
					</ul>
						</div>

						</div>

					</div>
					
					{% if v %}

					<div id="voting" class="voting d-none d-md-block mb-auto">
						<div tabindex="0" role="button" onclick="vote('post', '{{p.id}}', '1')" class="post-{{p.id}}-up mx-auto arrow-up upvote-button post-{{p.id}}-up {% if voted==1 %}active{% endif %}"></div>

						<span class="post-score-{{p.id}} score post-score-{{p.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}{% if p.controversial %} controversial{% endif %}" data-bs-toggle="tooltip" data-bs-placement="right" title="+{{ups}} | -{{downs}}"style="cursor: default">{{score}}</span>
						<div {% if DISABLE_DOWNVOTES %}style="display:None!important"{% endif %} tabindex="0" role="button" onclick="vote('post', '{{p.id}}', '-1')" class="post-{{p.id}}-down text-muted mx-auto arrow-down downvote-button post-{{p.id}}-down {% if voted==-1 %}active{% endif %}"></div>
					</div>

					{% else %}

					<div id="voting" class="voting d-none d-md-block mb-auto">
						<div tabindex="0" role="button" class="post-{{p.id}}-up arrow-up mx-auto" onclick="location.href='/login?redirect={{request.path | urlencode}}';">
						</div>
						<span class="post-{{p.id}}-score-none score text-muted{% if p.controversial %} controversial{% endif %}"{% if not p.is_banned %} data-bs-toggle="tooltip" data-bs-placement="right" title="+{{ups}} | -{{downs}}"{% endif %}style="cursor: default">{{score}}</span>
						<div {% if DISABLE_DOWNVOTES %}style="display:None!important"{% endif %} tabindex="0" role="button" onclick="vote('post', '{{p.id}}', '-1')" class="post-{{p.id}}-down arrow-down mx-auto" onclick="location.href='/login?redirect={{request.path | urlencode}}';"></div>
					</div>

					{% endif %}

				</div>




			</div>

		</div>
	</div>

 <div class="row mb-3 d-md-none">
	<div class="col-12">

		<div class="post-actions">
			<ul class="list-inline text-right d-flex">

				<li class="list-inline-item mr-auto">
					<a href="{{p.permalink}}">
						<i class="fas fa-comment-dots"></i>{{p.comment_count}}
						<span class="text-info d-none {{p.id}}-new-comments"></span>
					</a>

					{% if v and v.admin_level >= PERMS['POST_COMMENT_MODERATION_TOOLS_VISIBLE'] %}
						<a class="ml-2" role="button" data-bs-toggle="modal" data-bs-target="#adminModal-{{p.id}}">
							<i class="fas fa-broom"></i>
						</a>
					{% endif %}
				</li>

				{% if v %}
				<li class="list-inline-item">
					<a role="button" data-bs-toggle="modal" data-bs-target="#actionsModal">
						<i class="fas fa-ellipsis-h"></i>
					</a>
				</li>
				{% endif %}
				<li id="voting-{{p.id}}-mobile" class="voting list-inline-item d-md-none{% if voted==1 %} upvoted{% elif voted==-1 %} downvoted{% endif %}">
					{% if v %}
						<span tabindex="0" role="button" onclick="vote('post-mobile', '{{p.id}}', '1')" class="post-mobile-{{p.id}}-up mx-0 pr-1 arrow-up upvote-button post-{{p.id}}-up {% if voted==1 %}active{% endif %}">
						</span>
					{% else %}
						<span tabindex="0" class="arrow-{{p.id}}-mobile-up mx-0 pr-1 arrow-mobile-up" onclick="location.href='/login?redirect={{request.path | urlencode}}';">
							<i class="fas fa-arrow-alt-up mx-0" aria-hidden="true"></i>
						</span>
					{% endif %}

					<span class="post-mobile-score-{{p.id}} score post-score-{{p.id}} {% if voted==1 %}score-up{% elif voted==-1%}score-down{% endif %}{% if p.controversial %} controversial{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="+{{ups}} | -{{downs}}"style="cursor: default">{{score}}</span>

					{% if v %}
						<span {% if DISABLE_DOWNVOTES %}style="display:None!important"{% endif %} tabindex="0" role="button" onclick="vote('post-mobile', '{{p.id}}', '-1')" class="post-mobile-{{p.id}}-down mx-0 pl-1 my-0 arrow-down downvote-button post-{{p.id}}-down {% if voted==-1 %}active{% endif %}"></span>
					{% else %}
						<span {% if DISABLE_DOWNVOTES %}style="display:None!important"{% endif %} tabindex="0" class="arrow-{{p.id}}-mobile-down arrow-mobile-down mx-0 pl-1 my-0" onclick="location.href='/login?redirect={{request.path | urlencode}}';">
							<i class="fas fa-arrow-alt-down mx-0" aria-hidden="true"></i>
						</span>
					{% endif %}
				</li>
			</ul>
		</div>

	</div>

</div>

{% if v and v.id != p.author_id and p.body and not v_forbid_deleted %}
	<div autocomplete="off" class="markdown d-none card border my-2 p-3 comment-box form-control rounded" id="markdown-{{p.id}}" readonly>{{p.body.strip()}}</div> 
{% endif %}

<div class="row border-md-0 comment-section pb-3">
	<div class="col border-top">
		<div class="comments-count py-3">
			<div class="dropdown dropdown-actions">
				<button class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					{% if sort=="hot" %}<i class="fas fa-fire mr-1"></i>{% endif %}
					{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up mr-1"></i>{% endif %}
					{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down mr-1"></i>{% endif %}
					{% if sort=="new" %}<i class="fas fa-sparkles mr-1"></i>{% endif %}
					{% if sort=="old" %}<i class="fas fa-book mr-1"></i>{% endif %}
					{% if sort=="controversial" %}<i class="fas fa-bullhorn mr-1"></i>{% endif %}
					{{sort | capitalize}}
				</button>
				<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
					{% if sort != "hot" %}<a class="dropdown-item" href="?sort=hot"><i class="fas fa-fire mr-2"></i>Hot</a>{% endif %}
					{% if sort != "top" %}<a class="dropdown-item" href="?sort=top"><i class="fas fa-arrow-alt-circle-up mr-2"></i>Top</a>{% endif %}
					{% if sort != "bottom" %}<a class="dropdown-item" href="?sort=bottom"><i class="fas fa-arrow-alt-circle-down mr-2"></i>Bottom</a>{% endif %}
					{% if sort != "new" %}<a class="dropdown-item" href="?sort=new"><i class="fas fa-sparkles mr-2"></i>New</a>{% endif %}
					{% if sort != "old" %}<a class="dropdown-item" href="?sort=old"><i class="fas fa-book mr-2"></i>Old</a>{% endif %}
					{% if sort != "controversial" %}<a class="dropdown-item" href="?sort=controversial"><i class="fas fa-bullhorn mr-2"></i>Controversial</a>{% endif %}
				</div>
				{% if comment_info and p.comment_count >= 2%}
					<pre></pre>
					<div class="total"><a href="{{p.permalink}}">View entire discussion</a></div>
				{% endif %}
			</div>
		</div>

	{% if v %}
		<div id="comment-form-space-{{p.fullname}}" class="comment-write mb-3">
			<form id="reply-to-{{p.fullname}}" action="/comment" method="post">
				<input type="hidden" name="formkey" value="{{v.formkey}}">
				<input type="hidden" name="parent_fullname" value="p_{{p.id}}">
				<input autocomplete="off" id="reply-form-submission-{{p.fullname}}" type="hidden" name="submission" value="{{p.id}}">
				<textarea required autocomplete="off" {% if not (p and p.id in ADMIGGERS) %}{% if v.longpost %}minlength="280"{% elif v.bird %}maxlength="140"{% endif %}{% endif %} minlength="1" maxlength="10000" data-preview="form-preview-{{p.fullname}}" oninput="markdown(this);charLimit('reply-form-body-{{p.fullname}}','charcount-reply')" id="reply-form-body-{{p.fullname}}" data-fullname="{{p.fullname}}" class="comment-box form-control rounded" name="body" form="reply-to-{{p.fullname}}" aria-label="With textarea" placeholder="Add your comment..." rows="3"></textarea>

				<div class="text-small font-weight-bold mt-1" id="charcount-reply" style="right: 1rem; bottom: 0.5rem; z-index: 3;"></div>

				<div class="comment-format">
					<a class="btn btn-secondary format d-inline-block m-0" role="button"><i class="fas fa-bold" onclick="makeBold('reply-form-body-{{p.fullname}}')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Bold"></i></a>
					&nbsp;
					<a class="btn btn-secondary format d-inline-block m-0" role="button"><i class="fas fa-italic" onclick="makeItalics('reply-form-body-{{p.fullname}}')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Italicize"></i></a>
					&nbsp;
					<a class="btn btn-secondary format d-inline-block m-0" role="button"><i class="fas fa-quote-right" onclick="makeQuote('reply-form-body-{{p.fullname}}')" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Quote"></i></a>
					&nbsp;
					<label class="btn btn-secondary format d-inline-block m-0" for="gif-reply-btn-{{p.fullname}}">
						<span id="gif-reply-btn-{{p.fullname}}" class="font-weight-bolder text-uppercase" onclick="commentForm('reply-form-body-{{p.fullname}}');getGif()" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add GIF">GIF</span>
					</label> 
					&nbsp;
					<div onclick="loadEmojis('reply-form-body-{{p.fullname}}')" class="btn btn-secondary format d-inline-block m-0" id="emoji-reply-btn-{{p.fullname}}" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></div>	
					&nbsp;
					<label class="format btn btn-secondary m-0 ml-1 {% if v %}d-inline-block{% else %}d-none{% endif %}" for="file-upload-reply-{{p.fullname}}">
						<div id="filename-show-reply-{{p.fullname}}"><i class="fas fa-file"></i></div>
						<input autocomplete="off" id="file-upload-reply-{{p.fullname}}" accept="image/*, video/*, audio/*" type="file" multiple="multiple" name="file" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} onchange="changename('filename-show-reply-{{p.fullname}}','file-upload-reply-{{p.fullname}}')" hidden>
					</label>
				</div>
				<a id="save-reply-to-{{p.fullname}}" role="button" form="reply-to-{{p.fullname}}" class="btn btn-primary text-whitebtn ml-auto fl-r" onclick="post_comment('{{p.fullname}}');remove_dialog()">Comment</a>
			</form>
			<div id="form-preview-{{p.fullname}}" class="preview mb-3 mt-5"></div>
			<div class="form-text text-small p-0 m-0"><a href="/formatting" {% if v and v.newtab and not g.webview %}target="_blank"{% endif %}>Formatting help</a></div>
		</div>
	{% else %}
		<div class="comment-write mb-3">
			<textarea autocomplete="off" maxlength="10000" class="comment-box form-control rounded" name="body" aria-label="With textarea" placeholder="Add your comment..." rows="3" onclick="location.href='/login?redirect={{request.path | urlencode}}';"></textarea>
		</div>
	
		<div class="card border-0 mt-4">
			<div class="card-body">
				<h5 class="card-title">Jump in the discussion.</h5>
				<p class="card-text">No email address required.</p>
				<div>
					<a href="/signup" class="btn btn-primary">Sign up</a>
					<a href="/login?redirect={{request.path | urlencode}}" class="btn btn-link text-muted">Sign in</a>
				</div>
			</div>
		</div>
	{% endif %}

{% if p.replies %}
	<div class="comment-section" id="replies-of-{{p.fullname}}">
		{% with comments=p.replies %}
			{% include "comments.html" %}
		{% endwith %}
	</div>
	
	{% if offset %}
		<script>
			function viewmore(pid,sort,offset,ids) {
				btn = document.getElementById("viewbtn");
				btn.disabled = true;
				btn.innerHTML = "Requesting...";
				const form = new FormData();
				const xhr = new XMLHttpRequest();
				xhr.open("get", `/viewmore/${pid}/${sort}/${offset}?ids=${ids}`);
				xhr.setRequestHeader('xhr', 'xhr');
				xhr.onload=function(){
					if (xhr.status==200) {
						let e = document.getElementById(`viewmore-${offset}`);
						e.innerHTML = xhr.response.replace(/data-src/g, 'src').replace(/data-cfsrc/g, 'src').replace(/style="display:none;visibility:hidden;"/g, '');
						bs_trigger(e)

						comments = JSON.parse(localStorage.getItem("old-comment-counts")) || {}
						lastCount = comments['{{p.id}}']
						if (lastCount)
						{
							{% for c in p.comments %}
								{% if not (v and v.id==c.author_id) and not c.voted %}
									if ({{c.created_utc*1000}} > lastCount.t) 
									try {document.getElementById("comment-{{c.id}}-only").classList.add('unread')}
									catch(e) {}
								{% endif %}
							{% endfor %}
						}
					}
					btn.disabled = false;
				}
				xhr.send(form)
			}
		</script>
	{% endif %}
{% elif not p.replies and p.deleted_utc == 0 %}
	<div class="comment-section text-center py-7" id="replies-of-{{p.fullname}}">
		<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">Be the first to comment!</h2>
		{% if v %}
		<p class="text-muted">This comment section is a ghost town...</p>
		{% else %}
		<p class="text-muted">This comment section is a ghost town. <a href="/login?redirect={{request.path | urlencode}}">Sign in</a></p>
		{% endif %}
	</div>
{% endif %}

</div>

</div>

{% if v and v.id==p.author_id %}
	{% include "delete_post_modal.html" %}
{% endif %}

{% if v %}
	{% include "report_post_modal.html" %}
{% endif %}

{% if v and (v.id == p.author_id or v.admin_level >= PERMS['POST_EDITING']) %}
	<script defer src="{{'js/togglePostEdit.js' | asset}}"></script>
{% endif %}

{% if not v or v.highlightcomments %}
	<script defer src="{{'js/highlightcomments.js' | asset}}"></script>
{% endif %}

{% if v and v.admin_level > 1 %}
	<script defer src="{{'js/pinpost.js' | asset}}"></script>
{% endif %}

<script defer src="{{'js/clipboard.js' | asset}}"></script>

{% if not p.replies %}
	{% include "comments.html" %}
{% endif %}

{% if p.award_count("shit", v) %}
	<script defer src="{{'js/critters.js' | asset}}"></script>
	<script defer src="{{'js/bugs.js' | asset}}"></script>
{% endif %}


{% if p.award_count("fireflies", v) %}
	<script defer src="{{'js/critters.js' | asset}}"></script>
	<script defer src="{{'js/fireflies.js' | asset}}"></script>
{% endif %}


<script>
	(() => {
		{% if not v or v.highlightcomments %}
			document.addEventListener('DOMContentLoaded', function() {
				showNewCommentCounts('{{p.id}}', {{p.comment_count}})
				{% if "?context" not in request.full_path %}
					localStorage.setItem("old-comment-counts", localStorage.getItem("comment-counts"))

					const comments = JSON.parse(localStorage.getItem("comment-counts")) || {}
					const newTotal = {{p.comment_count}} || ((comments['{{p.id}}'] || {c: 0}).c + 1)
					comments['{{p.id}}'] = {c: newTotal, t: Date.now()}
					localStorage.setItem("comment-counts", JSON.stringify(comments))
				{% endif %}
			})
		{% endif %}
	})()
</script>

{% if success %}
	<script>
		history.pushState(null, null, '{{p.permalink}}');
		localStorage.setItem("post-title", "")
		localStorage.setItem("post-text", "")
		localStorage.setItem("post-url", "")
		localStorage.setItem("sub", "")

		localStorage.setItem("post-new", false)
		localStorage.setItem("post-nsfw", false)
		localStorage.setItem("post-private", false)
		localStorage.setItem("post-club", false)
	</script>
{% endif %}


{% if p.award_count("crab", v) %}
	<script>
		let audio = new Audio('/assets/media/crab.mp3');
		audio.loop=true;

		audio.play();
		window.addEventListener('click', () => {
			if (audio.paused) audio.play(); 
		}, {once : true});
	</script>
{% endif %}

{% if fart and not (v and v.has_badge(128)) %}
	<script>
		fart = Math.floor(Math.random() * 5) + 1
		let audio = new Audio(`/assets/images/${fart}.webp`);

		audio.play();
		if (audio.paused) {
			window.addEventListener('click', () => {
				if (audio.paused) audio.play(); 
			}, {once : true})
		}
	</script>
{% endif %}


{% if p.award_count("confetti", v) %}
	<div id="post-award-confetti"></div>
{% endif %}

{% if p.award_count("firework", v) %}
	<script defer src="{{'js/fireworks.js' | asset}}"></script>
	<div class="firework">
		<img src="">
	</div>

	{% if p.award_count("firework", v) > 1 %}
		<div class="firework">
			<img src="">
		</div>
	{% endif %}

	{% if p.award_count("firework", v) > 2 %}
		<div class="firework">
			<img src="">
		</div>
	{% endif %}

	{% if p.award_count("firework", v) > 3 %}
		<div class="firework">
			<img src="">
		</div>
	{% endif %}
{% endif %}

{% if p.award_count("ricardo", v) %}
	<script defer src="{{'js/ricardo.js' | asset}}"></script>
	<div id="ricardo1" class="ricardo ricardoleft">
		<img src="/i/ricardo1.webp">
	</div>

	{% if p.award_count("ricardo", v) > 1 %}
		<div id="ricardo2" class="ricardo">
			<img src="/i/ricardo2.webp" style="max-height:200px">
		</div>
	{% endif %}

	{% if p.award_count("ricardo", v) > 2 %}
		<div id="ricardo3" class="ricardo">
			<img src="/i/ricardo3.webp" style="max-height:150px">
		</div>
	{% endif %}
{% endif %}

{% endblock %}