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

@{
    var baseUrl = SearchEngineFriendlyURLs.GetFriendlyUrl($"default.aspx?ID={Pageview?.Page?.ID ?? 0}");
}

<div class="modal fade" id="addUserGroupModal" tabindex="-1" aria-labelledby="AddUserGroup" aria-hidden="true" 
  hx-on::load="bootstrap.Modal.getOrCreateInstance(this).show();"
  x-on:hidden-bs-modal.dot="
    bootstrap.Modal.getOrCreateInstance($event.target).dispose();
    $event.target.remove();
  "
  >
  <div class="modal-dialog pt-8">
    <form method="post" class="modal-content" action="@(baseUrl)">
      <div class="modal-header">
          <h5 class="modal-title">@Translate("Add account")</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("Create a new account by filling in the details below")</p>
        
        <div class="form-floating">
            <input type="text" class="form-control" name="Name" id="Name" placeholder="@Translate("Name")" value="" autocomplete="off" />
            <label for="Name" class="form-label">@Translate("Name")</label>
        </div>

        <div class="form-floating mt-3">
            <input type="text" class="form-control" name="CustomerNumber" id="CustomerNumber" placeholder="@Translate("Customer number")" value="" autocomplete="off" />
            <label for="CustomerNumber" class="form-label">@Translate("Customer number")</label>
        </div>

        <div class="form-floating mt-3">
            <input type="email" class="form-control" name="EmailAddress" id="EmailAddress" placeholder="@Translate("Email")" value="" autocomplete="off" />
            <label for="EmailAddress" class="form-label">@Translate("Email")</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="UserGroupCmd" value="savegroup" data-dw-button>@Translate("Add account")</button>
      </div>
  </form>
  </div>
</div>