(()=>{class t extends HTMLElement{connectedCallback(){salla.onReady((()=>{this.source=salla.config.get("page.slug"),"landing-page"==this.source&&(this.hideAddBtn=!0,this.showQuantity=!0),this.classList.add("product-block"),this.id=`product_${this.product.id}`,this.product.is_out_of_stock&&this.classList.add("is-out");let t=salla.config.get("store.settings.product.fit_type");t&&this.classList.add(`${t}`),this.horizontal="true"===this.getAttribute("horizontal"),this.showWishlist="true"===this.getAttribute("show-wishlist"),this.render(),salla.lang.translationsLoaded||salla.lang.onLoaded((()=>this.render()))}))}render(){const t=salla.lang.get("pages.products.remained"),a=salla.lang.get("pages.products.starting_price"),s=salla.lang.get("pages.products.out_of_stock"),n=salla.lang.get("pages.products.calories"),o=salla.lang.get("pages.products.donation_placeholder"),i=(salla.lang.get("pages.products.donation_exceed_target_amount"),salla.lang.get("pages.products.target")),d=salla.lang.get("pages.products.donation_exceed_target_date"),e=salla.lang.get("pages.products.donation_will_end_date");this.innerHTML=`\n       \n          <div class="product-block__thumb">\n            ${this.product.promotion_title?`<span class="badge badge--ribbon badge--primary">${this.product.promotion_title}</span>`:this.showQuantity&&this.product.quantity?`<span class="badge badge--ribbon badge--primary">${t} ${this.product.quantity}</span>`:this.showQuantity&&this.product.is_out_of_stock?`<div class="out-badge ${this.horizontal?"":"max-w-[calc(100%-60px)]"}">${s}</div>`:""}\n            <a href="${this.product.url}" class="thumb-wrapper" aria-label="${this.product.name}">\n              <img class="lazy-load" width="200" height="200" src="images/img_loader.png" data-src="${this.product.image.url}" alt="${this.product.image.alt}" />\n            </a>\n          </div>\n          ${this.showWishlist?`<span class="btn--product-like">\n                  <salla-button loader-position="center" shape="icon" size="small" color="danger" class="btn--delete" onclick="salla.wishlist.remove(${this.product.id})">\n                      <i class="sicon-cancel"></i>\n                  </salla-button>\n                </span>`:""}\n          <div class="relative wide donating-wrap">\n            <div class="product-block__info">\n              <a href="${this.product.url}" class="product-title">\n                <h2 class="title title--primary title--small">${this.product.name}</h2>\n                <p>${this.product.subtitle?this.product.subtitle:""}</p>\n              </a>\n              ${this.product.calories?`<div class="font-sm mt-5 mb-10">\n                      <i class="d-inline-block sicon-fire color-danger mr-1 ml-0"></i>\n                      <strong>${this.product.calories}</strong> ${n}\n                    </div>`:""}\n\n            ${"donating"==this.product.type?`${!salla.url.is_page("cart")&&this.product?.donation?.target_amount?`<div class="progress-bar progress-bar--primary progress-bar--oval mb-20">\n                <span>${i}</span>\n                <div class="list list--horizontal list--auto-width list--s-between mt-10 mb-5">\n                  <span>${salla.money(this.product?.donation?.collected_amount)}</span>\n                  <span>${salla.money(this.product?.donation?.target_amount)}</span>\n                </div>\n                <div class="progress-bar__bg">\n                  <span class="progress-bar__progress" style="width: ${this.product?.donation?.target_percent}%"></span>\n                </div>\n            ${this.product?.donation?`<span class="d-block wide font-xsm lh-1 mt-5 ${this.product?.donation?.target_message?"color-danger":""}">\n                      ${this.product?.donation?.can_donate?this.product?.donation?.target_message?"":e+" "+this.product?.donation?.target_end_date:`${this.product?.donation?.target_message?this.product?.donation?.target_message:this.product?.donation?.target_end_date&&"0000-00-00"!==this.product?.donation?.target_end_date?"":d+" "+this.product?.donation?.target_end_date}`}\n                  </span>`:""}\n           </div>`:""}\n            <div class="form mt-10 mb-10" >\n              <div class="form-group">\n                <div class="input-group input-group--end">\n                  <input placeholder="${o}"\n                    type="text" d\n                    id="donating_amount_${this.product.id}"\n                    name="donating_amount"\n                    class="form-control form-control--short _parseArabicNumbers"\n                    value="${salla.url.is_page("cart")?this.product.price:""}"\n                    data-digits-with-decimal\n                    data-digits\n                    ${this.product?.donation?.can_donate?"":"disabled"} />\n                  <span class="input-group-addon"> ${salla.config.currency().symbol} </span>\n                </div>\n              </div>\n                </div> `:""}\n            <div class="price-wrapper">\n              ${this.product.is_on_sale?`<span class="color-danger">${salla.money(this.product.sale_price)}</span><small>${salla.money(this.product.regular_price)}</small>`:this.product.starting_price?`${a}<span>${salla.money(this.product.starting_price)}</span>`:`<span>${salla.money(this.product.price)}</span>`}</div>\n\n                ${this.hideAddBtn?"":`<div class="btn btn--floated btn--add-to-cart btn--add-to-cart ${"out"==this.product.status?"disabled":""}">\n                    <salla-add-product-button\n                        product-id="${this.product.id}"\n                        product-status="${this.product.status}"\n                        product-type="${this.product.type}">\n                        ${"booking"==this.product.type?'<i class="sicon-calendar-date"></i>':'<i class="sicon-shopping-bag"></i>'}\n                    </salla-add-product-button>\n                  </div>`}`,document.lazyLoadInstance?.update(document.querySelectorAll(".product-block__thumb .lazy-load"))}}customElements.define("custom-salla-product-card",t)})();