<div class="relative" data-controller="reveal" data-reveal-away-value>
  <button type="button" class="btn btn-default px-3" data-action="reveal#toggle">
    <%= helpers.heroicon("chat-alt", style: :solid, class: 'w-4 h-4 text-gray-300') %>
    
    <span class="ml-1 font-semibold"><%= @label %></span>
  </button>

  <div hidden data-reveal data-transition class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg border border-gray-200 z-20">
    <div class="rounded-md bg-white shadow-xs">
      <div class="py-1">
        <% locales.each do |locale| %>
          <%= link_to "?locale=#{locale}", class: "block px-3 py-2 text-sm leading-4 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 font-medium" do %>
            <div class="text-gray-700">
              <%=t('spina.pages.edit_translation', language: '<span class="font-semibold">' + t("spina.languages.#{locale}") + '</span>').html_safe %>  
            </div>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
</div>