const status = document.querySelector('#status'),
  list = document.querySelector('#kits'),
  button = document.querySelector('#refresh');
async function refresh() {
  button.disabled = true;
  status.textContent = 'Loading';
  try {
    const response = await fetch('/api/kits');
    if (!response.ok) throw new Error('Could not load availability');
    const body = await response.json();
    list.replaceChildren(
      ...body.items.map((item) => {
        const li = document.createElement('li');
        li.textContent = 'Kit ' + item.id + ': ' + item.available + ' available';
        return li;
      }),
    );
    status.textContent = 'Current demo availability';
  } catch {
    status.textContent = 'Availability unavailable. Try again.';
  } finally {
    button.disabled = false;
  }
}
button.addEventListener('click', refresh);
refresh();