{% set random = range(1,95)|random() %}

<div class="sidebar hidden xl:block xl:col-start-10 xl:col-end-13 flex-shrink-0 py-4">
	<!-- Artwork -->
	<div>
		<a href="/static/assets/images/{{'SITE_NAME' | app_config}}/banners/{{ random }}.webp?a=3" class="block w-full h-64 shadow-sm p-[3px] bg-white dark:bg-gray-900 overflow-hidden">
			<img class="w-full h-full flex-shrink-0 object-contain cursor-pointer" src="/static/assets/images/{{'SITE_NAME' | app_config}}/banners/{{ random }}.webp?a=3" alt="artwork featuring an orange and white cat"/>
		</a>
		<small class="mt-1 block text-gray-500">
			Submit your <a href="/post/32341/" class="font-bold">artwork</a>
		</small>
	</div>
	<!-- Submit button -->
	{% if v %}
	<ul class="flex flex-col space-y-2 mt-4 mb-0">
		<li>
			<a class="btn btn-primary text-center w-full" href="/submit">
				Submit drama
				<i class="fas fa-arrow-alt-right fa-fw fa-sm ml-1"></i>
			</a>
		</li>
		{% if not v.discord_id %}
		<li class="hidden">
			<a class="btn btn-pink text-center w-full" href="/discord">
				Discord server
				<i class="fas fa-arrow-alt-right fa-fw fa-sm ml-1"></i>
			</a>
		</li>
		{% endif %}
	</ul>
	{% endif %}
	<!-- Stickies list -->
	<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 dark:border-gray-900 shadow-inset-t-white-05"/>
	<div>
		<h2 class="font-bold text-lg font-heading leading-normal mb-2">
			<a href="/search/posts/?sort=comments&q=megathread&t=month" class="group text-black dark:text-gray-200 hover:text-primary dark:hover:text-primary">
				Mega
				<span class="text-gray-500 group-hover:text-primary font-normal">
					Threads
					<i class="fas fa-arrow-alt-right fa-fw fa-sm"></i>
				</span>
			</a>
		</h2>
		<ul class="flex flex-col space-y-2 mb-0">
			<li class="flex">
				<div class="flex items-center justify-center px-2 flex-shrink-0">
					<img class="object-contain w-5 h-5" src="/assets/images/emojis/marseywords.webp" alt="marsey words icon">
				</div>
				<div class="pl-3 mt-[-1px] truncate">
					<a href="/post/32341/" class="block font-medium text-black dark:text-gray-200 hover:text-primary truncate ellipsis">
						Sidebar Artwork Megathread
					</a>
					<small class="block text-gray-500">
						posted by
						<a href="/@idio3" class="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
							@idio3
						</a>
					</small>
				</div>
			</li>
			<li class="flex">
				<div class="flex items-center justify-center px-2 flex-shrink-0">
					<img class="object-contain w-5 h-5" src="/assets/images/emojis/marseywords.webp" alt="marsey words icon">
				</div>
				<div class="pl-3 mt-[-1px] truncate">
					<a href="/post/16583" class="block font-medium text-black dark:text-gray-200 hover:text-primary truncate ellipsis">
						Emoji Megathread
					</a>
					<small class="block text-gray-500">
						posted by
						<a href="/@aevann" class="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
							@aevann
						</a>
					</small>
				</div>
			</li>
			<li class="flex">
				<div class="flex items-center justify-center px-2 flex-shrink-0">
					<img class="object-contain w-5 h-5" src="/assets/images/emojis/marseywords.webp" alt="marsey words icon">
				</div>
				<div class="pl-3 mt-[-1px] truncate">
					<a href="/post/33652/" class="block font-medium text-black dark:text-gray-200 hover:text-primary truncate ellipsis">
						Snappy Quote Megathread
					</a>
					<small class="block text-gray-500">
						posted by
						<a href="/@Punished-Retard31" class="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
							@Punished-Retard31
						</a>
					</small>
				</div>
			</li>
			<li class="flex">
				<div class="flex items-center justify-center px-2 flex-shrink-0">
					<img class="object-contain w-5 h-5" src="/assets/images/emojis/marseywords.webp" alt="marsey words icon">
				</div>
				<div class="pl-3 mt-[-1px] truncate">
					<a href="/post/18459" class="block font-medium text-black dark:text-gray-200 hover:text-primary truncate ellipsis">
						Bugs/Suggestions Megathread
					</a>
					<small class="block text-gray-500">
						posted by
						<a href="/@aevann" class="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
							@aevann
						</a>
					</small>
				</div>
			</li>
		</ul>
	</div>
	<!-- Description -->
	<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 dark:border-gray-900 shadow-inset-t-white-05"/>
	<div>
		<h2 class="font-bold text-lg font-heading leading-normal mb-2">
			<a href="/post/5500/" class="group text-black dark:text-gray-200 hover:text-primary dark:hover:text-primary">
				About
				<span class="text-gray-500 group-hover:text-primary font-normal">
					rDrama
					<i class="fas fa-arrow-alt-right fa-fw fa-sm"></i>
				</span>
			</a>
		</h2>
		<div class="prose">
			<div class="flex items-center space-x-2 mb-3">
				<a href="https://www.youtube.com/watch?v=dSdWL3LqZto" class="rounded-full bg-primary hover:bg-primary/80 text-white w-7 h-7 flex items-center justify-center">
					<i class="fas fa-volume text-xs fa-fw"></i>
				</a>
				<div class="text-sm">
					<strong class="leading-none text-gray-800 dark:text-gray-300">dra &#183; ma</strong> /ˈdrämə/
					<em class="block text-xs text-gray-500 dark:text-gray-400">noun</em>
				</div>
			</div>

			<p class="text-sm text-gray-700 dark:text-gray-400">
				any incident, scene, gaffe, rumor, opinion, or disagreement that is blown entirely out of proportion.
			</p>

			<p class="text-sm text-gray-700 dark:text-gray-400">
				Do your part to keep our community healthy by <em>blowing</em> everything out of proportion and making literally everything as dramatic as possible.
			</p>

			<p class="text-sm text-gray-700 dark:text-gray-400">
				rdrama.net caters to drama in all forms such as: Real life, videos, photos, gossip, rumors, news sites, Reddit, and Beyond™. There isn't drama we won't touch, and we want it all.
			</p>

			<strong class="text-sm text-gray-500">What we want</strong>

			<ul class="flex flex-col space-y-1 text-sm text-gray-700 dark:text-gray-400">
				<li>Arguments.</li>
				<li>Gossip.</li>
				<li>Scandals.</li>
				<li>Lolcows.</li>
				<li>Assholes.</li>
				<li>Trainwrecks.</li>
				<li>Meltdowns.</li>
				<li>Dramatic news articles.</li>
				<li>Dramatic rumours (with context).</li>
				<li>Dramatic everything from anywhere.</li>
			</ul>
		</div>
	</div>
	<!-- Rules list -->
	<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 dark:border-gray-900 shadow-inset-t-white-05"/>
	<div>
		<h2 class="font-bold text-lg font-heading leading-normal mb-2">
			<a href="/post/2510/" class="group text-black dark:text-gray-200 hover:text-primary dark:hover:text-primary">
				Community
				<span class="text-gray-500 group-hover:text-primary font-normal">
					Rules
					<i class="fas fa-arrow-alt-right fa-fw fa-sm"></i>
				</span>
			</a>
		</h2>
		<div class="accordion mb-3" id="accordionExample">
			<div class="accordion-item">
				<h2 class="text-base leading-normal" id="headingOne">
					<button class="text-base font-bold leading-normal" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
						Rule #1
					</button>
				</h2>
				<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
					<div class="accordion-body">
						No sexualizing minors even as a “joke.” There is zero tolerance for pedo shit here. Go to Reddit if you want that.
					</div>
				</div>
			</div>
			<div class="accordion-item">
				<h2 class="text-base leading-normal" id="headingTwo">
					<button class="text-base font-bold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
						Rule #2
					</button>
				</h2>
				<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
					<div class="accordion-body">
						No doxxing ANYONE.
					</div>
				</div>
			</div>
			<div class="accordion-item">
				<h2 class="text-base leading-normal" id="headingThree">
					<button class="text-base font-bold leading-normal collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
						Rule #3
					</button>
				</h2>
				<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
					<div class="accordion-body">
						Using alts to game dramacoin will get you banned.
					</div>
				</div>
			</div>
			<div class="accordion-item">
				<h2 class="text-base leading-normal" id="headingFour">
					<button class="text-base font-bold leading-normal collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
						Rule #4
					</button>
				</h2>
				<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
					<div class="accordion-body">
						We’re all doing this for fun. Don’t make this “not fun.”
					</div>
				</div>
			</div>
			<div class="accordion-item">
				<h2 class="text-base leading-normal" id="headingFive">
					<button class="text-base font-bold leading-normal collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
						Rule #5
					</button>
				</h2>
				<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
					<div class="accordion-body">
						All rules can and likely will be ignored at admin discretion. Be funny, or at least compelling, and pretty much anything legal is fine.
					</div>
				</div>
			</div>
			<div class="accordion-item">
				<h2 class="text-base leading-normal" id="headingSix">
					<button class="text-base font-bold leading-normal collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
						Rule #6
					</button>
				</h2>
				<div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExample">
					<div class="accordion-body">
						Okay I think that’s all, thanks for reading! No one cares about your dumb <em>free speech</em> or whatever, go to Gab or something if you want to screech about amendments and stuff. Rules are not hard and fast, and janitorial abuse is inherent to the platform. So is ban evasion. Have fun or log out, both are easy!
					</div>
				</div>
			</div>
		</div>
	</div>
</div>