<%= turbo_frame_tag :navigation_item_form do %>
  <%= form_with model: @navigation_item, url: [:admin, @navigation, @navigation_item], data: {turbo_frame: "_top"} do |f| %>
    <%= f.hidden_field :parent_id %>
    <%= f.hidden_field :kind %>
    
    <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
      <div class="sm:flex sm:items-start">
        <div class="w-full">
          <h3 class="text-lg leading-6 font-medium text-gray-900 flex" id="modal-headline">
            <%= @navigation_item.persisted? ? t('spina.navigations.edit_menu_item') : t('spina.navigations.add_menu_item') %>
          </h3>
          
          <% if @navigation_item.new_record? %>
            <ul class="inline-flex flex-wrap w-auto rounded-md mt-2">
              <%= render Spina::UserInterface::TabLinkComponent.new(new_admin_navigation_navigation_item_path(@navigation, parent_id: @navigation_item.parent_id, kind: 'page'), active: @navigation_item.page_kind?) do %>
                <%= heroicon('document', style: :outline, class: 'w-4 h-4 mr-1 -mt-0.5') %>
                <%=t "spina.navigation_items.page" %>
              <% end %>
              
              <%= render Spina::UserInterface::TabLinkComponent.new(new_admin_navigation_navigation_item_path(@navigation, parent_id: @navigation_item.parent_id, kind: 'url'), active: @navigation_item.url_kind?) do %>
                <%= heroicon('link', style: :outline, class: 'w-4 h-4 mr-1 -mt-0.5') %>
                <%=t "spina.navigation_items.url" %>
              <% end %>
            </ul>
          <% end %>
          
          <div>
            <%= render partial: "#{@navigation_item.kind}_form", locals: {f: f} %>
          </div>
        </div>
      </div>
    </div>
      
    <div class="px-4 pb-5 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
      <button type="submit" class="btn btn-primary w-full sm:w-auto sm:ml-2">
        <%= @navigation_item.persisted? ?  t('spina.ui.save_changes') : t('spina.navigations.add_menu_item') %>
      </button>
    
      <button type="button" class="btn btn-default w-full sm:w-auto mt-2 sm:mt-0" data-action="modal#close">
        <%=t 'spina.ui.cancel' %>
      </button>
    </div> 
  <% end %>
<% end %>