(function () {

  const table = document.querySelector('#monitorcito');

  function loadData () {
    fetch('/api')
    .then((response) => response.json())
    .then((serviceStatus) => {

      while (table.firstChild) {
        table.removeChild(table.firstChild)
      }

      for (const [service, isActive] of Object.entries(serviceStatus)) {
        const row = document.createElement('tr');
        const serviceCell = document.createElement('td');
        serviceCell.appendChild(document.createTextNode(service));
        const isActiveCell = document.createElement('td');
        isActiveCell.appendChild(document.createTextNode(isActive ? 'OK' : 'FAIL'));
        isActiveCell.classList.add(isActive);
        row.appendChild(serviceCell);
        row.appendChild(isActiveCell);
        table.appendChild(row);
      }

      setTimeout(loadData, 5000);
    })
    .catch(() => {
      const container = document.querySelector('main');
      container.removeChild(table);
      const paragraph = document.createElement('p');
      paragraph.appendChild(document.createTextNode('Everything is broken. If your internet works, please check the server\'s not on fire. When in doubt, just refresh.'));
      paragraph.classList.add('critical');
      container.appendChild(paragraph);
    })
  }

  loadData();
}
)();