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

<div class="card animate-on-scroll">
  <h2 style="margin-bottom:16px;">{{$d.T.Get "sharing.grant_title"}}</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>{{$d.T.Get "sharing.label_user_email"}}</label>
      <input type="text" name="viewer_id" id="viewerSearch"
             placeholder="{{$d.T.Get "sharing.placeholder_email"}}" autocomplete="off" required>
      <div id="searchResults"></div>
    </div>
    <button type="submit" class="btn btn-primary">{{$d.T.Get "sharing.btn_grant"}}</button>
  </form>
</div>

<div class="grid-2">
  <div class="card animate-on-scroll">
    <h2 style="margin-bottom:14px;">{{$d.T.Get "sharing.my_finances_title"}}</h2>
    <div class="table-wrap">
      <table>
        <thead>
          <tr><th>{{$d.T.Get "sharing.col_user"}}</th><th>{{$d.T.Get "sharing.col_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}}')">{{$d.T.Get "sharing.btn_revoke"}}</button>
            </td>
          </tr>
          {{else}}
          <tr><td colspan="3" class="text-center text-muted" style="padding:28px;">{{$d.T.Get "sharing.empty_my_grants"}}</td></tr>
          {{end}}
        </tbody>
      </table>
    </div>
  </div>

  <div class="card animate-on-scroll">
    <h2 style="margin-bottom:14px;">{{$d.T.Get "sharing.access_to_me_title"}}</h2>
    <div class="table-wrap">
      <table>
        <thead>
          <tr><th>{{$d.T.Get "sharing.col_owner"}}</th><th>{{$d.T.Get "sharing.col_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;">{{$d.T.Get "sharing.empty_access_to_me"}}</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>
const CONFIRM_REVOKE = {{$d.T.Get "sharing.confirm_revoke" | printf "%q"}};
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(CONFIRM_REVOKE)) 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}}