{{#
/**
* @name nav-global
* @todo Document property vars/partial
*/
#}}
{{# DESKTOP NAV #}}
{{# Utility Bar #}}
<nav class="utility-bar-container">
<div class="utility-bar mw-grid mx-auto flex jc-space-between">
{{# Langauge Selector #}}
<div class="language-selector ta-center body fw-600 fs-3">
<span class="popover pointer" id="languagePopdown" data-state="closed">
{{ theme:output src="images/utility-bar/globe.svg" }}
<span class="popover-current white va-middle">{{ locale_name }}<i class="popover-arrow darr ml-1"></i></span>
</span>
<div class="popover-box absolute pt-2">
<ul class="list bg-white py-1 px-6 m-0 br-1 bc-slate-40 bs-solid bw-1 bs-soft">
{{ locales sort="name" }}
{{ unless locale:full == "en_AU" || locale:full == "en_CA" }}
<li class="ta-left">
<a href="{{ url }}" class="block link language-option slate-120 body-2 py-2 fw-500" data-language-tag="{{ locale:full }}">
{{ if locale:name == locale_name }}
<i class="icon icon-s fill-mint-100 mr-2 w-1 va-middle">{{ theme:output src="images/check.svg" }}</i>
{{ else }}
<i class="icon icon-s fill-mint-100 mr-2 w-1">{{# just a space holder #}}</i>
{{ /if }}
<span class="hover-link-border">{{ locale:name }}</span>
</a>
</li>
{{ /unless }}
{{ /locales }}
</ul>
</div>
</div>
{{# start the nav cause we now need info from the global, and we don't want to wrap `locales` above inside that or it messes up the {{ url }} output #}}
{{ nav }}
{{# Links #}}
<ul class="utility-links list m-0">
<li>
<a href="{{ search_link }}" class="search-link link">{{ theme:output src="images/utility-bar/magnifying-glass.svg" }}</a>
</li>
<li>
<a href="{{ contact_link }}" class="body fw-600 fs-3 link white hover-link-border">{{ contact_text }}</a>
</li>
<li>
<a href="{{ login_link }}" class="body fw-600 fs-3 link white hover-link-border">{{ login_text }}</a>
</li>
</ul>
</div>
</nav>
{{# PRIMARY NAV #}}
<nav class="nav-global" nav-global role="navigation">
{{# Content #}}
<div class="nav-content-container">
{{# Logo #}}
<div class="nav-logo-container">
<a href="{{ homepage }}" class="nav-logo">{{ theme:output src="images/ac-logo.svg" }}</a>
</div>
{{# List #}}
<div class="nav-list-container">
<ul class="nav-list">
{{ nav_content }}
{{ if type == "nav_dropdown_featured" }}
<li class="nav-list-item dropdown" dropdown>
<span class="link-text">
<i class="icon-s back-arrow">{{ theme:output src="images/arrow-left.svg" }}</i>
{{ text }}
<i class="rarr"></i>
</span>
<div class="dropdown-list-container">
<div class="dropdown-list-container-inner">
<ul class="dropdown-list dropdown-list-product mw-grid mx-auto">
{{ body }}
<li>
{{ relate:product_page }}
<a href="{{ url }}" class="link-text">
{{ product_page_title_override or title }}
</a>
{{ /relate:product_page }}
<ul>
{{ if pages }}
{{ relate:pages }}
<li>
<a href="{{ url }}" class="link-text">{{ title }}</a>
</li>
{{ /relate:pages }}
{{ /if }}
{{ external_links }}
<li>
<a href="{{ url }}" class="link-text">{{ text }}</a>
</li>
{{ /external_links }}
</ul>
</li>
{{ /body}}
</ul>
</div>
<div class="dropdown-list-container-shadow"> </div>
</div>
</li>
{{ /if }}
{{ if type == "nav_dropdown_solutions" }}
<li class="nav-list-item dropdown" dropdown>
<span class="link-text">
<i class="icon-s back-arrow">{{ theme:output src="images/arrow-left.svg" }}</i>
{{ text }}
<i class="rarr"></i>
</span>
<div class="dropdown-list-container">
<div class="dropdown-list-container-inner">
<ul class="dropdown-list dropdown-list-solutions mw-grid mx-auto">
<li>
<ul class="dropdown-list-solutions-links">
{{ body }}
<li>
{{ if heading_text }}
<span class="lead-in-1 fw-700 block py-4">{{ heading_text }}</span>
{{ /if }}
<ul>
{{ if pages }}
{{ relate:pages }}
<li><a href="{{ url }}" class="link-text">{{ title }}</a></li>
{{ /relate:pages }}
{{ /if }}
{{ external_links }}
<li><a href="{{ url }}" class="link-text">{{ text }}</a></li>
{{ /external_links }}
</ul>
</li>
{{ /body}}
</ul>
</li>
<li class="none pl-8 bw-2 bl bc-slate-40 my-4 want-to-col">
<h6 class="lead-in-1 fw-700 m-0 pb-4">{{ footer_heading }}</h6>
<ul class="list p-0 m-0 fs-3 flex flex-wrap">
{{ footer }}
{{ relate:product_page }}
<li class="flex-grow-0 flex-shrink-0 w-50 mb-8">
<img class="solutions-icon" src="{{ icon }}"><a href="{{ url }}" class="ocean hover-link-border hover-link-border-arrow bc-ocean td-none">{{ text }}</a>
</li>
{{ /relate:product_page }}
{{ /footer }}
</ul>
</li>
</ul>
</div>
<div class="dropdown-list-container-shadow"> </div>
</div>
</li>
{{ /if }}
{{ if type == "nav_link" }}
<li class="nav-list-item {{ if only_mobile }}mobile-nav-item{{ /if }}">
<a href="{{ url }}" class="link-text">{{ text }}</a>
</li>
{{ /if }}
{{ if type == "nav_cta"}}
{{ global_free_trial_form }}
<li class="nav-list-item hover-bg-none">
<form class="nav-trial-form br-1 mw-100 mb-0 relative s--flex {{ classes }}" data-cta-form novalidate>
<input type="email" class="bs-soft block m-0 w-100 body lh-6 fw-500 input-reset p-3 bs-solid br-1 bw-1 mb-2 slate-120 s--w-auto s--flex-grow-1 bc-slate-40" placeholder="{{ free_trial_placeholder or global_free_trial_placeholder }}" data-cta-form-input>
<button type="submit" class="fs-4 bs-soft bg-mint hover-cta block w-100 br-1 body lh-6 p-3 button-reset pointer flex-shrink-0 fw-600 bs-none white s--w-auto s--mt-0 hover-rarr" data-cta-form-submit>
{{ text }}<i class="rarr"></i>
</button>
<p class="bg-strawberry-20 strawberry absolute flex fs-3 lh-3 fw-500 p-2 m-0 mt-2 br-1 left-0 bottom-0 w-100 pointer-events-none pe-none o-0 invisible error-message" data-cta-form-error-message>
<i class="flex ai-center mr-2">{{ theme:output src="images/alert.svg" }}</i>
<span class="inline-block">{{ free_trial_error_message or global_free_trial_error_message }}</span>
</p>
</form>
</li>
{{ /global_free_trial_form }}
{{ /if }}
{{ /nav_content }}
<li class="nav-list-item mobile-nav-item dropdown" dropdown>
<span class="link-text link-text-lang">
<i class="icon-s back-arrow">{{ theme:output src="images/arrow-left.svg" }}</i>
<div class="flex ai-center">
<div class="fill-ocean-100 lh-0 mr-2 lang-globe-icon">{{ theme:output src="images/utility-bar/globe.svg" }}</div>
{{ lang_picker_mobile_nav }}
</div>
<i class="rarr"></i>
</span>
{{ /nav }}
{{# end the /nav cause we no longer need info from the global, and we don't want to wrap `locales` below inside that or it messes up the {{ url }} output #}}
<div class="dropdown-list-container">
<div class="dropdown-list-container-inner">
<ul class="dropdown-list dropdown-list-product mw-grid mx-auto">
{{ locales sort="name" }}
{{ unless locale:full == "en_AU" || locale:full == "en_CA" }}
<li>
<a href="{{ url }}" class="link-text link-text-lang" data-language-tag="{{ locale:full }}">
{{ if locale:name == locale_name }}
<i class="icon icon-s fill-mint-100 mr-2 w-1 va-middle">{{ theme:output src="images/check.svg" }}</i>
{{ else }}
<i class="icon icon-s fill-mint-100 mr-2 w-1">{{# just a space holder #}}</i>
{{ /if }}
{{ locale:name }}
</a>
</li>
{{ /unless }}
{{ /locales }}
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
{{# Toggle #}}
<div class="nav-toggle-container">
<i class="nav-toggle" nav-toggle>
<svg viewBox="0 0 50 50">
<g>
<line class="top" x1="15%" y1="20%" x2="85%" y2="20%"></line>
<line class="middle" x1="15%" y1="50%" x2="85%" y2="50%"></line>
<line class="bottom" x1="15%" y1="80%" x2="85%" y2="80%"></line>
</g>
</svg>
</i>
</div>
</nav>
{{# MOBILE NAV #}}
<nav class="nav-mobile hidden" role="navigation"></nav>