<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>CMS Pages</h2>
</div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Page Title</th>
                        <th>Slug URL</th>
                        <th>Last Updated</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each pages}}
                    <tr>
                        <td>{{this.title}}</td>
                        <td>/{{this.slug}}</td>
                        <td>{{formatDate this.updated_at}}</td>
                        <td class="text-end">
                            <button class="btn btn-sm btn-outline-secondary" onclick='openCmsModal({{json this}})'><i class="bi bi-pencil"></i> Edit</button>
                        </td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Edit CMS Modal -->
<div class="modal fade" id="cmsModal" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <form id="cmsForm">
      <div class="modal-header">
        <h5 class="modal-title">Edit Page</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
          <input type="hidden" id="cmsId">
          <div class="mb-3">
              <label>Title</label>
              <input type="text" class="form-control" id="cmsTitle" required>
          </div>
          <div class="mb-3">
              <label>Content (HTML)</label>
              <textarea class="form-control" id="cmsContent" rows="15" required></textarea>
              <small class="text-muted">You can write HTML directly here.</small>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save Changes</button>
      </div>
      </form>
    </div>
  </div>
</div>

<script>
function openCmsModal(page) {
    document.getElementById('cmsId').value = page.id;
    document.getElementById('cmsTitle').value = page.title;
    document.getElementById('cmsContent').value = page.content;
    new bootstrap.Modal(document.getElementById('cmsModal')).show();
}

document.getElementById('cmsForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = {
        id: document.getElementById('cmsId').value,
        title: document.getElementById('cmsTitle').value,
        content: document.getElementById('cmsContent').value
    };

    const res = await fetch('/admin/cms/edit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
    const json = await res.json();
    if (json.success) window.location.reload();
    else alert(json.message);
});
</script>
