@inherits ViewModelTemplate<PageViewModel>
@using Dynamicweb.Frontend
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.Frontend
@using Dynamicweb.Ecommerce.Orders
@using Dynamicweb.Ecommerce.ProductCatalog

<div class="modal fade" id="createCartModal_@(Model.ID)" tabindex="-1" aria-labelledby="CreateCart" aria-hidden="true" 
  hx-on::load="bootstrap.Modal.getOrCreateInstance(this).show();"
  x-on:shown-bs-modal.dot="
    const input = $el.querySelector('input[type=text]');
    if (input) setTimeout(() => input.focus(), 0);
  "
  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="CartUserId" id="CartUserId" value='@Model.CurrentUser?.ID' />

      <div class="modal-header">
          <h5 class="modal-title">@Translate("Create cart")</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("Enter a new name for the cart or leave empty")</p>
        <div class="form-floating">
          <input type="text" class="form-control" name="CartName" id="CartName" placeholder="@Translate("Cart name")" value=""/>
          <label for="CartName">@Translate("Cart name")</label>
        </div>
      </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="CartCmd" value="createnew" data-dw-button>@Translate("Save changes")</button>
      </div>
    </form>
  </div>
</div>