@inherits ViewModelTemplate<PageViewModel>
@using Dynamicweb.Frontend
@using Dynamicweb.Rendering

@{
    int addCreditCardPageId = GetPageIdByNavigationTag("AddCreditCardPage");
    string addCreditCardPageUrl = addCreditCardPageId != 0 
        ? $"/Default.aspx?ID={addCreditCardPageId}"
        : string.Empty;
}

<div class="modal fade" id="addCreditCardModal" tabindex="-1" aria-labelledby="AddCreditCard" aria-hidden="true" 
  hx-on::load="bootstrap.Modal.getOrCreateInstance(this).show();"
  x-on:shown-bs-modal.dot="
    htmx.trigger($el.querySelector('.modal-body'), 'load-form');
  "
  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.querySelector('#ordersubmit')?.remove();
    $el.remove();
  ">
  <div class="modal-dialog pt-8">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">@Translate("Name your card")</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="@Translate("Cancel")"></button>
      </div>
      <div class="modal-body"
           hx-get="@(addCreditCardPageUrl)"
           hx-trigger="load-form"
           hx-select="#ordersubmit"
           hx-swap="innerHTML"
           x-on:htmx:after-swap="
             const input = $el.querySelector('input[type=text]');
             if (input)  input.focus();
           ">
        <div class="d-flex justify-content-center align-items-center py-4">
          <span class="htmx-indicator spinner-border spinner-border-sm" aria-hidden="true"></span>
        </div>
      </div>
    </div>
  </div>
</div>

