{{define "content"}}
{{$d := .}}
<h1 style="margin-bottom:24px;">Sharing</h1>

<div class="card animate-on-scroll">
  <h2 style="margin-bottom:16px;">Grant Read Access</h2>
  <form method="POST" class="flex flex-wrap" style="gap:10px; align-items:flex-end; position:relative;">
    <div class="form-group" style="margin-bottom:0; flex:1; min-width:220px; position:relative;">
      <label>User Email</label>
      <input type="text" name="viewer_id" id="viewerSearch"
             placeholder="Search by email…" autocomplete="off" required>
      <div id="searchResults"></div>
    </div>
    <button type="submit" class="btn btn-primary">Grant Access</button>
  </form>
</div>

<div class="grid-2">
  <div class="card animate-on-scroll">
    <h2 style="margin-bottom:14px;">People with access to my finances</h2>
    <div class="table-wrap">
      <table>
        <thead>
          <tr><th>User</th><th>Since</th><th></th></tr>
        </thead>
        <tbody>
          {{range $d.Grants}}
          <tr>
            <td style="font-size:13px;">{{.ViewerID}}</td>
            <td class="text-muted">{{.CreatedAt.Format "02 Jan 2006"}}</td>
            <td class="text-right">
              <button class="btn btn-danger btn-sm" onclick="revoke('{{.ViewerID}}')">Revoke</button>
            </td>
          </tr>
          {{else}}
          <tr><td colspan="3" class="text-center text-muted" style="padding:28px;">No access grants yet.</td></tr>
          {{end}}
        </tbody>
      </table>
    </div>
  </div>

  <div class="card animate-on-scroll">
    <h2 style="margin-bottom:14px;">Access granted to me</h2>
    <div class="table-wrap">
      <table>
        <thead>
          <tr><th>Owner</th><th>Since</th></tr>
        </thead>
        <tbody>
          {{range $d.Granted}}
          <tr>
            <td style="font-size:13px;">{{.OwnerID}}</td>
            <td class="text-muted">{{.CreatedAt.Format "02 Jan 2006"}}</td>
          </tr>
          {{else}}
          <tr><td colspan="2" class="text-center text-muted" style="padding:28px;">No one has shared with you yet.</td></tr>
          {{end}}
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
#searchResults {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 200px;
  overflow-y: auto;
  z-index: 50;
  display: none;
}
#searchResults div {
  padding: 9px 12px;
  font-size: 13.5px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  transition: background 0.12s;
}
#searchResults div:last-child { border-bottom: none; }
#searchResults div:hover { background: var(--bg3); }
</style>
<script>
let searchTimer;
const input   = document.getElementById('viewerSearch');
const results = document.getElementById('searchResults');

input.addEventListener('input', () => {
  clearTimeout(searchTimer);
  const q = input.value.trim();
  if (q.length < 2) { results.style.display = 'none'; return; }
  searchTimer = setTimeout(() => {
    fetch('/api/users/search?q=' + encodeURIComponent(q))
      .then(r => r.json())
      .then(users => {
        if (!users || !users.length) { results.style.display = 'none'; return; }
        results.innerHTML = users.map(u =>
          `<div onclick="selectUser('${u.id}','${u.email}')">${u.email}</div>`
        ).join('');
        results.style.display = 'block';
      });
  }, 280);
});

function selectUser(id, email) {
  input.value = email;
  results.style.display = 'none';
}

function revoke(viewerId) {
  if (!confirm('Revoke access for this user?')) return;
  fetch('/sharing/' + encodeURIComponent(viewerId), {method: 'DELETE'})
    .then(() => location.reload());
}

document.addEventListener('click', e => {
  if (!input.contains(e.target)) results.style.display = 'none';
});
</script>
{{end}}