SpinaCMS/Spina

<div data-controller="tabs" data-tabs-active="cursor-default text-gray-900 bg-spina-dark bg-opacity-10" data-tabs-inactive="cursor-pointer bg-transparent text-gray-400 border-transparent">
  <%= render Spina::UserInterface::HeaderComponent.new do |header| %>
    <% header.with_after_breadcrumbs do %>
      <% if @page.draft? %>
        <span class="text-gray-400 ml-2 text-sm">(<%= Spina::Page.human_attribute_name(:draft) %>)</span>
      <% end %>
      <%= link_to @page.materialized_path(locale: @locale), class: 'px-3 py-2 flex items-center text-gray-400 hover:text-gray-700', data: {turbo: false} do %>
        <%= heroicon("external-link", style: :mini, class: "w-4 h-4") %>
      <% end %>
    <% end %>
    <% header.with_actions do %>
      <%= render Spina::Pages::ActionsComponent.new(page: @page, locale: @locale) %>
    <% end %>
    <% header.with_navigation do %>
      <nav class="-mb-3 mt-4">
        <ul class="inline-flex w-auto rounded-md bg-white">
          <% @tabs.each do |tab_name| %>
            <%= render partial: "button_#{tab_name}" %>
          <% end %>
        </ul>
      </nav>
    <% end %>
  <% end %>
  <div class="p-4 md:p-8">
    <%= form_with model: @page, url: spina.admin_page_path(@page), id: dom_id(@page) do |f| %>
      <%= hidden_field_tag :locale, @locale %>
      <% Mobility.with_locale(@locale) do %>
        <% @tabs.each_with_index do |tab_name, idx| %>
          <div data-tabs-target="pane" id="<%= tab_name %>" <%= 'hidden' unless idx.zero? %>>
            <%= render partial: "form_#{tab_name}", locals: {f: f} %>
          </div>
        <% end %>
      <% end %>
    <% end %>
  </div>
</div>