{% if v %}
	{% include "CHRISTMAS/award_modal.html" %}
{% endif %}

{% for p in listing %}

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

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

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

{% if p.active_flags %}
	<div id="flaggers-{{p.id}}" class="relative mb-5 px-3 py-2 rounded-md bg-red-100 border border-red-200 hidden">
		<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.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>
{% endif %}

<li id="post-{{p.id}}" class="relative p-2.5 md:py-1 md:px-2.5 border-b border-gray-300 dark:border-white/[.05] {% if p.is_banned %}bg-red-200{% elif p.deleted_utc %}bg-yellow-200{% else %} md:bg-transparent bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-white/10 dark:md:bg-transparent{% endif %} {% if p.stickied %} stickied{% endif %}{% if voted==1 %} upvoted{% elif voted==-1 %} downvoted{% endif %}{% if p.over_18 %} nsfw{% endif %} list-none group">

	<div class="flex flex-nowrap items-center">

		<div class="relative z-10 hidden md:flex flex-col flex-shrink-0 items-center mr-4 w-20">

			{% if not postembed %}
			<div class="text-sm text-gray-400 text-center font-bold hidden md:flex space-x-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 %}

					<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="w-6 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="w-6 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>
			{% endif %}
		</div>
		  
		<div class="w-full overflow-x-hidden md:overflow-x-visible">

			<div class="relative z-10 no-scrollbar overflow-y-hidden overflow-x-auto inline-flex items-center space-x-2 text-sm text-gray-500 leading-normal mb-0.5 {% if p.award_count('ghosts') %}ghosts{% endif %}">

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

				{% if p.author.shadowbanned or p.distinguish_level or p.is_bot or p.is_blocking or p.is_blocked or p.author.verified %}
				<span class="flex-shrink-0">
					{% if v and v.admin_level==6 and p.author.shadowbanned %}
					<i class="fas fa-user-times fa-fw fa-sm 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 fa-fw fa-sm text-admin" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="{{'SITE_NAME' | app_config}} Admin, speaking officially"></i>
					{% endif %}
					{% if p.is_bot %}
					<i class="fad fa-robot fa-fw fa-sm text-info" data-bs-toggle="tooltip" data-bs-placement="bottom"	title="" data-bs-original-title="Bot"></i>
					{% endif %}
					{% if p.is_blocking %}
					<i class="fas fa-user-minus fa-fw fa-sm text-yellow-600" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="You're blocking this user, but you can see this post because you're an admin."></i>
					{% endif %}
					{% if p.is_blocked %}
					<i class="fas fa-user-minus fa-fw fa-sm text-red-600" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="This user is blocking you."></i>
					{% endif %}
					{% if p.author.verified %}
					<i class="fas fa-badge-check fa-fw fa-sm" 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>
				{% endif %}

				{% if not p.award_count('ghosts') %}
				<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}};">
						<span class="inline-flex flex-shrink-0 items-center">
							{% if p.author.patron and not p.distinguish_level %}
							<span class="patron flex-shrink-0" style="background-color:#{{p.author.namecolor}};">
								{{p.author.username}}
							</span>
							{% elif p.distinguish_level and request.host == 'rdrama.net' %}
							<span class="mod flex-shrink-0">
								{{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 %}
				{% endif %}
				<span class="flex-shrink-0" onmouseover="timestamp('timestamp-{{p.id}}','{{p.created_utc}}')" data-bs-toggle="tooltip" data-bs-placement="bottom" id="timestamp-{{p.id}}">
					{{p.age_string}}
				</span>

				{% if p.edited_utc %}
					Edited
					<span class="flex-shrink-0" data-bs-toggle="tooltip" data-bs-placement="bottom" id="edited_timestamp-{{p.id}}">{{p.edited_string}}
					</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" class="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 %}

				{% if p.active_flags %}
					<button class="flex-shrink-0 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>
				{% endif %}

				{% if p.bannedfor and p.author.banned_by %}
					<span class="flex-shrink-0">
						<i class="fad fa-gavel fa-fw fa-sm text-red-600" 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>
					</span>
				{% endif %}

				{% if p.flair or p.over_18 or p.club or p.stickied or (p.is_pinned and request.path.startswith('/@')) or p.private or p.awards %}
				<ul class="flex-shrink-0 flex space-x-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('pinned-{{p.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 %}
					<!-- 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 %}
					<!-- 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>
			{% endif %}
			</div>
			
			<h5 class="post-title font-medium text-base leading-5 mb-0.5">
				<a {% if v and v.newtab %}target="_blank"{% endif %} href="{{p.permalink}}" class="{% if p.author.agendaposter %}agendaposter{% endif %} stretched-link text-black dark:text-gray-100 group-hover:text-primary dark:group-hover:text-primary visited:text-gray-700 dark:visited:text-gray-400 break-words" style="word-break: break-word;">
				{{p.realtitle(v) | safe}}
				</a>
			</h5>

			<div class="relative z-10 group-hover:z-20 hidden md:inline-block">
				{% include "CHRISTMAS/submission/SubmissionActions.html" %}
			</div>
	</div>

		<div class="relative z-10 flex flex-row flex-nowrap pl-3 md:pl-5 flex-shrink-0">
			{% if p.club and not (v and (v.paid_dues or v.id == p.author_id)) %}
				<img loading="lazy" src="/assets/images/emojis/marseyglow.webp" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-24 md:h-16 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
			{% 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-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-24 md:h-16 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
				</a>
			{% elif p.is_image %}
				<a href="javascript:void(0)" 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-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-24 md:h-16 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
				</a>
			{% elif p.is_video %}
				<a href="javascript:void(0)" onclick="toggleVideo({{p.id}})">
					<img alt="post thumnail" loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-24 md:h-16 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
				</a>
			{% elif p.is_youtube %}
				<a href="javascript:void(0)" onclick="document.getElementById('video-{{p.id}}').classList.toggle('hidden')">
					<img alt="post thumnail" loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-24 md:h-16 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
				</a>
			{% 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-thumbnail shadow-sm p-[3px] w-20 h-14 md:w-24 md:h-16 object-cover  bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
				</a>
			{% endif %}
		</div>

</div>

	{% if p.realbody(v) and not p.over_18 %}
		<div class="{% if p.author.agendaposter %}agendaposter{% endif %} shadow-inner post-text relative z-10 break-words p-4 bg-gray-100 dark:bg-white/[.06] border border-gray-300 dark:border-gray-900 mt-2 sm:mt-1 mb-1.5 rounded hidden" style="word-break: break-word;" 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 class="md:ml-[4.5rem] mt-4">
	<a target="_blank" rel="nofollow noopener noreferrer" href="{{p.url}}" class="inline-block">
		<img loading="lazy" src="/assets/CHRISTMAS/images/loading.gif" data-src="{{p.url}}" class="shadow-md p-1 bg-white dark:bg-gray-900 w-full md:w-64" alt="Post preview">
	</a>
</div>
{% endif %}

{% if not p.club or v and (v.paid_dues or v.id == p.author_id) and (p.is_video or p.is_youtube) %}
<div class="relative z-10">
	{% if p.is_video %}
		<div id="video-{{p.id}}" class="text-center {% if p.over_18 or not ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}hidden{% endif %} md:ml-[4.5rem] mt-3">
			<video controls loop preload="metadata" class="w-full max-h-[20rem]">
				<source src="{{p.realurl(v)}}" type="video/mp4">
			</video>
		</div>
	{% elif p.is_youtube %}
		<div id="video-{{p.id}}" class="{% if p.over_18 or not ((v and v.cardview) or (not v and environ.get('CARD_VIEW') == '1')) %}hidden{% endif %} md:ml-[4.5rem] mt-3">
			{{p.embed_url | safe}}
		</div>
	{% endif %}
</div>
{% endif %}

<div class="relative z-10 group-hover:z-20 md:hidden pt-2 md:pt-0">
	{% include "CHRISTMAS/submission/SubmissionActionsMobile.html" %}
</div>

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

</li>

{% else %}

{% 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 text-black">No posts here -_-</h2>
	<p class="text-gray-500">
		Looks like there is no content atm.
	</p>
</div>	
{% endif %}

{% endfor %}

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

{% include "CHRISTMAS/expanded_image_modal.html" %}

<script defer src="/static/assets/CHRISTMAS/js/new_comments_count.js?a=1"></script>
<script defer src="/static/assets/CHRISTMAS/js/submission_listing.js?a=7"></script>

<style>
	.mod:before {
		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>