{% extends "CHRISTMAS/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 %}

{% block title %}

{% if 'rama' not in request.host %}
<!-- <script defer>
	function poll_vote(cid) {
		{% if v %}
		var type = document.getElementById(cid).checked;
		var scoretext = document.getElementById('poll-' + cid);
		var score = Number(scoretext.textContent);
		if (type == true) scoretext.textContent = score + 1;
		else scoretext.textContent = score - 1;
		post('/vote/poll/' + cid + '?vote=' + type);
		{% else %}
		var myToast = new bootstrap.Toast(document.getElementById('toast-post-error'));
		myToast.show();
		document.getElementById('toast-post-error-text').innerText = "Only logged-in users can vote!";
		{% endif %}
	}
</script> -->

{% if v %}
<!-- <script defer src="/assets/CHRISTMAS/js/comments_v.js?a=1"></script> -->
{% endif %}

{% endif %}

<meta charset="utf-8" >
<meta property="og:type" content="article" >

{% if comment_info and not comment_info.is_banned and not linked_comment.deleted_utc > 0 %}
<title>{{'@'+comment_info.author.username}} comments on "{{p.plaintitle(v)}} - {{'SITE_NAME' | app_config}}"</title>

<meta property="og:article:author" content="{{'@'+comment_info.author.username}}" >
<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 property="og:description" name="description" content="{{comment_info.plainbody(v)}}" >
<meta property="og:author" name="author" content="{{'@'+comment_info.author.username}}" >
<meta property="og:title" content="{{'@'+comment_info.author.username}} comments on {{p.plaintitle(v)}} - {{'SITE_NAME' | app_config}}" >
<meta property="og:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb%}{{p.thumb_url}}{% else %}{{'SITE_NAME' | app_config}}/assets/CHRISTMAS/images/{{'SITE_NAME' | app_config}}/preview.gif{% endif %}" >
{% if p.url and p.url.lower().endswith('.mp4') %}
<meta property="og:video" content="{{ p.realurl(v) }}" >
{% endif %}
<meta property="og:url" content="{{comment_info.permalink | full_link}}" >
<meta property="og:site_name" content="{{request.host}}" >

<meta name="twitter:card" content="summary" >
<meta name="twitter:site" content="{{request.host_url}}">
<meta name="twitter:title" content="{{'@'+comment_info.author.username}} comments on {{p.plaintitle(v)}} - {{'SITE_NAME' | app_config}}" >
<meta name="twitter:creator" content="{{'@'+comment_info.author.username}}">
<meta name="twitter:description" content="{{comment_info.plainbody(v)}}" >
<meta name="twitter:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb%}{{p.thumb_url}}{% else %}{{'SITE_NAME' | app_config}}/assets/CHRISTMAS/images/{{'SITE_NAME' | app_config}}/preview.gif{% endif %}" >
<meta name="twitter:url" content="{{p.permalink | full_link}}" >

{% if linked_comment.author.is_private %}
<meta name="robots" content="noindex">
{% endif %}

{% else %}
<title>{{p.plaintitle(v)}} - {{'SITE_NAME' | app_config}}</title>


{% if p.author %}<meta property="og:article:author" content="{{'@'+p.author.username}}">{% endif %}
<meta property="article:published_time" content="{{p.created_datetime}}" >
{% if p.edited_utc %}<meta property="article:modified_time" content="{{p.edited_string}}" >{% endif %}
<meta property="og:description" name="description" content="{{p.plainbody(v)}}" >
{% if p.author %}<meta property="og:author" name="author" content="{{'@'+p.author.username}}" >{% endif %}
<meta property="og:title" content="{{p.plaintitle(v)}} - {{'SITE_NAME' | app_config}}" >
<meta property="og:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb%}{{p.thumb_url}}{% else %}{{'SITE_NAME' | app_config}}/assets/CHRISTMAS/images/{{'SITE_NAME' | app_config}}/preview.gif{% endif %}" >
{% if p.url and p.url.lower().endswith('.mp4') %}
<meta property="og:video" content="{{ p.realurl(v) }}" >
{% endif %}
<meta property="og:url" content="{{p.permalink | full_link}}" >
<meta property="og:site_name" content="{{request.host}}" >

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="{{request.host_url}}">
<meta name="twitter:title" content="{{p.plaintitle(v)}} - {{'SITE_NAME' | app_config}}" >
{% if p.author %}<meta name="twitter:creator" content="{{'@'+p.author.username}}">{% endif %}
<meta name="twitter:description" content="{{p.plainbody(v)}}" >
<meta name="twitter:image" content="{% if p.is_image %}{{p.realurl(v)}}{% elif p.has_thumb %}{{p.thumb_url}}{% else %}{{'SITE_NAME' | app_config}}/assets/CHRISTMAS/images/{{'SITE_NAME' | app_config}}/preview.gif{% endif %}" >
<meta name="twitter:url" content="{{p.permalink | full_link}}" >

{% if p.author.is_private %}
<meta name="robots" content="noindex">
{% endif %}

{% endif %}
{% endblock %}

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

{% block subHeader %}
	<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t {% if p.award_count("lights") %}lights{% endif %}">
		<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700"></div>
		<div class="relative col-span-full flex items-center">
			<div>
				<h1 class="font-bold text-xl font-heading leading-normal mb-0">
					Thread
				</h1>
				<ul class="flex space-x-2 text-xs text-gray-500 dark:text-gray-400 leading-normal mb-0">
					<li>
						<a href="/" class="text-gray-500 hover:underline">Home</a>
					</li>
					<li>
						<i class="fas fa-arrow-alt-right text-shadow fa-fw fa-sm"></i>
					</li>
					<li>
						<a href="{{p.permalink}}" class="text-gray-700 dark:text-gray-500 hover:underline">{{p.author.username}}'s post</a>
					<li>
				</ul>
			</div>
		</div>
	</div>
{% endblock %}

{% block content %}

<div class="col-span-full xl:col-span-9">

{% if (p.is_banned and p.ban_reason) or (p.bannedfor and p.author.banned_by) %}
<!-- Non-dismissable Alerts -->
<div class="p-2.5 md:p-0">
	<!-- Removal Reason -->
	{% if p.is_banned and p.ban_reason %}
		<div class="mt-4 mb-0 rounded-lg shadow-lg p-3 text-white bg-red-600 border border-red-900 shadow-inset-t-white-10">
			<i class="fas fa-gavel fa-fw mr-1"></i>
			<span class="font-medium">
				Removed by @{{p.ban_reason}}
			</span>
		</div>
	{% endif %}
	<!-- Banned -->
	{% if p.bannedfor and p.author.banned_by %}
		<div class="mt-4 mb-0 rounded-lg shadow-lg p-3 text-white bg-red-600 border border-red-900 shadow-inset-t-white-10">
			<i class="fas fa-gavel fa-fw mr-1"></i>
			<span class="font-medium">
				Author was banned for this post by
				<a href="/@{{p.author.banned_by.username}}" class="text-white hover:underline">@{{p.author.banned_by.username}}</a>
			</span>
		</div>
	{% endif %}	
</div>
{% endif %}


{% if p.active_flags %}
	<!-- Reports -->
	<div id="flaggers-{{p.id}}" class="mt-4 p-2.5 md:p-0 hidden">
		<div class="relative p-3 rounded-lg bg-red-100 border border-red-200">
			<div class="font-medium uppercase text-sm tracking-wider text-red-700 leading-normal mb-2">
				<i class="fas fa-flag fa-fw mr-2 fa-sm"></i>Reported by:
			</div>
			<ul class="mb-0 flex flex-col space-y-3 divide-y divide-red-300 text-black">
				{% for f in p.ordered_flags %}
					<li class="flex flex-wrap">
						<a class="font-bold text-black hover:text-primary" href="{{f.user.url}}">
							{{f.user.username}}
						</a>
						<p class="pl-1">{% if f.reason %} - {{f.reason | safe}}{% endif %} {% if v.admin_level==6 %}</p>
						<button class="text-red-600 hover:underline" onclick="post_toast('/del_report/p{{ f.id }}')">
							remove
						</button>
						{% endif %}
					</li>
				{% endfor %}
			</ul>
			<button class="absolute top-1 right-3 text-red-400 hover:text-red-700" onclick="document.getElementById('flaggers-{{p.id}}').classList.toggle('hidden')">
				<i class="fas fa-times"></i>
			</button>
		</div>
	</div>
{% endif %}

{% if p.awards or p.over_18 or p.stickied or p.is_pinned or p.private or p.flair or p.club %}
<!-- Mobile post meta, awards, etc -->
<div class="px-2.5 mt-2.5 lg:p-0 block xl:hidden">
	<ul class="flex flex-wrap gap-2 items-center mb-0">
		<!-- Flair -->
		{% if p.flair %}
		<li>
			<span class="badge badge-purple">
				{{p.flair | safe}}
			</span>
		</li>
		{% endif %}
		<!-- NSFW -->
		{% if p.over_18 %}
		<li>
			<span class="badge badge-red">+18</span>
		</li>
		{% endif %}
		<!-- Country Club -->
		{% if p.club %}
		<li>
			<span class="badge badge-yellow">Country Club</span>
		</li>
		{% endif %}
		<!-- Stickied -->
		{% if p.stickied and (p.stickied.startswith('t:') or p.stickied.startswith('j:')) %}
		<li>
			<span id="pinned-{{p.id}}" class="badge badge-pink" data-bs-toggle="tooltip" data-bs-placement="bottom" data-timestamp={{p.stickied[2:]}} onmouseover="pinned_timestamp(this.id)"}>
				<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw"></i>
				Pinned
			</span>
		</li>
		{% elif p.stickied %}
		<li>
			<span id="pinned-{{p.id}}" class="badge badge-pink" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Pinned by @{{p.stickied}}">
				<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw"></i>
				Pinned
			</span>
		</li>
		{% endif %}
		<!-- Pinned -->
		{% if p.is_pinned %}
		<li>
			<span class="badge badge-green">
				<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw"></i>
				Pinned to profile
			</span>
		</li>
		{% endif %}
		<!-- Private -->
		{% if p.private %}
		<li>
			<span class="badge badge-blue">
				<i class="fas fa-lock-alt fa-sm fa-fw1"></i>
				Draft
			</span>
		</li>
		{% endif %}
		<!-- Reports -->
		{% if p.active_flags %}
		<li>
			<button class="badge badge-red" onclick="document.getElementById('flaggers-{{p.id}}').classList.toggle('hidden')">
				<i class="fas fa-gavel fa-sm fa-fw"></i>
				{{p.active_flags}} Reports
			</button>
		</li>
		{% endif %}
		<!-- Awards -->
		{% if p.awards %}
		{% for a in p.awards %}
		<li>
			<i class="{{a.class_list}} fa-sm fa-fw" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{a.title}} Award given by @{{a.user.username}}"></i>
		</li>
		{% endfor %}
		{% endif %}
	</ul>
</div>
{% endif %}

<!-- Post -->
<div id="post-root" class="sm:py-4 my-2.5 sm:my-0">

	<div id="post-{{p.id}}" class="w-full p-2.5 md:p-0 bg-gray-200 dark:bg-gray-800 {% if voted==1 %}upvoted{% elif voted==-1 %}downvoted{% endif %}">
		<div class="{% if p.deleted_utc > 0 %}deleted {% endif %} flex flex-row-reverse flex-nowrap justify-end">

			{% if not p.is_image and p.thumb_url and not p.embed_url %}
			<div class="hidden md:block pl-3 flex-shrink-0">
				<a rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>
					<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0" alt="post thumbnail">
				</a>
			</div>
			{% endif %}

			<div class="w-full">
				<!-- Content -->
				<div id="post-content" class="break-words {% if p.deleted_utc > 0 %}deleted{% endif %}" style="word-break: break-word;">

					{% if p.active_flags %}
					<div id="flaggers" 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 %}

					<!-- Meta information -->
					<div class="no-scrollbar overflow-y-hidden overflow-x-auto flex items-center space-x-2 md:-ml-2 mb-1 text-sm text-gray-500 leading-normal">

						<div class="relative md:hidden flex-shrink-0">
							<img loading="lazy" src="{{ p.author.profile_url }}" class="w-9 h-9 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover" alt="{{ p.author.username }} avatar"/>
						</div>

						{% if v and v.admin_level==6 and p.author.shadowbanned %}
						<span class="flex-shrink-0">
						<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.distinguish_level %}
						<i class="fas fa-broom text-admin" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="{{'SITE_NAME' | app_config}} Admin, speaking officially"></i>
						{% endif %}
						{% if p.is_bot %}
						<i class="fad fa-robot text-info" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Bot"></i>
						{% endif %}
						{% if p.author.verified %}
						<i class="fas fa-badge-check align-middle ml-1" style="color:{% if p.author.verifiedcolor %}#{{p.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="{{p.author.verified}}"></i>
						{% endif %}
						</span>
						<span class="flex-shrink-0">
							<a class="user-name" onclick='userPopover({{p.author.json_popover(v) | tojson}})' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="focus" data-content-id="popover" href="javascript:void(0)" tabindex="0" style="color: #{{p.author.namecolor}}" data-bs-original-title="" title="">
								<span class="inline-flex items-center font-bold">
									{% if p.author.patron and not p.distinguish_level %}
									<span class="patron" style="background-color:#{{p.author.namecolor}};">
										{{p.author.username}}
									</span>
									{% elif p.distinguish_level and 'rama' in request.host %}
									<span class="mod">
										{{p.author.username}}
									</span>
									{% else %}
									{{p.author.username}}
									{% endif %}
								</span>
							</a>
						</span>
						{% if p.author.customtitle %}
						<bdi class="flex-shrink-0" style="color: #{{p.author.titlecolor}}">
							{% if p.author.quadrant %}
								<img loading="lazy" height="20" src="/assets/CHRISTMAS/images/PCM/quadrants/{{p.author.quadrant}}.gif">
							{% endif %}
							{{p.author.customtitle | safe}}
						</bdi>
						{% endif %}

						<span class="flex-shrink-0" data-bs-toggle="tooltip" data-bs-placement="bottom" id="timestamp" onmouseover="timestamp('timestamp','{{p.created_utc}}')">
							{{p.age_string}}
						</span>

						{% if p.edited_utc %}
						<span class="flex-shrink-0 italic">
						Edited
							<span data-bs-toggle="tooltip" data-bs-placement="bottom" onmouseover="timestamp('edited_timestamp','{{p.edited_utc}}')" id="edited_timestamp">
								{{ p.edited_string }}
							</span>
						</span>
						{% endif %}

						{% if p.is_image %}
							<span class="flex-shrink-0">(image post)</span>
						{% elif p.is_video %}
							<span class="flex-shrink-0">(video post)</span>
						{% elif p.realurl(v) %}
							<a class="flex-shrink-0 text-gray-500 hover:underline" href="/search/posts/?q=domain%3A{{p.domain}}&sort=new&t=all" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>
								({{p.domain}})
							</a>
						{% else %}
						<span class="flex-shrink-0">(text post)</span>
						{% endif %}

						<!-- <span>{{p.views}} views</span> -->
					</div>

					<!-- Title -->
					<h1 id="post-title" class="post-title font-medium text-lg md:text-3xl leading-normal mb-2">
						{% if p.realurl(v) %}
						<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}" class="text-black dark:text-gray-200 hover:text-primary" style="word-break: break-word;">
							{{p.realtitle(v) | safe}}
						</a>
						{% else %}
						{{p.realtitle(v) | safe}}
						{% endif %}
					</h1>

					<!-- Body content -->
					<div id="post-body" class="post-body mb-3">
						{% if p.realurl(v) %}
						{% if "streamable.com/" in p.realurl(v) %}
						<div style="width: 100%; height: 0px; position: relative; padding-bottom: 56.250%;"><iframe loading="lazy" src="{{p.realurl(v)}}" frameborder="0" width="100%" height="100%" allowfullscreen="" style="width: 100%; height: 100%; position: absolute;"></iframe></div>
						<pre></pre>
						{% elif "spotify.com/" in p.realurl(v) %}
						{% if "spotify.com/embed/" in p.realurl(v) %}
						{% set streamurl=p.realurl(v) %}
						{% else %}
						{% set streamurl=p.realurl(v).replace("spotify.com", "spotify.com/embed") %}
						{% endif %}
						<iframe loading="lazy" src="{{streamurl}}" width="100%" height="160" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
						<pre></pre>

						{% elif not p.embed_url and not p.is_image and not (p.url and p.url.lower().endswith('.mp4')) %}
						<a rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>
							<div class="flex md:hidden justify-between items-center border border-gray-300 rounded p-2{% if p.realbody(v) %} mb-3{% endif %}">
								<span>{{p.domain|truncate(30, True)}}</span>
								<i class="fas fa-external-link-alt fa-sm fa-fw"></i>
							</div>
						</a>
						{% endif %}
						{% endif %}
						<div id="post-text" class="post-text text-black dark:text-gray-200 {% if p.award_count("candycane") %}candycane{% endif %}">
							{% if p.is_image %}
								<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}">
									<img loading="lazy" src="{{p.realurl(v)}}" class="img-fluid" style="max-height:500px;" alt="Unable to load image">
								</a>
							{% elif p.is_video %}
								<video controls loop preload="metadata" style="max-width: 100%">
									<source src="{{ p.realurl(v) }}" type="video/mp4"/>
								</video>
							{% endif %}

							{{p.realbody(v) | safe}}

							<!-- Polls -->
							{% if p.options.count() %}
								{% include "CHRISTMAS/Poll.html" %}
							{% endif %}

							<!-- Bets -->
							{% if p.bet_options.count() %}
								{% include "CHRISTMAS/Bets.html" %}
							{% endif %}

						</div>

						{% 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 src="/assets/CHRISTMAS/js/twitterlight.js?a=1"></script>
								{% else %}
									<script src="/assets/CHRISTMAS/js/twitter.js?a=1"></script>
								{% endif %}
								<script>document.getElementById('twitter-widget-0').setAttribute('sandbox','')</script>
							{% elif "youtu" in p.domain %}
								{% if 'lite' in p.embed_url %}
									{{p.embed_url | safe}}
								{% else %}
									<div class="embed-responsive embed-responsive-16by9 mb-3">
										<iframe loading="lazy" src="{{p.embed_url}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
									</div>
								{% endif %}
							{% endif %}
						{% endif %}

						{% if p.author.sig_html and (p.author_id == 1904 or not (v and v.sigs_disabled)) %}
							<hr>
							{{p.author.sig_html | safe}}
						{% endif %}
					</div>

					{% if v and (v.id==p.author_id or v.admin_level > 1 and v.admin_level > 2) %}
					<div class="py-2">
						{% include "CHRISTMAS/submission/SubmissionEditForm.html" %}
					</div>
					{% endif %}

					{% if p.embed_url and "http" not in p.embed_url and "<" not in p.embed_url %}
					<div id="crosspost-embed" class="p-2.5 rounded-md bg-gray-300 dark:bg-gray-700 border border-gray-400 dark:border-gray-600">
						<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>

				<!-- Post actions -->
				<div class="hidden md:block pt-4">
					{% include "CHRISTMAS/submission/SubmissionActions.html" %}
				</div>

			</div>

				<!-- Author avatar, post score, and voting buttons -->
				<div class="relative z-10 hidden md:flex flex-col flex-shrink-0 items-center mr-4">

					<div class="relative avatar">
						<img loading="lazy" src="{{p.author.profile_url}}" class="w-14 h-14 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover" alt="author avatar"/>
					</div>

					<div class="py-2 text-sm text-gray-400 text-center font-bold hidden md:block">
					{% 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 %}

						<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="mx-auto arrow-down post-{{p.id}}-down active"></div>
						{% endif %}

						{% 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>

						<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="mx-auto arrow-down downvote-button post-{{p.id}}-down {% if voted==-1 %}active{% endif %}"></div>

						{% 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>

						<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="mx-auto arrow-down" onclick="location.href='/login';"></div>
						{% endif %}
					</div>

				</div>

			</div>

			<div class="md:hidden px-2.5 mt-4">
				{% include "CHRISTMAS/submission/SubmissionActionsMobile.html" %}
			</div>

	</div>

		{% if not p.is_image and not (p.url and p.url.lower().endswith('.mp4')) %}
		<div class="col-span-full">
			<div class="col">
				<a {% if not v or v.newtabexternal %}target="_blank"{% endif %} rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}"></a>
			</div>
		</div>
		{% endif %}
	</div>

	<div class="shadow-inset-t-white-05 bg-gray-200 dark:bg-gray-800 md:border-t md:border-gray-300 dark:md:border-gray-900 py-4 mt-3 md:mt-0">

			<div class="flex flex-wrap justify-between mb-2 px-2.5 md:px-0">
				<div class="md:ml-20 font-bold text-sm">
					<span class="text-black dark:text-gray-300">
						{{ p.comment_count }} {{ 'Response' if p.comment_count == 1 else 'Responses' }}
					</span>
					<!-- Entire thread link -->
					{% if linked_comment and p.comment_count >= 2%}
					<a href="{% if v %}{{ p.permalink }}{% else %}/logged_out/{{p.permalink}}{% endif %}" class="pl-2 text-primary hover:text-red-700">
						View entire thread
					</a>
					{% endif %}
				</div>
				<ul class="flex space-x-3 text-sm text-gray-500 leading-normal mb-0">
					<li>
						<a href="?sort=top" class="{{ 'font-bold text-primary' if sort == 'top' else 'text-gray-500 hover:text-gray-700'}}">
							Top
						</a>
					</li>
					<li>
						<a href="?sort=new" class="{{ 'font-bold text-primary' if sort == 'new' else 'text-gray-500 hover:text-gray-700'}}">
							Latest
						</a>
					</li>
					<li>
						<a href="?sort=old" class="{{ 'font-bold text-primary' if sort == 'old' else 'text-gray-500 hover:text-gray-700'}}">
							Oldest
						</a>
					</li>
					<li>
						<a href="?sort=controversial" class="{{ 'font-bold text-primary' if sort == 'controversial' else 'text-gray-500 hover:text-gray-700'}}">
							Controversial
						</a>
					</li>
					<li>
						<a href="?sort=bottom" class="{{ 'font-bold text-primary' if sort == 'bottom' else 'text-gray-500 hover:text-gray-700'}}">
							Worst
						</a>
					</li>
				</ul>
			</div>

			{% if v %}
			<div id="comment-form-space-{{p.fullname}}" class="comment-write flex px-2.5 md:px-0">
				<div class="hidden md:block relative flex-shrink-0 mr-4">
					<img loading="lazy" src="{{v.profile_url}}" class="w-14 h-14 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover" alt="my avatar"/>
				</div>
				{% include "CHRISTMAS/comments/CommentForm.html" %}
			</div>
			{% endif %}

			{% if not v and not p.is_banned %}
			<div class="comment-write flex mb-3 px-2.5 md:px-0">
				<div class="hidden md:block relative flex-shrink-0 mr-4">
					<div class="flex items-center justify-center w-14 h-14 p-[3px] bg-transparent border border-dashed border-gray-400 object-cover">
						<i class="fas fa-user fa-fw text-gray-400"></i>
					</div>
				</div>
				<div class="w-full">
					<textarea maxlength="10000" class="text-lg sm:text-base appearance-none block w-full rounded shadow-inner p-2 bg-gray-300 dark:bg-gray-700 border border-gray-400 dark:border-gray-600 hover:border-gray-500 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" name="body" aria-label="With textarea" placeholder="Add your comment..." rows="3" onclick="location.href='/login?redirect={{request.path | urlencode}}';"></textarea>
					<div class="flex w-full justify-end mt-2">
						<a href="/login?redirect={{request.path | urlencode}}" class="btn btn-gray">Log in to comment</a>
					</div>
				</div>
			</div>
			{% endif %}

			{% if p.replies %}
			<div class="comment-section px-2.5 md:px-0" id="comment-section">
				{% with comments=p.replies %}
				{% include "CHRISTMAS/comments.html" %}
				{% endwith %}
			</div>
			{% elif not p.replies and p.deleted_utc == 0 %}
			<div class="comment-section px-2.5 md:px-0 text-center py-7">
				<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 %}

			{% if offset %}
				<script src="/assets/CHRISTMAS/js/viewmore.js?a=1"></script>
			{% endif %}

	</div>

	</div>

	{% endblock %}

<!-- Sidebar -->
{% block sidebar %}
	{% include "CHRISTMAS/sidebars/SubmissionSidebar.html" %}
{% endblock %}

{% block modals %}
	{% if v %}
		{% if v.id == p.author_id %}
			{% include "CHRISTMAS/delete_post_modal.html" %}
		{% endif %}

		{% include "CHRISTMAS/report_post_modal.html" %}
		{% include "CHRISTMAS/award_modal.html" %}
		{% include "CHRISTMAS/emoji_modal.html" %}
		{% include "CHRISTMAS/gif_modal.html" %}

		{% if v.admin_level == 6 %}
			{% include "CHRISTMAS/ban_modal.html" %}
		{% endif %}
	{% endif %}

	{% include "CHRISTMAS/modals/ModalSubmissionActions.html" %}
	{% include "CHRISTMAS/expanded_image_modal.html" %}
{% endblock %}

{% block scripts %}
	<!-- This file contains minimal html and javascript required for awards, needs to be near </body> closing tag -->
	{% include "CHRISTMAS/submission/SubmissionAwards.html" %}

	{% if v %}
		<script defer src="/assets/CHRISTMAS/js/vote.js?a=1"></script>
	{% endif %}

	{% if v and (v.id == p.author_id or v.admin_level > 1 and v.admin_level > 2) %}
		<script src="/assets/CHRISTMAS/js/submission.js?a=1"></script>
	{% endif %}

	{% if not v or v.highlightcomments %}
		<script defer src="/assets/CHRISTMAS/js/new_comments_count.js?a=1"></script>
	{% endif %}

	<script defer>
		(() => {
			const date = new Date({{p.created_utc*1000}});
			document.getElementById('timestamp').title = date.toString();
			{% if p.edited_utc %}
			const dateEdited = new Date({{p.edited_utc*1000}});
			document.getElementById('edited_timestamp').title = dateEdited.toString();
			{% endif %}

			{% if (not v or v.highlightcomments) %}
			showNewCommentCounts('{{p.id}}', {{p.comment_count}})
			{% endif %}

			{% if "?context" not in request.full_path %}
			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() }
			window.localStorage.setItem("comment-counts", JSON.stringify(comments))
			{% endif %}

			{% 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>
{% endblock %}