{% match opts.session %}
{% when Some with (session) %}
<div class="flex items-center md:order-2">
	<button 
		type="button" 
		class="flex mr-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600" 
		id="user-menu-button" 
		aria-expanded="false" 
		data-dropdown-toggle="user-dropdown" 
		data-dropdown-placement="bottom"
	>
		<span class="sr-only">Open user menu</span>
		{% match session.profile_image_url %}
		{% when Some with (url) %}
		<img class="w-8 h-8 rounded-full" src="{{ url }}" alt="user photo">
		{% when None %}
		<span>{{ session.login }}</span>
		{% endmatch %}
	</button>

	<!-- Dropdown menu -->
	<div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-dropdown">
		<div class="px-4 py-3">
			<span class="block text-sm text-gray-900 dark:text-white">session.login</span>
			<span class="block text-sm  text-gray-500 truncate dark:text-gray-400">session.login</span>
		</div>
		{% include "nav/account-options.html" %}
	</div>

	<button 
		data-collapse-toggle="navbar-user" 
		type="button" 
		class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" 
		aria-controls="navbar-user"
		aria-expanded="false"
	>
		<span class="sr-only">Open main menu</span>
		<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
			<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
		</svg>
	</button>
</div>
{% when None %}
{% endmatch %}