@inherits ViewModelTemplate<FavoriteListViewModel>
@using Dynamicweb.Frontend
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.Frontend

@{
  var userId = Dynamicweb.Context.Current?.Request?.QueryString?.Get("userId") ?? null;
  var productName = Dynamicweb.Context.Current?.Request?.QueryString?.Get("productName") ?? null;
  var productId = Dynamicweb.Context.Current?.Request?.QueryString?.Get("productid") ?? null;
  var variantId = Dynamicweb.Context.Current?.Request?.QueryString?.Get("variantid") ?? null;
}

<div class="modal fade" id="removeFavoriteProductModal" tabindex="-1" aria-labelledby="RemoveFavoriteProduct" aria-hidden="true" 
  hx-on::load="bootstrap.Modal.getOrCreateInstance(this).show();"
  x-on:hide-bs-modal.dot="
    const el = document.activeElement;
    if (el && $el.contains(el)) el.blur();
  "
  x-on:hidden-bs-modal.dot="
    bootstrap.Modal.getOrCreateInstance($el).dispose();
    $el.remove();
  "
  >
  <div class="modal-dialog pt-8">
    <form method="post" class="modal-content">
      <input type="hidden" name="userId" id="UserId" value='@(userId)' />
      <input type="hidden" name="favoriteListId" id="FavoriteListId" value="@(Model.Id)" />
      <input type="hidden" name="productName" id="ProductName" value='@(productName)' />
      <input type="hidden" name="productid" id="ProductId" value='@(productId)' />
      <input type="hidden" name="variantid" id="VariantId" value='@(variantId)' />
      <div class="modal-header">
          <h5 class="modal-title">@Translate("Remove product from list")</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="@Translate("Cancel")"></button>
      </div>
      <div class="modal-body">
        <p class="text-muted">@Translate("Are you sure you want to remove") <span class="fw-bold text-body">@(productName)</span> @Translate("from the list") <span class="fw-bold text-body">@(!string.IsNullOrEmpty(Model.Name) ? Model.Name : (Translate("Untitled") + " #" + Model.Id))</span>?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal" data-dw-button>@Translate("Cancel")</button>
        <button type="submit" class="btn btn-primary btn-sm" name="favoritecmd" value="removeproductfromfavoritelist" data-dw-button>@Translate("Remove product")</button>
      </div>
    </form>
  </div>
</div>