@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="createFavoriteListModal" tabindex="-1" aria-labelledby="CreateFavoriteList" 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="userId" id="userId" value='@Model.CurrentUser?.ID' />
      <div class="modal-header">
          <h5 class="modal-title">@Translate("Create 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("Enter a name and description for the list")</p>
        <div class="form-floating">
          <input type="text" class="form-control" name="name" id="name" placeholder="@Translate("Name")" value=""/>
          <label for="name" class="form-label">@Translate("Name")</label>
        </div>
        <div class="form-floating mt-3">
          <input type="text" class="form-control" name="description" id="description" placeholder="@Translate("Description") (@Translate("optional"))" value=""/>
          <label for="description" class="form-label">@Translate("Description") (@Translate("optional"))</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="favoritecmd" value="createfavoritelist" data-dw-button>@Translate("Create list")</button>
      </div>
    </form>
  </div>
</div>