<div class="top-nav__user-card flex flex--verticalCenter {{if navigation.isDrawerOpen "toggled"}}" {{action "toggleDrawer"}}>
  <figure class="top-nav__avatar">
    <img src="{{session.userModel.logo}}">
  </figure>
  <div class="top-nav__user-info">
    <h3 class="top-nav__username mg-0 pd-0 cl-white">
      {{format-display-name session.userData.login session.userModel.displayName}}
    </h3>
    <div class="top-nav__user-status">
      {{twitch-presence/indicator isCurrentStatus=true}}
    </div>
  </div>
</div>
<div class="top-nav-drawer {{if navigation.isDrawerOpen "toggled"}}">
  <ul class="top-nav-drawer__status">
    <li class="top-nav-drawer__item top-nav-drawer__presence-selector">
      {{twitch-presence/indicator isCurrentSetting=(eq presence.settings.share "full") isOnline=true onClick=(action "setVisibility" "full") class="presence--nav"}}
    </li>
    <li class="top-nav-drawer__item top-nav-drawer__presence-selector">
      {{twitch-presence/indicator isCurrentSetting=(eq presence.settings.share "none") isOnline=false onClick=(action "setVisibility" "none") class="presence--nav"}}
    </li>
    <li class="top-nav-drawer__divider"></li>
    <li class="top-nav-drawer__item top-nav-drawer__share-toggle">
      {{twitch-presence/share-activity-toggle class="presence--nav"}}
    </li>
    <li class="top-nav-drawer__item presence--nav">
      <label>
        <input class="mg-l-1 mg-r-1" type="checkbox" checked={{conversations.isDNDEnabled}} onchange={{action "toggleDoNotDisturb" value="target.checked"}}>
        <span class="statusString presence__label">{{t "navigation.menu.doNotDisturb"}}</span>
      </label>
    </li>
  </ul>
  <ul>
    <li class="top-nav-drawer__item">
      {{#link-to "user" session.userData.login class="flex" title=(t "navigation.menu.channel")}}
        {{svg-icon path="svg/nav-mychannel"}}
        <span class="top-nav-drawer__label">{{t "navigation.menu.channel"}}</span>
      {{/link-to}}
    </li>
    <li class="top-nav-drawer__item">
      {{#link-to "manager.past-broadcasts.all" session.userData.login class="flex" title=(t "navigation.menu.videoManager")}}
        {{svg-icon path="svg/nav-manager"}}
        <span class="top-nav-drawer__label">{{t "navigation.menu.videoManager"}}</span>
      {{/link-to}}
    </li>
    <li class="top-nav-drawer__item">
      {{#link-to "dashboards.index" session.userData.login class="flex" title=(t "navigation.menu.dashboard")}}
        {{svg-icon path="svg/nav-dashboard"}}
        <span class="top-nav-drawer__label">{{t "navigation.menu.dashboard"}}</span>
      {{/link-to}}
    </li>
    <li class="top-nav-drawer__divider"></li>
    <li class="top-nav-drawer__item">
      <a class="flex" href="/messages/inbox" title={{t "navigation.menu.messages"}}>
        {{svg-icon path="svg/nav-messages"}}
        <span class="top-nav-drawer__label">{{t "navigation.menu.messages"}}</span>
      </a>
    </li>
    <li class="top-nav-drawer__item">
      {{#link-to "backpack" class="flex" title=(t "navigation.menu.subscriptions")}}
        {{svg-icon path="svg/nav-backpack"}}
        <span class="top-nav-drawer__label">{{t "navigation.menu.subscriptions"}}</span>
      {{/link-to}}
    </li>
    <li class="top-nav-drawer__divider"></li>
    <li class="top-nav-drawer__item">
      {{#link-to "settings.profile"  class="flex" title=(t "navigation.menu.settings")}}
        {{svg-icon path="svg/nav-settings"}}
        <span class="top-nav-drawer__label">{{t "navigation.menu.settings"}}</span>
      {{/link-to}}
    </li>
    <li class="top-nav-drawer__item">
      <a class="flex" href="/logout" {{action (route-action "handleLogoutButtonClick")}} title={{t "general.account.logOut"}}>
        <form id="logout_form" method="post" action="/logout"></form>
        {{svg-icon path="svg/nav-logout"}}
        <span class="top-nav-drawer__label">{{t "general.account.logOut"}}</span>
      </a>
    </li>
  </ul>
</div>
