document.addEventListener("turbolinks:load", function () {
  var demoForm = document.getElementById('demo-form');
  if (!demoForm) {
    return;
  }
  demoForm.addEventListener('submit', function(e) {
    var submitButton = document.getElementById('demo-submit');
    submitButton.innerText = 'loading...';
    submitButton.disabled = 'true'
  });

  demoForm.addEventListener('tinyforms:submitted', function(e) {
    var name = document.getElementById('demo-submission-name');
    var demoFields = document.getElementById('demo-fields');
    var demoSucess = document.getElementById('demo-success');
    var demoIframe = document.getElementById('demo-sheet');
    demoFields.style.display = 'none';
    demoSucess.style.display = 'block';
    name.innerText = e.detail.submission.Name;
    // The airtable sheet must be reloaded for the submission to get visible
    if (demoIframe.dataset.refresh) {
      demoIframe.src = demoIframe.src + '&c=' + new Date().getTime();
    }
  });
});