{% assign person-id = include.person-id | default: 1 %}
{% assign person = site.data.people[person-id] %}
<div class="navbar-nav flex-row{% if include.class %} {{ include.class }}{% endif %}">

	{% unless include.condensed %}
	<div class="nav-item d-none d-{{ include.breakpoint }}-flex me-3">
		<div class="btn-list">
			{% if include.dark %}
			{% include ui/button.html color="dark" icon="brand-github" text="Source code" href=site.github-url
			external=true %}
			{% include ui/button.html color="dark" icon="heart" icon-color="pink" text="Sponsor"
			href=site.github-sponsors-url external=true %}
			{% else %}
			{% include ui/button.html icon="brand-github" outline=true text="Source code" href=site.github-url
			external=true %}
			{% include ui/button.html icon="heart" icon-color="pink" outline=true text="Sponsor"
			href=site.github-sponsors-url external=true %}
			{% endif %}
		</div>
	</div>
	{% endunless %}

	<div class="d-none d-{{ include.breakpoint }}-flex">
		<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
		   data-bs-placement="bottom">
			{% include ui/icon.html icon="moon" %}
		</a>

		<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
		   data-bs-placement="bottom">
			{% include ui/icon.html icon="sun" %}
		</a>

		<div class="nav-item dropdown d-none d-md-flex me-3">
			<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
				{% include ui/icon.html icon="bell" %}
				<span class="badge bg-red"></span>
			</a>
			<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
				{% include cards/navbar-notifications.html %}
			</div>
		</div>
	</div>

	<div class="nav-item dropdown">
		<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
			{% include ui/avatar.html person-id=person-id size="sm" %}

			{% unless include.hide-username %}
			<div class="d-none d-xl-block ps-2">
				<div>{{ person.full_name }}</div>
				<div class="mt-1 small text-muted">{{ person.job_title }}</div>
			</div>
			{% endunless %}
		</a>
		<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
			<a href="#" class="dropdown-item">Status</a>
			<a href="{{ site.base }}/profile.html" class="dropdown-item">Profile</a>
			<a href="#" class="dropdown-item">Feedback</a>
			<div class="dropdown-divider"></div>
			<a href="{{ site.base }}/settings.html" class="dropdown-item">Settings</a>
			<a href="{{ site.base }}/sign-in.html" class="dropdown-item">Logout</a>
		</div>
	</div>
</div>