function renderRepoMix(element, data) {
  const repos = data.repos || [];
  const issues = (data.issues || []).filter((issue) => issue.state === 'open');
  const pullRequests = data.pull_requests || [];
  element.innerHTML = '<div class="kv"><div class="label">Repos</div><div class="value">' + repos.length + '</div><div class="label">Open issues</div><div class="value">' + issues.length + '</div><div class="label">Open PRs</div><div class="value">' + pullRequests.length + '</div></div>';
}

async function updateRepoMix(element, fetchContext = fetch) {
  try {
    const response = await fetchContext('api/v1/context', {
      headers: { Accept: 'application/json' },
    });
    if (!response.ok) throw new Error('HTTP ' + response.status);
    renderRepoMix(element, await response.json());
  } catch (error) {
    element.innerHTML = '<div class="muted">Widget unavailable.</div>';
  }
}

if (typeof module !== 'undefined' && module.exports) {
  updateRepoMix.renderRepoMix = renderRepoMix;
  module.exports = updateRepoMix;
}