function recursiveAdaptWidgets(prefix, element, user) {
  //- This function is a workaround for the currently unworking populate
  //- Feel free to see examples on page-circles-

  element.querySelectorAll('[' + prefix + '-user-id]').forEach((el) => {
    el.setAttribute(el.getAttribute(prefix + '-user-id'), user['@id']);
  });

  if (element != document) {

    //- Allow to bind-user on selected attribute
    if (element.getAttribute(prefix + '-user-id')) {
      element.setAttribute(element.getAttribute(prefix + '-user-id'), user['@id']);
    }

    //- Allow to set data-src to a children sib-form
    if (element.getAttribute(prefix + '-bind-resources')) {
      let form = element.querySelector(element.getAttribute(prefix + '-bind-resources') + " sib-form");
      if (form) {
        form.setAttribute('data-src', element.component.resourceId.replace('members/', ''));
      }
    }

    //- Allow to put user on a targetted search field
    if (element.getAttribute(prefix + '-bind-user2input')) {
      element.querySelector(element.getAttribute(prefix + '-bind-user2input')).value = user['@id'];
    }

    //- In case your sib-display use a multiple, you have to target sub-sib-display auto-generated
    if (element.getAttribute(prefix + '-widgets-multiple') !== null) {
      element.querySelectorAll('div > sib-display').forEach((el) => {
        el.setAttribute(prefix + '-widgets', "");
      });
    }
  }

  //- This function is hooked every time a sib-something with prefix+"-widgets" is populated
  element.querySelectorAll('[' + prefix + '-widgets]').forEach((elementChild) => {
    elementChild.addEventListener('populate', () => {
      recursiveAdaptWidgets(prefix, elementChild, user);
    });
  });
}

// auxiliary function closes the user profile menu
function closeUserControls() {
  let userControls = document.querySelector('#user-controls');
  if (userControls) userControls.removeAttribute("open");
}

document.addEventListener('DOMContentLoaded', function (event) {
  const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
  const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
  const viewsContainer = Array.from(document.querySelectorAll('.views-container'));

  //- View change event
  // window.addEventListener('navigate', (event) => {
  // });

  //- Toggle sub-menus
  menuWrappers.forEach(menuWrapper => {
    const menu = menuWrapper.querySelector('.menu');
    menu.addEventListener('click', e => {
      menuWrapper.classList.toggle('is-closed');
    });
  });

  //- Open/close menu on the right
  rightMenus.forEach(rightMenu => {
    const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");

    btnRightMenu.addEventListener('click', e => {
      rightMenus.forEach(rM => rM.classList.toggle('offsite-is-closed'));
      viewsContainer.forEach(vC => vC.classList.toggle('sidebar-is-closed'));
    })
  });

  //- Watch every sib-forms & update data-src of linked sib-display
  document.querySelectorAll('sib-form').forEach(function(el) {
    el.addEventListener("save", function(event) {
      //clear cache on this resource
      //NOTE: this is required because the cache is not refreshed after POSTing changes on the resource
      if(el.component.resource != null) el.component.resource.clearCache();

      // if of the edited resource || id of the container of the created resource
      const resourceId = event.detail.resource['@id'] || el.dataset.src;

      //update all displays which use this resource
      Array.from(document.querySelectorAll('sib-display'))
      .filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
      .forEach(e => e.dataset.src = e.dataset.src); // and update them
    });
  });

  document.querySelector('sib-auth').getUser().then(user => {
    if (user !== null) {
      // Hide login button if already logged
      document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important');
      // Set current user id on set-user-id of sib-display
      recursiveAdaptWidgets("hd-inherit", document, user);
      for (leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) {
        leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.setAttribute('style', 'display:none !important'); // Hide Join button
      }
    }
  }).catch(error => console.log(error));

  // Document -> close menu
  document.addEventListener("click", event => {
    if (!event.target.closest('#user-controls')) closeUserControls();
  });

  // listen for keypress
  document.onkeydown = (e) => {
    e = e || window.event;
    if (e.key === "Escape" || e.key === "Esc") closeUserControls();
  };

});