<div class="dropdown">
	<button class="relative flex items-center px-3 py-2.5 rounded text-sm text-gray-100 hover:text-gray-400 focus:text-gray-200 focus:outline-none dropdown-toggle" type="button" id="dropdownProfileMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-offset="0,-2">
		<span class="sr-only">Open user menu</span>
		<img class="h-9 w-9 bg-white p-[3px] border border-gray-800" src="{{ v.profile_url }}" alt="Your avatar"/>
		<div class="pl-2 text-left">
			<span class="font-bold text-sm">{{ v.username }}</span>
			<div class="flex items-center block leading-none text-gray-400">
				<span class="text-xs">{{v.coins}} {{'COINS_NAME' | app_config}}</span>
			</div>
		</div>
	</button>
	<ul class="dropdown-menu w-56 bg-gray-900 rounded-md rounded-t-none shadow-lg" aria-labelledby="dropdownProfileMenuButton" x-placement="bottom-start">
		<li>
			<a class="block px-4 py-2" aria-current="page" href="/me">
				<div class="text-base text-white leading-5 font-bold">
					{{ v.username }}
				</div>
				<div class="flex space-x-4 mt-1">
					<small class="flex items-center block mt-1 text-gray-300">
						<img data-bs-toggle="tooltip" data-bs-placement="bottom" src="/assets/images/emojis/marseycoin.webp" data-bs-original-title="{{'COINS_NAME' | app_config}}" aria-label="{{'COINS_NAME' | app_config}}" class="w-6 h-6 object-contain" alt="coin icon"/>
						<span class="pl-2">{{v.coins}}</span>
					</small>
					{% if v.procoins %}
					<small class="flex items-center block mt-1 text-gray-300">
						<img data-bs-toggle="tooltip" data-bs-placement="bottom" src="/assets/images/emojis/marseybux.webp" data-bs-original-title="MarseyBux" aria-label="MarseyBux" class="w-6 h-6 object-contain" alt="coin icon"/>
						<span class="pl-2">{{v.procoins}}</span>
					</small>
					{% endif %}
				</div>
			</a>
        </li>
        <li>
			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
		</li>
		<li>
			<a class="dropdown-item dropdown-item-primary" href="/@me">
				<i class="fas fa-user fa-sm fa-fw mr-4"></i>Profile
			</a>
		</li>
		<li>
			<a class="dropdown-item dropdown-item-primary" href="/notifications{% if v.notifications_count and v.notifications_count == v.post_notifications_count %}?posts=true{% endif %}">
				<i class="fas fa-envelope fa-sm fa-fw mr-4"></i>Inbox
				{% if v.notifications_count %}<span class="text-red-500">{{ v.notifications_count }}</span>{% endif %}
			</a>
		</li>
		<li>
			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
		</li>
		<li>
			<a class="dropdown-item dropdown-item-primary" href="/@{{ v.username }}">
				<i class="fas fa-pen fa-sm fa-fw mr-4"></i>Posts
			</a>
		</li>
		<li>
			<a class="dropdown-item dropdown-item-primary" href="/@{{ v.username }}/comments">
				<i class="fas fa-comments-alt fa-sm fa-fw mr-4"></i>Comments
			</a>
		</li>
		<li>
			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
		</li>
		<li>
			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 hover:text-yellow-900 bg-gradient-to-t hover:from-yellow-600 hover:to-yellow-500 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-yellow-600 focus:to-yellow-500" href="https://marsey1.gumroad.com/l/tfcvri">
				<i class="fas fa-arrow-alt-up fa-sm fa-fw mr-4"></i>Donate
			</a>
		</li>
		<li>
			<a class="dropdown-item dropdown-item-primary" href="/settings">
				<i class="fas fa-cog fa-sm fa-fw mr-4"></i>Settings
			</a>
		</li>
		<li>
			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
		</li>
		<li>
			<button class="dropdown-item dropdown-item-primary" data-bs-toggle="modal" data-bs-target="#themePickerModal">
				<i class="fas fa-paint-brush fa-sm fa-fw mr-4"></i>Pick theme
			</button>
		</li>
		<li>
			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
		</li>
		<li>
			<button class="dropdown-item dropdown-item-primary" onclick="post_toast('/logout', '1')">
				<i class="fas fa-power-off fa-sm fa-fw mr-4"></i>Log out
			</button>
		</li>
	</ul>
</div>