<div data-controller="language-menu">
  <header>
    <%= link_to svg("ikea-foundation-203x22"), url_for(controller: "game", action: "index") %>

    <button type="button"
            class="language-button"
            data-language-menu-target="button"
            data-action="click->language-menu#toggle"
            aria-controls="language-menu"
            aria-expanded="false"
            aria-label="<%= strip_tags t("game.please_choose_a_language") %>">
      <%= svg "ico-globe" %>
      <%= svg "ico-close" %>
    </button>
  </header>

  <nav id="language-menu"
        data-language-menu-target="menu"
        aria-labelledby="language-title"
        hidden>
    <h2 id="language-title"><%= t("game.please_choose_a_language").html_safe %></h2>
    <ul class="languages">
      <% t("language_names").each do |k, v| %>
        <% current = (k == I18n.locale) %>
        <li><%= link_to v, 
                        url_for(locale: k), 
                        class: ("current" if current),
                        "aria-current": ("page" if current) %></li>
      <% end%>
    </ul>
  </nav>
</div>