<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold text-gray-800">CMS Pages</h1>
  <a href="/admin/pages/create" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700"><i class="fas fa-plus mr-1"></i> Add Page</a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
  <table class="w-full text-sm">
    <thead class="bg-gray-50">
      <tr class="text-left text-gray-500">
        <th class="px-6 py-4 font-medium">Title</th>
        <th class="px-6 py-4 font-medium">Slug</th>
        <th class="px-6 py-4 font-medium text-center">Published</th>
        <th class="px-6 py-4 font-medium text-right">Order</th>
        <th class="px-6 py-4 font-medium">Updated</th>
        <th class="px-6 py-4 font-medium text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      <% if (typeof pages !== 'undefined' && pages && pages.length) { %>
        <% pages.forEach(function(page) { %>
          <tr class="border-t hover:bg-gray-50">
            <td class="px-6 py-4 font-medium text-gray-800"><%= page.title %></td>
            <td class="px-6 py-4 text-gray-500">/<%= page.slug %></td>
            <td class="px-6 py-4 text-center">
              <span class="px-2 py-0.5 rounded-full text-xs font-medium <%= page.isPublished ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' %>"><%= page.isPublished ? 'Yes' : 'No' %></span>
            </td>
            <td class="px-6 py-4 text-right"><%= page.sortOrder %></td>
            <td class="px-6 py-4 text-gray-500"><%= new Date(page.updatedAt).toLocaleDateString('en-IN') %></td>
            <td class="px-6 py-4 text-right">
              <a href="/admin/pages/<%= page.id %>/edit" class="text-indigo-600 hover:underline mr-3"><i class="fas fa-edit"></i></a>
              <form action="/admin/pages/<%= page.id %>/delete" method="POST" class="inline" onsubmit="return confirm('Delete this page?')">
                <button type="submit" class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button>
              </form>
            </td>
          </tr>
        <% }) %>
      <% } else { %>
        <tr><td colspan="6" class="px-6 py-12 text-center text-gray-400">No pages found.</td></tr>
      <% } %>
    </tbody>
  </table>
</div>
