<tr style="position:relative;">
  <td data-select>
    <input type="radio" name="shipping">
    <script>
      function setOrderShipping(){
        const shippingtypesRel=webuser.getRelationship("orders").getChild().getRelationship("ordershippingtypes");
        shippingtypesRel.children=[]; //In case we already selected
        const orderShippingType=shippingtypesRel.addChild(new thisNode.constructor()); // new Node
        orderShippingType.props.name=thisNode.getRelationship("shippingtypesdata").getChild().props.name;
        orderShippingType.props.delay_hours=thisNode.props.delay_hours;
        orderShippingType.props.price=thisNode.props.price;
        import('./' + CLIENT_MODULES_PATH + 'activelauncher.mjs')
        .then(({setActive})=>setActive(thisNode));
      }
      thisElement.addEventListener("change", function(event) {
        if (!this.checked) return;
        setOrderShipping();
      });
      //selecting first option
      if (thisNode.parent.getChild()==thisNode) {
        thisElement.checked=true;
        setOrderShipping(); // it seems that change event is not affected by the checked=true
      }
    </script>
  </td>
  <td style="padding-left:1em; padding-right:2.2em;text-align:left;">
    <details>
      <summary style="position:relative; display: inline-block;" data-name>
        <div data-butedit class="btmiddleright"></div>
        <span data-value></span>
        <script>
          const thisNodeData=thisNode.getRelationship("shippingtypesdata").getChild();
          thisNodeData.writeProp(thisElement, "name");
          if (webuser.isWebAdmin() || webuser.isSystemAdmin() || webuser.isOrdersAdmin()) {
            const {visibleOnMouseOver}= await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
            visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
            thisNodeData.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement, thisProperty: "name"});
          }
        </script>
      </summary>
      <span style="position:relative;" data-description>
        <div data-butedit class="btmiddleright"></div>
        <span class="explanation" data-value></span>
        <script>
          const thisNodeData=thisNode.getRelationship("shippingtypesdata").getChild();
          thisNodeData.writeProp(thisElement, "description");
          if (webuser.isWebAdmin() || webuser.isSystemAdmin() || webuser.isOrdersAdmin()) {
            const {visibleOnMouseOver}= await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
            visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
            thisNodeData.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement, thisProperty: "description"});
          }
        </script>
      </span>
    </details>
  </td>
  <td style="padding-right:2em;text-align:right;">
    <span style="position:relative;" data-delay-hours>
      <div data-butedit class="btmiddleright"></div>
      <span data-value></span>
      <script>
        thisNode.writeProp(thisElement, "delay_hours");
        if (webuser.isSystemAdmin() || webuser.isOrdersAdmin()) {
          const {visibleOnMouseOver}= await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
          visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
          thisNode.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement, thisProperty: "delay_hours"});
        }
      </script>
    </span>
    <span style="position:relative;" data-hours>
      <div data-butedit class="btmiddleright"></div>
      <span data-value></span>
    </span>
    <script>
      const {getSiteText} = await import('./' + CLIENT_MODULES_PATH + 'sitecontent.mjs');
      getSiteText().getNextChild("hours").getRelationship("siteelementsdata").getChild().writeProp(thisElement);
    </script>
  </td>
  <td style="padding-right:2em;text-align: right;">
    <span style="position:relative;" data-price>
      <div data-butedit class="btmiddleright"></div>
      <span data-value></span>
      <script>
        const {intToMoney, moneyToInt} = await import('./' + CLIENT_MODULES_PATH + 'money.mjs');
        thisElement.textContent=intToMoney(thisNode.props.price);
        if (webuser.isSystemAdmin() || webuser.isOrdersAdmin()) {
          const {visibleOnMouseOver}= await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
          visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit]'), thisElement.parentElement);
          thisNode.appendView(thisElement.parentElement.querySelector('[data-id=butedit]'), "butedit", {editElement: thisElement, thisProperty: "price",  dataProcessor: moneyToInt});
          thisElement.onblur=function(){
            thisElement.textContent=intToMoney(moneyToInt(thisElement.textContent));
          }
        }
      </script>
    </span>
    <div class="btmiddleright">
      <div class="admnbtsgrid" data-admnbuts></div>
    </div>
    <script>
      if (webuser.isSystemAdmin() || webuser.isOrdersAdmin()) {
        const {visibleOnMouseOver}= await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
        visibleOnMouseOver(thisElement, thisElement.parentElement);
        thisNode.appendView(thisElement.querySelector('.admnbtsgrid'), "butchpos", {position: 'vertical'});
        thisNode.appendView(thisElement.querySelector('.admnbtsgrid'), "butdelete");
        thisNode.appendView(thisElement.querySelector('.admnbtsgrid'), "butaddnewnode");
      }
    </script>
  </td>
</tr>
<script>
  // Selection extends to the box area
  thisElement.addEventListener("click", function(event) {
    thisElement.querySelector("input").click();
  });
</script>