<div class="w-sidebar">
  <div class="w-sidebar_container">
    <div class="w-sidebar_top">

      <div class="w-sidebar_item">
        <div class="w-dropdown {{if isOpened '__w-state-opened'}}">
          <span class="w-flag" data-country-code="{{locale.language.code}}"></span>
          <a {{action "toggleLanguage"}} class="w-link__inverse w-link__inverse-pseudo w-link {{if isOpened '__w-state-selected'}} {{if isOpened '__w-state-clickable'}}">{{t (concat "language." locale.language.code)}}</a>
          <ul class="w-dropdown_list">
            {{#each locale.languages as |lang|}}
              <li class="w-dropdown_item {{page.dropdownItemClassName}}">
                <a class="w-dropdown_link" {{action 'setLanguageCode' lang.code}}>
                  {{t (concat "language." lang.code)}}
                </a>
              </li>
            {{/each}}
          </ul>
        </div>
      </div>

    </div>

    <div class="w-sidebar_bottom">
      <div class="w-sidebar_item" {{action 'toggleSidebar' target=view}}>{{#link-to 'getting-started' activeClass="__w-state-selected" class="w-app-nav_link w-link"}}{{t "navigation.getting_started"}}{{/link-to}}</div>
      <div class="w-sidebar_item" {{action 'toggleSidebar' target=view}}>{{#link-to 'tutorial' activeClass="__w-state-selected" class="w-app-nav_link w-link"}}{{t "navigation.tutorial"}}{{/link-to}}</div>
      <div class="w-sidebar_item" {{action 'toggleSidebar' target=view}}>{{#link-to 'cookbook' activeClass="__w-state-selected" class="w-app-nav_link w-link"}}{{t "navigation.cookbook"}}{{/link-to}}</div>
      <div class="w-sidebar_item"><a href="docs" class="w-app-nav_link w-link">{{t "navigation.docs"}}</a></div>
    </div>

  </div>
</div>
