<%= render Spina::UserInterface::HeaderComponent.new do |header| %>
  <% header.with_after_breadcrumbs do %>
    <%= link_to "/", class: 'px-3 py-1.5 flex items-center text-gray-400 hover:text-gray-700', data: {turbo: false} do %>
      <%= heroicon("external-link", style: :mini, class: "w-4 h-4") %>
      <span class="text-sm ml-1"><%=t "spina.preview_website" %></span>
    <% end %>
  <% end %>
  
  <% header.with_actions do %>
    <% if @resource %>
      <%= link_to spina.edit_admin_resource_path(@resource), class: 'btn btn-default' do %>
        <%= heroicon('cog-8-tooth', style: :solid, class: 'text-gray-300 w-5 h-5 -ml-1 mr-1') %>
        <%=t 'spina.resources.settings', label: @resource.label %>
      <% end %>
    <% end %>
    
    <div class="ml-3">
      <%= render Spina::Pages::NewPageButtonComponent.new(@page_templates, resource: @resource) %>
    </div>
  <% end %>
  
  <% header.with_navigation do %>
    <nav class="-mb-1 md:-mb-3 mt-4">
      <ul class="inline-flex flex-wrap w-auto rounded-md bg-white">
        <%= render Spina::UserInterface::TabLinkComponent.new(spina.admin_pages_path, active: @resource.nil?) do %>
          <%= heroicon('collection', style: :solid, class: "h-4 w-4 mr-1 -ml-1 opacity-75") %>
          <%=t 'spina.website.main' %>
        <% end %>
        
        <% Spina::Resource.order(:name).each do |resource| %>
        
          <%= render Spina::UserInterface::TabLinkComponent.new(spina.admin_pages_path(resource_id: resource.id), active: @resource == resource) do %>
            <%= heroicon('collection', class: 'h-4 w-4 mr-1 -ml-1 opacity-75') %>
            <%= resource.label %>
          <% end %>
          
        <% end %>
      </ul>
    </nav>
  <% end %>
<% end %>

<% if @pages.any? %>
  
  <div class="my-6 md:m-8 bg-white md:rounded-lg border-l-0 border-r-0 border md:border-r md:border-l border-gray-200 border-b-0 shadow-sm">
    <%= render Spina::Pages::ListComponent.new(pages: @pages, sortable: @resource.nil? || @resource&.order_by.blank?) %>
  </div>
  
<% else %>

  <div class="m-8 my-6 italic text-gray-400"><%=t 'spina.pages.no_pages_yet' %></div>
  
<% end %>
