<div class="dashboard">
  <div class="sidebox leftsidebox" id="langbox">
    <div class="boxtitle"></div>
    <script>
      thisNode.getNextChild("langboxtt").getRelationship("siteelementsdata").getChild().writeProp(thisElement);
    </script>
    <div class="boxbody"></div>
    <script> 
      const {languages, setCurrentLanguage, getCurrentLanguage}= await import('./' + CLIENT_MODULES_PATH + 'languages.mjs');
      const {AlertMessage}=await import('./' + CLIENT_MODULES_PATH + 'alert.mjs');
      const {getSiteText} = await import('./' + CLIENT_MODULES_PATH + 'sitecontent.mjs');
      const {populateLang}=await import('./' + CLIENT_MODULES_PATH + 'langcopy.mjs');
      const {setActive}=await import('./' + CLIENT_MODULES_PATH + 'activelauncher.mjs');

      function onSelected(langNode){
        setActive(langNode);
        setCurrentLanguage(langNode);
        const myalert=new AlertMessage(thisContext.getDataBranch(getSiteText().getNextChild("langbox").getNextChild("changelangwait")).getChild().props.value);
        myalert.showAlert();
        getSiteText().notifyObservers("language change")
        myalert.props.timeout=3000;
        myalert.hideAlert();
      }

      if (webuser.isSystemAdmin()) {
        const refreshLangSelector=()=>{
          const childContainer=languages.childContainer;
          languages.setChildrenView(document.querySelector('#langs-select'), document.querySelector('#langs-select-tp')); // Refresh de lang info
          languages.childContainer=childContainer;
        }
        const onAdded = async (newLangNode)=>{
          newLangNode.props.code=getCurrentLanguage().props.code;
          await newLangNode.request("edit my props", {values:{code: getCurrentLanguage().props.code}});
          //We show the msg for waiting
          const myalert=new AlertMessage(getSiteText().getNextChild("langbox").getNextChild("newlangwait").getRelationship("siteelementsdata").getChild().props.value);
          myalert.showAlert();
          await populateLang(newLangNode);
          myalert.hideAlert();
          setCurrentLanguage(languages.getChild({id: newLangNode.props.id}));

          refreshLangSelector();
          onSelected(newLangNode);
          //languages.setChildrenView(document.querySelector('#langbox .boxbody'), "language");  // esto quiza no haria falta:
        }
        languages.addEventListener('addNewNode', onAdded, "addALang");
        const onSwap=()=>{
          refreshLangSelector();
        }
        languages.addEventListener('moveNode', onSwap, "swapLang");
        const onDelete=(delNode)=>{
          //when a del lang was selected we click the previous
          if (delNode.selected  && languages.getSysKey("sort_order") && languages.children.length>0) {
            let position=1;
            if (delNode.props[languages.getSysKey("sort_order")] > 1) position=delNode.props[languages.getSysKey("sort_order")]-1;
            onSelected(languages.children[position-1]);
          }
          refreshLangSelector();
        };
        languages.addEventListener("deleteChildNode", onDelete, "deleteLang");
      }
      languages.setChildrenView(thisElement, "language");
    </script>
  </div>
</div>