{{template "head" .}}
{{template "topbar" .}}
<div class="page">
  <div class="head-row">
    <h1>Saved pastes</h1>
    <span class="count" id="count"></span>
  </div>
  <div class="search"><input id="filter" placeholder="Search…"><span class="search-spinner" id="search-spinner"></span></div>
  <div class="float">
    <table>
      <colgroup><col style="width:260px"><col style="width:140px"><col style="width:120px"><col style="width:150px"><col style="width:190px"><col style="width:100px"></colgroup>
      <thead><tr>
        <th data-sort="title" class="sortable"><span class="sort-ind"></span>Paste</th>
        <th data-sort="language" class="sortable"><span class="sort-ind"></span>Language</th>
        <th data-sort="size" class="sortable"><span class="sort-ind"></span>Size</th>
        <th data-sort="created_at" class="sortable"><span class="sort-ind"></span>Created</th>
        <th data-sort="custom_slug" class="sortable"><span class="sort-ind"></span>URL</th>
        <th data-sort="id" class="sortable"><span class="sort-ind"></span>ID</th>
      </tr></thead>
      <tbody id="rows"></tbody>
    </table>
    <div class="empty" id="empty" style="display:none">No pastes from this browser yet.</div>
  </div>
</div>
<script src="/static/table.js"></script>
<script>
function toast(msg, kind) {
  let t = document.querySelector('.toast');
  if (!t) { t = document.createElement('div'); t.className = 'toast'; document.body.appendChild(t); }
  t.textContent = msg;
  t.classList.remove('success', 'error');
  if (kind === 'success') t.classList.add('success');
  if (kind === 'error') t.classList.add('error');
  t.classList.add('show');
  clearTimeout(t._h);
  t._h = setTimeout(() => t.classList.remove('show'), 2000);
}

const t = PaletteTable.init({
  endpoint: '/api/mine',
  perPage: 50,
  hasPager: false,
  rowHtml: it =>
    `<tr class="row" data-href="/${t.esc(it.id)}"><td>` +
    (it.title
      ? `${t.esc(it.title)}`
      : `<a class="slug" href="/${t.esc(it.id)}">${t.esc(it.id)}</a>`) +
    `</td>` +
    `<td><span class="badge">${t.esc(it.language || 'text')}</span></td>` +
    `<td class="dim">${t.fmtSize(it.size)}</td><td class="dim" data-ts="${it.created_at}">${t.ago(it.created_at)}</td>` +
    (it.custom_slug ? `<td><a class="slug url-link" href="/${t.esc(it.custom_slug)}">/${t.esc(it.custom_slug)}</a></td>` : `<td class="dim">none</td>`) +
    `<td class="dim"><a class="id-link" href="/${t.esc(it.id)}">${t.esc(it.id)}</a></td>` +
    `<td><button class="btn btn-icon del" data-id="${t.esc(it.id)}" title="Delete paste" aria-label="Delete paste">&times;</button></td></tr>`,
  emptyFiltered: 'No pastes from this browser match your search.',
  emptyAll: 'No pastes from this browser yet.',
});

// delete buttons (viewer-scoped, enforced server-side #37)
document.getElementById('rows').addEventListener('click', async e => {
  const del = e.target.closest('button.del');
  if (!del) return;
  e.stopPropagation();
  del.disabled = true;
  try {
    const res = await fetch('/api/pastes/' + del.dataset.id, { method: 'DELETE' });
    if (res.ok) { toast('Deleted', 'success'); t.load(); }
    else { toast('Delete failed', 'error'); del.disabled = false; }
  } catch (err) { toast('Delete failed', 'error'); del.disabled = false; }
});

t.load();
</script>
{{template "foot" .}}