<div class="max-w-7xl mx-auto">
  <div class="mb-6">
    <h1 class="text-3xl font-bold text-gray-900">Pages</h1>
    <p class="mt-2 text-gray-600">Manage your website pages and their content sections</p>
  </div>

  <!-- Search Form -->
  <div class="mb-6 bg-white rounded-lg shadow p-4">
    <%= form_with url: site_admin_pages_path, method: :get, local: true, class: "flex gap-4" do |f| %>
      <div class="flex-1">
        <%= f.text_field :search, value: params[:search], placeholder: "Search pages...", class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" %>
      </div>
      <%= f.submit "Search", class: "px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer" %>
    <% end %>
  </div>

  <!-- Pages List -->
  <div class="space-y-3">
    <% if @pages.any? %>
        <% @pages.each do |page| %>
          <% page_parts_count = page.page_parts.where(website_id: current_website&.id, show_in_editor: true).count %>
          <% page_path = page.slug == 'home' ? '/' : "/p/#{page.slug}" %>
          <% public_url = "#{request.protocol}#{request.host_with_port}#{page_path}" %>

      <div class="bg-white rounded-lg shadow overflow-hidden">
          <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50 transition-colors">
            <div class="flex items-center flex-1">
              <!-- Page Icon -->
              <div class="w-10 h-10 rounded-lg bg-blue-50 border border-blue-100 flex items-center justify-center mr-4">
                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
              </div>

              <div class="flex-1">
                <div class="flex items-center gap-3">
                  <h3 class="text-lg font-semibold text-gray-900"><%= page.slug.titleize %></h3>
                  <a href="<%= public_url %>" target="_blank" class="text-gray-400 hover:text-blue-600" title="View page on site">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                    </svg>
                  </a>
                </div>
                <p class="text-sm text-gray-500 mt-0.5">
                  /<%= page.slug %>
                  <% if page_parts_count > 0 %>
                    <span class="mx-1">&middot;</span>
                    <span><%= page_parts_count %> content section<%= page_parts_count == 1 ? '' : 's' %></span>
                  <% end %>
                </p>
              </div>
            </div>

            <div class="flex items-center gap-2">
              <%= link_to edit_site_admin_page_path(page),
                          class: 'inline-flex items-center px-3 py-1.5 text-sm bg-blue-600 text-white hover:bg-blue-700 rounded-lg shadow-sm',
                          title: 'Edit page content sections' do %>
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                </svg>
                Edit
              <% end %>
              <%= link_to settings_site_admin_page_path(page),
                          class: 'inline-flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg border border-gray-300',
                          title: 'Page settings (URL, navigation visibility)' do %>
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
                Settings
              <% end %>
            </div>
          </div>
      </div>
        <% end %>
    <% else %>
      <div class="bg-white rounded-lg shadow overflow-hidden px-6 py-12 text-center text-gray-500">
        <svg class="mx-auto h-12 w-12 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        <p class="text-gray-600">No pages found</p>
      </div>
    <% end %>
  </div>

  <%# Pagination %>
  <%= render 'shared/pagination', pagy: @pagy %>
</div>
