{# Top Bar Component #}
<div class="demo-topbar">
	<div class="container">
		<div
			class="demo-topbar-container">
			{# Left: Slogan #}
			<div class="demo-topbar-slogan">
				<i class="bi bi-shield-check"></i>
				{{ theme_config('topbar-slogan') }}
			</div>

			{# Right: Actions #}
			<div
				class="demo-topbar-actions">
				{# Register Link #}
				<a href="{{ path('frontend.account.register.page') }}" class="demo-topbar-link">
					<i class="bi bi-person-plus"></i>
					{{ "account.register"|trans }}
				</a>

				<span class="demo-topbar-divider"></span>

				{# Login Link #}
				{% if not context.customer %}
					<a href="{{ path('frontend.account.login.page') }}" class="demo-topbar-link">
						<i class="bi bi-box-arrow-in-right"></i>
						{{ "account.login"|trans }}
					</a>
				{% else %}
					<a href="{{ path('frontend.account.home.page') }}" class="demo-topbar-link">
						<i class="bi bi-person-circle"></i>
						{{ "account.overview"|trans }}
					</a>
				{% endif %}

				<span class="demo-topbar-divider"></span>

				{# Language Switcher #}
				{% if page.header.languages|length > 1 %}
					<div class="language-switcher">
						{% sw_include '@Storefront/storefront/layout/header/actions/language-widget.html.twig' %}
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>