  <!--
    launcher: dashboard -> expimp
  -->
<div class="dashboard" data-container>
  <div style="text-align:center" class="export-import">
    <div>
      <div class="msgbox" style="position:relative;"  data-title>
        <div data-butedit class="btmiddleright"></div>
        <span data-value></span>
      </div>
    </div>
    <form style="display:flex; flex-flow:column; align-items:center;">
      <div style="position:relative;" data-nosel>
        <div data-butedit class="btmiddleright"></div>
        <input data-value type="hidden" name="noselection" disabled>
      </div>
      <div>
        <div class="msgbox">
          <table style="margin:auto; text-align:left; margin-bottom:1em;" class="exp-select">
            <tr>
              <td style="position:relative;">
                <input type="radio" value="menus" name="dataoption">
                <details>
                  <summary style="position:relative; display: inline-block;" data-chkgeneral>
                    <div data-butedit class="btmiddleright"></div>
                    <span data-value></span>
                  </summary>
                  <span style="position:relative;" data-chkgeneral-details>
                    <div data-butedit class="btmiddleright"></div>
                    <span class="explanation" data-value></span>
                  </span>
                </details>
              </td>
            </tr>
            <tr>
              <td style="position:relative;">
                <input type="radio" value="catalog" name="dataoption">
                <details>
                  <summary style="position:relative; display: inline-block;" data-chkcatg>
                    <div data-butedit class="btmiddleright"></div>
                    <span data-value></span>
                  </summary>
                  <span style="position:relative;" data-chkcatg-details>
                    <div data-butedit class="btmiddleright"></div>
                    <span class="explanation" data-value></span>
                  </span>
                </details>
              </td>
            </tr>
            <tr>
              <td style="position:relative;">
                <input type="radio" value="checkout" name="dataoption">
                <details>
                  <summary style="position:relative; display: inline-block;" data-chkcheckout>
                    <div data-butedit class="btmiddleright"></div>
                    <span data-value></span>
                  </summary>
                  <span style="position:relative;" data-chkcheckout-details>
                    <div data-butedit class="btmiddleright"></div>
                    <span class="explanation" data-value></span>
                  </span>
                </details>
              </td>
            </tr>
            <tr>
              <td style="position:relative;">
                <input type="radio" value="lang" name="dataoption" data-chklang-input>
                <div>
                <details>
                  <summary style="position:relative; display: inline-block;" data-chklang>
                    <div data-butedit class="btmiddleright"></div>
                    <span data-value></span>
                  </summary>
                  <span style="position:relative;" data-chklang-details>
                    <div data-butedit class="btmiddleright"></div>
                    <span class="explanation" data-value></span>
                  </span>
                </details>
                <div class="langselectlist" style="display:none" data-languages-list>
                  <div style="margin:auto; text-align:left; margin-bottom:0.2em">
                    <input type="checkbox" value="" name="" data-lang-input>
                    <span data-lang-code></span>
                  </div>
                </div>
              </div>
              </td>
            </tr>
            <tr>
              <td style="position:relative;">
                <input type="radio" value="users" name="dataoption">
                <details>
                  <summary style="position:relative; display: inline-block;" data-chkusers>
                    <div data-butedit class="btmiddleright"></div>
                    <span data-value></span>
                  </summary>
                  <span style="position:relative;" data-chkusers-details>
                    <div data-butedit class="btmiddleright"></div>
                    <span class="explanation" data-value></span>
                  </span>
                </details>
              </td>
            </tr>
            <tr>
              <td style="position:relative;">
                <input type="radio" value="db" name="dataoption">
                <details>
                  <summary style="position:relative; display: inline-block;" data-chk-entire-db>
                    <div data-butedit class="btmiddleright"></div>
                    <span data-value></span>
                    <!--*** falta pasar a bd Entire db -->
                  </summary>
                  <span style="position:relative;" data-chk-entire-db-details>
                    <div data-butedit class="btmiddleright"></div>
                    <span class="explanation" data-value></span>
                  </span>
                </details>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <span style="position:relative;" data-butexp>
        <div data-butedit class="btmiddleright"></div>
        <button type="button" class="btn" data-value></button>
        <script>
          thisNode.getNextChild("butexp").getRelationship("siteelementsdata").getChild().writeProp(thisElement);
          
          if (!webuser.isSystemAdmin) thisElement.disabled=true; //Only sysadmin, not webadmin allowed
          const {AlertMessage}=await import('./' + CLIENT_MODULES_PATH + 'alert.mjs');
          const {exportFunc}=await import('./' + CLIENT_MODULES_PATH + 'export.mjs');
          const {exportFormat} = await import('./' + SHARED_MODULES_PATH + 'utils.mjs');
          
          //This facility is for export the customized data of a shop so we could update the shop software and keep the data
          thisElement.addEventListener("click", async function(event){
            event.preventDefault();
            const expFunc=exportFunc.get(thisElement.form.dataoption.value);
            if (!expFunc) {
              new AlertMessage(thisElement.form.elements.noselection.value, 2000).showAlert();
              return;
            }
            if (thisElement.form.dataoption.value=="lang") {
              const {languages}=await import('./' + CLIENT_MODULES_PATH + 'languages.mjs');
              const getSelectedLangData=function(langdata, selector) {
                const selectedLangs=Array.from(selector).filter(sel=>sel.checked).map(sel=>sel.value);
                //Now we filter the languages selected from the datalang
                langdata.children = langdata.children.filter(child=>selectedLangs.includes(child.props.id));
                return langdata;
              };
              const langdata=languages.clone();
              const myLangs=thisElement.form.querySelectorAll('input[type="checkbox"]');

              getSelectedLangData(langdata, myLangs);
              if (langdata.children.length==0) {
                //we show the alert message No selection
                new AlertMessage(thisElement.form.elements.noselection.value, 2000).showAlert();
                return;
              }
              thisElement.form.result.value=exportFormat(JSON.stringify(await expFunc(langdata)));
              return;
            }
            thisElement.form.result.value=exportFormat(JSON.stringify(await expFunc()));
          });
        </script>
      </span>
      <div style="padding-top: 10px">
        <textarea name="result" rows="10" cols="50"></textarea>
      </div>
    </form>
  </div>
</div>