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

<div class="hidden xl:block xl:col-start-10 xl:col-end-13 flex-shrink-0 py-4">
	<div>
		<h2 class="ml-2 font-bold text-xl font-heading leading-normal mb-2">
			Fistmas Stickies
		</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/CHRISTMAS/ribbon1.png" alt="ribbon icon">
				</div>
				<div class="pl-3 mt-[-1px] truncate">
					<a href="/post/29747/" class="block font-medium text-black hover:text-red-600 truncate ellipsis">
						rDrama presents: FISTMAS 2021 | Santa Claus is CUMMING to town for the HOLIGAYS :marseysanta: emoji
					</a>
					<small class="block text-gray-500">
						posted by <a href="/@christmaspathianflorist" class="text-gray-500 hover:text-gray-600">@christmaspathianflorist</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/CHRISTMAS/ribbon1.png" alt="ribbon icon">
				</div>
				<div class="pl-3 mt-[-1px] truncate">
					<a href="/post/29748/" class="block font-medium text-black hover:text-red-600 truncate ellipsis">
						UI overhaul bug report thread
					</a>
					<small class="block text-gray-500">
						posted by <a href="/@christmaspathianflorist" class="text-gray-500 hover:text-gray-600">@christmaspathianflorist</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/CHRISTMAS/ribbon1.png" alt="ribbon icon">
				</div>
				<div class="pl-3 mt-[-1px] truncate">
					<a href="/post/29885/" class="block font-medium text-black hover:text-red-600 truncate ellipsis">
						On the Twelfth day of Christmas MasterLawlz gave to meee [Finale]
					</a>
					<small class="block text-gray-500">
						posted by <a href="/@HoHoHotep" class="text-gray-500 hover:text-gray-600">@HoHoHotep</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/CHRISTMAS/ribbon1.png" alt="ribbon icon">
				</div>
				<div class="pl-3 mt-[-1px] truncate">
					<a href="/post/29916/" class="block font-medium text-black hover:text-red-600 truncate ellipsis">
						PUBLIC DRAMACOIN MINE
					</a>
					<small class="block text-gray-500">
						posted by <a href="/@SeetheFarmer" class="text-gray-500 hover:text-gray-600">@SeetheFarmer</a>
					</small>
				</div>
			</li>
		</ul>
	</div>
	<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05"/>
	<button data-bs-toggle="modal" data-bs-target="#expandImageModal" data-bs-url="/assets/CHRISTMAS/banners/banner-{{ random }}.jpg" onclick="expandDesktopImage('/assets/CHRISTMAS/banners/banner-{{ random }}.jpg')" class="w-full h-56 shadow-sm p-[3px] bg-white overflow-hidden">
		<img class="w-full h-full flex-shrink-0 object-contain cursor-pointer" src="/assets/CHRISTMAS/banners/banner-{{ random }}.jpg" alt="cat in a bar wearing a santa hat"/>
	</button>
	{% if v %}
	<hr class="mt-6 mb-5 h-0.5 border-b border-gray-300 shadow-inset-t-white-05"/>
	<div class="flex flex-col sticky top-4">
		<a class="btn btn-red text-center w-full" href="/submit">
			Submit drama
			<i class="fas fa-arrow-alt-right fa-fw fa-sm ml-1"></i>
		</a>
	</div>
	{% endif %}
</div>