<div class="productlargecontainer rmbox" style="color:rgb(40,40,40);" data-container>
  <div class="bt-wrapper">
    <button type="button" data-close-btn class="closeimage minibtn transp">
      <div class="closeimage"></div>
    </button>
  </div>
  <div class="productgrid">
    <div class="productimg" data-image-container style="position:relative;" data-size="big">
      <div data-butedit class="btmiddlecenter"  style="z-index:1"></div>
      <img class="productimg" data-value>
      <script>

        /*
        const {default: config} = await import('./' + CLIENT_CONFIG_PATH + 'main.mjs');
        const imageNode=thisNode.getRelationship("itemsimages").getChild();
        const myImage=imageNode?.props.imagename || config.defaultImg;
        thisElement.src=pathJoin(config.catalogImagesUrlPath, 'big', myImage);
        thisNode.addEventListener("changeProperty", (property) => {
          if (property=="image") {
            thisElement.src==pathJoin(config.catalogImagesUrlPath, 'big', thisNode.props.image);
          }
        }, "img");
        if (webuser.isProductAdmin() || webuser.isProductSeller()) {
          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]'), "buteditimage");
        }
        */
      </script>
    </div>
    <div>
     <div class="textproduct">
        <div class="itemname" data-name>
          <div style="display: inline-block; position:relative;">
            <div data-butedit class="btmiddleright"></div>
            <h3 data-value></h3>
          </div>
        </div>
        <div class="itemdescription" data-description>
          <div style="display: inline-block; position:relative;">
            <div data-butedit class="btmiddleright"></div>
            <div data-value></div>
          </div>
        </div>
      </div>
      <div style="display:flex;">
        <div class="addtocart" style="margin:auto;">
          <form>
            <div class="addtocartgrid">
              <div class="productprice" data-price>
                <span style="position: relative;">
                  <div data-butedit class="btmiddleright"></div>
                  <div data-value style="padding-right: 0.2em"></div>
                </span>
              </div>
              <div class="quantityselect" data-qtty>
                <select name="pquantity" style="color: #666"><option></option></select>
                <input style="visibility: hidden;" size="5">
              </div>
              <div style="position:relative;"  data-add-cart>
                <button type="button" class="btn" data-button>
                  <div class="cartplusimage"></div>
                </button>
                <!-- revisar -->
                <div data-butedit class="btmiddleright"></div>
                <input style="display:none" disabled data-value data-has-target data-target-attr="title" data-toggle>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- revisar -->
  <div class="thumbnails" data-thumbnails-container style="display:flex; gap: 0.6em; margin-left: 0.5em; margin-bottom: 0.5em;"></div>
  <script>
    thisParams.item.setThumbnails(thisElement)
    /*
    if (thisNode.getRelationship("itemsimages").children.length<2) thisElement.style.display="none";
    else thisNode.getRelationship("itemsimages").setChildrenView(thisElement, "itemthumbnails");
    */
  </script>
  <div style="display: inline-block; position:relative; z-index:6;"data-description-large>
    <div class="btmiddleright" style="display:flex;" data-edit-buts>
      <div data-butedit></div>
      <div data-buteditcode></div>
    </div>
    <div data-value style="padding-top: 1em" class="descriptionlarge"></div>
    <script>
      /*
      thisNode.getRelationship("itemsdata").getChild().writeProp(thisElement, "descriptionlarge");
      //adding the edition pencil
      if (webuser.isProductAdmin() || webuser.isProductSeller()) {
        const {visibleOnMouseOver}=await import('./' + CLIENT_MODULES_PATH + 'frontutils.mjs');
        visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit][data-but-name=norm]'), thisElement.parentElement);
        thisNode.getRelationship("itemsdata").getChild().appendView(thisElement.parentElement.querySelector('[data-id=butedit][data-but-name=norm]'), "butedit", {editElement: thisElement, thisProperty: "descriptionlarge", inlineEdition: false, thisAttribute: 'innerHTML'});
        visibleOnMouseOver(thisElement.parentElement.querySelector('[data-id=butedit][data-but-name=code]'), thisElement.parentElement);
        thisElement.onblur=function(){
          thisElement.parentElement.querySelector('textarea').value=thisElement.innerHTML;
        }
      }
      */
    </script>
    <textarea style="display:none; width:100%" rows="6" disabled data-edit-text data-has-target data-target-attr="innerHTML" data-toggle></textarea>
    <script>
      /*
      const myNode=thisNode.getRelationship("itemsdata").getChild();
      myNode.writeProp(thisElement, "descriptionlarge");
      thisElement.onblur=function(){
        thisElement.parentElement.querySelector('div[data-id=descriptionlarge]').innerHTML=thisElement.value;
        thisElement.style.display="none";
      }
      //adding the edition pencil
      if (webuser.isProductAdmin() || webuser.isProductSeller()) {
        myNode.appendView(thisElement.parentElement.querySelector('[data-id=butedit][data-but-name=code]'), "butedit", {editElement: thisElement, thisProperty: "descriptionlarge", image: 'code', inlineEdition: false})
        .then(()=>{
          thisElement.parentElement.querySelector('[data-id=butedit][data-but-name=code]').querySelector('button[data-id=codebut]').addEventListener('click', ()=>{
            thisElement.style.display="unset";
            thisElement.focus();
          });
        });
      }
      */
    </script>
  </div>
  <script>
    thisParams.item.setDescriptionLarge(thisElement)
  </script>
</div>