{{#with data}}
    <div class="header-1-container bs4--w-100 bs4--bg-white" id="{{@root/dom/headerContainer}}">
        <div class="bs4--row bs4--py-3 bs4--py-md-4 bs4--px-4 bs4--px-md-6 bs4--no-gutters bs4--d-flex bs4--align-items-center bs4--justify-content-between">
            <div class="bs4--col-1 bs4--d-md-none">
                <button id="{{@root/dom/btnMenuIcon}}" class="open bs4--d-block bs4--d-md-none bs4--p-0"  aria-label="Menu">
                    <i class="material-icons" aria-hidden="true">menu</i>
                </button>
            </div>
            {{#or websiteSettings.logoUrl entityDetails.brand}}
            <div class="header-logo-container">
                <div class="bs4--row bs4--flex-nowrap bs4--justify-content-center bs4--justify-content-md-start bs4--align-items-center">
                    <div class="broker-brand-logo">
                        <a id="{{@root/dom/aHomeLogo}}" class="no-hover header-logo-link" href="/" aria-label="Home">
                                <img src="{{#if websiteSettings.logoUrl}}{{websiteSettings.logoUrl}}{{else}}{{ entityDetails.brand.image.url.default }}{{/if}}"
                                    alt="{{#unless websiteSettings.logoUrl}}{{entityDetails.brand.name}}{{/unless}}" height="80" width="160"
                                    class="bs4--h-auto bs4--align-middle bs4--w-auto"/>
                        </a>
                    </div>
                {{else}}
                <div class="header-logo-container">
                    <div class="bs4--row bs4--flex-nowrap bs4--justify-content-end bs4--justify-content-md-start bs4--align-items-center">
                        <div class="bs4--row bs4--align-items-center bs4--justify-content-start bs4--flex-nowrap">
                            <div id="{{@root/dom/divUserProfileImageNoLogo}}" class="headshot-div bs4--mr-3 bs4--d-none bs4--d-md-block"></div>
                            <a id="{{@root/dom/aHomeLogo}}" class="no-hover header-logo-text" href="/">
                                <span
                                    class="bs4--font-weight-bolder text-black bs4--text-center bs4--text-md-left font-20">{{ entityDetails.name.full }}</span>
                            </a>
                        </div>
                {{/or}}
                    <div class="desktop-header-search-dropdown">
                        <form class="bs4--pl-0 bs4--pl-md-3 bs4--pr-2 bs4--pr-lg-0 bs4--pt-md-0 bs4--pt-3" id="{{@root/dom/searchForm}}">
                            <div id="{{@root/dom/divSearchDropdownContainer}}"
                                class="dropdown bs4--input-group search-dropdown-container">
                                <label for="{{@root/dom/textSearch}}" class="sr-only">City, Neighborhood, Address, School, Zip,
                                    or MLS#</label>
                                <input id="{{@root/dom/textSearch}}" type="search"
                                    class="bs4--form-control search-dropdown-input"
                                    placeholder="City, Neighborhood, Address, School, Zip, or MLS#" autocomplete="off">
                                <div class="bs4--input-group-append">
                                    <button
                                        class="btn bs4--text-center search-dropdown-button pull-right bs4--input-group-text"
                                        id="{{@root/dom/btnSearch}}" aria-label="Search">
                                        <i class="material-icons" aria-hidden="true" >search</i>
                                    </button>
                                </div>
                                <div data-toggle="dropdown"></div>
                                <ul id="{{@root/dom/ulSearchDropdown}}" class="dropdown-menu search-dropdown-menu"></ul>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div>
                <div class="bs4--d-flex bs4--align-items-center bs4--justify-content-end">
                    <div id="{{@root/dom/divNavBar}}"></div>
                    {{#or websiteSettings.logoUrl entityDetails.brand}}
                    <div id="{{@root/dom/divUserProfileImage}}" class="headshot-div"></div>
                    {{/or}}
                </div>
            </div>
            <div class="mobile-header-search-dropdown">
                <form class="bs4--pl-0 bs4--pl-md-3 bs4--pt-md-0 bs4--pt-3" id="{{@root/dom/searchFormMobile}}">
                    <div id="{{@root/dom/divSearchDropdownContainerMobile}}"
                        class="dropdown bs4--input-group search-dropdown-container">
                        <label for="{{@root/dom/textSearchMobile}}" class="sr-only">City, Neighborhood, Address, School, Zip,
                            or MLS#</label>
                        <input id="{{@root/dom/textSearchMobile}}" type="search"
                            class="bs4--form-control search-dropdown-input"
                            placeholder="City, Neighborhood, Address, School, Zip, or MLS#" autocomplete="off">
                        <div class="bs4--input-group-append">
                            <button
                                class="btn bs4--text-center search-dropdown-button pull-right bs4--input-group-text"
                                id="{{@root/dom/btnSearchMobile}}"  aria-label="Search">
                                <i class="material-icons" aria-hidden="true">search</i>
                            </button>
                        </div>
                        <div data-toggle="dropdown"></div>
                        <ul id="{{@root/dom/ulSearchDropdownMobile}}" class="dropdown-menu search-dropdown-menu"></ul>
                    </div>
                </form>
            </div>
        </div>
    </div>
{{/with}}