<%= render Spina::UserInterface::HeaderComponent.new do |header| %>
  <% header.with_navigation do %>
    <nav class="-mb-3 mt-4">
      <ul class="inline-flex flex-wrap w-auto rounded-md bg-white">
        <% @navigations.each do |navigation| %>
          <%= render Spina::UserInterface::TabLinkComponent.new(spina.edit_admin_navigation_path(navigation), active: @navigation == navigation) do %>
            <%= heroicon('bars-3-bottom-left', style: :solid, class: 'w-4 h-4 mr-1') %>
            <%= navigation.label %>
          <% end %>
        <% end %>
      </ul>
    </nav>
  <% end %>
<% end %>

<div class="p-4 md:p-8 max-w-screen-xl">
  
  <%= render Spina::Forms::GroupComponent.new(label: Spina::Navigation.model_name.human, description: t('spina.navigations.description')) do %>
    <ul class="space-y-2" data-controller="sortable" data-sortable-target="list" id="<%= dom_id(@navigation) %>">
      <%= form_with url: spina.sort_admin_navigation_path(@navigation), data: {sortable_target: "form"} do |f| %>
      <% end %>
      
      <%= render @navigation.navigation_items.sorted.roots %>
    </ul>
    
    <%= link_to spina.new_admin_navigation_navigation_item_path(@navigation), class: 'btn btn-default w-56 text-center mt-2 bg-transparent', data: {turbo_frame: "modal"} do %>
      <div class="w-full"><%=t 'spina.navigations.add_menu_item' %></div>
    <% end %>
  <% end %>
  
</div>
