<div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200 lg:mt-1.5">
  <div class="w-full mb-1">
    <div class="mb-4">
      <nav class="flex mb-5" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 text-sm font-medium md:space-x-2">
          <li class="inline-flex items-center">
            <%= link_to tenant_admin_root_path, class: "inline-flex items-center text-gray-700 hover:text-blue-600" do %>
              <svg class="w-5 h-5 mr-2.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
              Dashboard
            <% end %>
          </li>
          <li>
            <div class="flex items-center">
              <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
              <%= link_to "Pages", tenant_admin_pages_path, class: "ml-1 text-gray-700 hover:text-blue-600 md:ml-2" %>
            </div>
          </li>
          <li>
            <div class="flex items-center">
              <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
              <span class="ml-1 text-gray-400 md:ml-2" aria-current="page"><%= @page.page_title || @page.link_title || "Page ##{@page.id}" %></span>
            </div>
          </li>
        </ol>
      </nav>
      <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl"><%= @page.page_title || @page.link_title || "Page ##{@page.id}" %></h1>
    </div>
    <div class="flex items-center space-x-2 sm:space-x-3">
      <%= link_to "← Back to Pages", tenant_admin_pages_path, class: "inline-flex items-center px-3 py-2 text-sm font-medium text-center text-gray-500 hover:text-gray-900" %>
    </div>
  </div>
</div>

<div class="grid grid-cols-1 gap-4 my-4 xl:grid-cols-2">
  <!-- Page Information Card -->
  <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-semibold text-gray-900">Page Information</h3>
    </div>
    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
      <div>
        <dt class="text-sm font-medium text-gray-500">Page Title</dt>
        <dd class="mt-1 text-sm text-gray-900"><%= @page.page_title || "N/A" %></dd>
      </div>
      <div>
        <dt class="text-sm font-medium text-gray-500">Link Title</dt>
        <dd class="mt-1 text-sm text-gray-900"><%= @page.link_title || "N/A" %></dd>
      </div>
      <div>
        <dt class="text-sm font-medium text-gray-500">Slug</dt>
        <dd class="mt-1 text-sm text-gray-900"><%= @page.slug || "N/A" %></dd>
      </div>
      <% if @page.respond_to?(:website) && @page.website %>
        <div>
          <dt class="text-sm font-medium text-gray-500">Website</dt>
          <dd class="mt-1 text-sm text-gray-900">
            <%= link_to @page.website.subdomain, tenant_admin_website_path(@page.website), class: "text-blue-600 hover:underline" %>
          </dd>
        </div>
      <% end %>
      <div>
        <dt class="text-sm font-medium text-gray-500">Visible</dt>
        <dd class="mt-1 text-sm text-gray-900"><%= @page.visible ? "Yes" : "No" %></dd>
      </div>
      <div>
        <dt class="text-sm font-medium text-gray-500">Created</dt>
        <dd class="mt-1 text-sm text-gray-900"><%= format_date(@page.created_at) %></dd>
      </div>
      <div>
        <dt class="text-sm font-medium text-gray-500">Last Updated</dt>
        <dd class="mt-1 text-sm text-gray-900"><%= format_date(@page.updated_at) %></dd>
      </div>
    </dl>
  </div>

  <!-- Content Preview -->
  <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
    <h3 class="mb-4 text-lg font-semibold text-gray-900">Content Preview</h3>
    <div class="prose max-w-none text-sm text-gray-700">
      <% if @page.respond_to?(:raw_html) && @page.raw_html.present? %>
        <%= @page.raw_html.to_s.truncate(500) %>
      <% else %>
        <p class="text-gray-500 italic">No content available</p>
      <% end %>
    </div>
  </div>
</div>
