<div>
    <div class="umb-app-header">

        <button type="button" class="umb-app-header__skip-button" ng-click="skipToMenu()"><localize key="general_skipToMenu">Go to menu</localize></button>
        <button type="button" class="umb-app-header__skip-button" ng-click="skipToContent()"><localize key="general_skipToContent">Go to content</localize></button>

        <div class="umb-app-header__logo" ng-if="hideBackofficeLogo !== true">
            <button type="button"
                    id="umbraco-logo-mark"
                    class="btn-reset"
                    ng-click="toggleLogoModal()"
                    localize="title"
                    title="@general_umbracoInfo">

              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 315.89 315.89" width="30" height="30">
                <style type="text/css">
                  #umbraco-logo-mark svg {
                    vertical-align: top;
                  }
                  #umbraco-logo-mark svg path {
                    fill: white;
                    opacity: 0.8;
                  }
                  #umbraco-logo-mark:hover svg path {
                    opacity: 1;
                  }
                  #umbraco-logo-mark.active svg path {
                    fill: #f5c1bc;
                    opacity: 1;
                  }
                </style>
                <path d="M0,157.74A157.95,157.95,0,1,1,158,315.89,157.95,157.95,0,0,1,0,157.74Zm154.74,54.09a155.41,155.41,0,0,1-36.5-3.29,27.92,27.92,0,0,1-19.94-16q-5.35-12.34-5.21-38.1a243,243,0,0,1,1.69-26.84q1.55-13,3.09-21.46l1.07-5.59a2,2,0,0,0,0-.49,3.2,3.2,0,0,0-2.65-3.17L75.92,93.67h-.44a3.19,3.19,0,0,0-3.11,2.48c-.35,1.31-.56,2.27-1.17,5.38-1.16,6-2.24,11.85-3.43,20.38a264.17,264.17,0,0,0-2.3,27.94,145.24,145.24,0,0,0,0,19.57q.72,25.94,8.9,41.42t27.72,22.3q19.53,6.81,54.43,6.66h2.91q34.94.15,54.41-6.66t27.71-22.3q8.17-15.53,8.91-41.42a145.24,145.24,0,0,0,0-19.57,266.84,266.84,0,0,0-2.3-27.94c-1.2-8.44-2.27-14.26-3.44-20.38-.61-3.11-.81-4.07-1.16-5.38a3.21,3.21,0,0,0-3.12-2.48h-.52l-20.38,3.18a3.2,3.2,0,0,0-2.68,3.17,4,4,0,0,0,0,.49l1.08,5.59q1.55,8.48,3.12,21.46a245.68,245.68,0,0,1,1.65,26.84q.27,25.69-5.21,38.07a27.9,27.9,0,0,1-19.76,16.07,155.19,155.19,0,0,1-36.48,3.29Z"/>
              </svg>

            </button>
            <div
                tabindex="0"
                class="umb-app-header__logo-modal"
                on-outside-click="hideLogoModal()"
                ng-click="stopClickEvent($event)"
                ng-focus="keepLogoModal()"
                ng-blur="hideLogoModal()"
                ng-if="logoModal.show">
                <img src="assets/img/application/umbraco_logo_large_blue.svg"
                     alt="Umbraco — The Friendly CMS"
                     width="120"
                     draggable="false" />
                <small> {{logoModal.text}} </small>
                <br /><br />
                <a href="https://umbraco.com"
                   title="Umbraco website"
                   target="_blank"
                   rel="noopener"
                   ng-focus="keepLogoModal()"
                   ng-blur="hideLogoModal()">
                Umbraco.com</a>
            </div>
        </div>

        <umb-sections ng-if="authenticated" sections="sections"> </umb-sections>

        <div class="umb-app-header__right">
            <ul class="umb-app-header__actions">
                <li data-element="global-search" class="umb-app-header__action">
                    <button
                        type="button"
                        class="umb-app-header__button btn-reset"
                        hotkey="ctrl+space"
                        ng-click="searchClick()"
                        ng-mousedown="rememberFocus()"
                        localize="title"
                        title="@general_search"
                    >
                        <span class="sr-only">
                            <localize
                                key="visuallyHiddenTexts_openBackofficeSearch"
                                >Open backoffice search</localize
                            >...
                        </span>
                        <span class="umb-app-header__action-icon">
                            <umb-icon icon="icon-search"></umb-icon>
                        </span>
                    </button>
                </li>
                <li data-element="global-help" class="umb-app-header__action">
                    <button
                        type="button"
                        class="umb-app-header__button btn-reset"
                        hotkey="ctrl+shift+h"
                        ng-click="helpClick()"
                        localize="title"
                        title="@general_help"
                    >
                        <span class="sr-only">
                            <localize
                                key="visuallyHiddenTexts_openCloseBackofficeHelp"
                                >Open/Close backoffice help</localize
                            >...
                        </span>
                        <span class="umb-app-header__action-icon">
                            <umb-icon icon="icon-help-alt"></umb-icon>
                        </span>
                    </button>
                </li>
                <li data-element="global-user" class="umb-app-header__action">
                    <button
                        type="button"
                        class="umb-app-header__button btn-reset"
                        ng-click="avatarClick()"
                        hotkey="ctrl+shift+u"
                        title="{{user.name}}"
                    >
                        <span class="sr-only">
                            <localize
                                key="visuallyHiddenTexts_openCloseBackofficeProfileOptions"
                                >Open/Close your profile options</localize
                            >...
                        </span>
                        <umb-avatar
                            class="umb-app-header__action-icon"
                            size="xxs"
                            color="secondary"
                            name="{{user.name}}"
                            img-src="{{avatar[0].value}}"
                            img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x"
                        >
                        </umb-avatar>
                    </button>
                </li>
            </ul>
        </div>
    </div>
</div>
