@inherits ViewModelTemplate<UserGroupDetailViewModel>
@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}");
    var userGroupId = Dynamicweb.Context.Current?.Request.QueryString.Get("UserGroupId") ?? string.Empty;
    var isEdit = !string.IsNullOrEmpty(userGroupId);
}

<nav aria-label="breadcrumb">
    <ol class="breadcrumb mb-3" style="--bs-breadcrumb-divider: '>'; --bs-breadcrumb-item-padding-x: 1rem; --bs-breadcrumb-font-size: .875em;">
        <li class="breadcrumb-item"><a href="@(baseUrl)">@(Pageview?.Page?.GetDisplayName())</a></li>
        <li class="breadcrumb-item active" aria-current="page">@(isEdit ? Model?.Name : Translate("Add account"))</li>
    </ol>
</nav>

<header class="mb-4">
    <h1 class="h4 mb-0">@(isEdit ? Model?.Name : Translate("Add account"))</h1>
</header>

<form method="post" id="editUserGroupForm" action="@(baseUrl)">

    <div class="vstack">
        <p class="text-muted">@(isEdit ? Translate("Edit the account by filling in the details below") : Translate("Add a new account by filling in the details below"))</p>
        
        <input type="hidden" name="UserGroupId" value="@(Model?.Id ?? 0)" />

        <div class="form-floating">
            <input type="text" class="form-control" name="Name" id="Name" placeholder="@Translate("Name")" value="@(Model?.Name)" 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="@(Model?.CustomerNumber)" 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="@(Model?.EmailAddress)" autocomplete="off" />
            <label for="EmailAddress" class="form-label">@Translate("Email")</label>
        </div>

        <div class="hstack gap-2 mt-3 justify-content-end">
            <a href="@(baseUrl)" type="button" class="btn btn-outline-secondary btn-sm" data-dw-button>@Translate("Cancel")</a>
            <button type="submit" class="btn btn-primary btn-sm" name="UserGroupCmd" value="SaveGroup" data-dw-button>@(isEdit ? Translate("Save account") : Translate("Add account"))</button>
        </div>
    </div>
</form>

@{
    var result = Model?.Result;
    var toast = result != UserGroupResultType.None ? new {
        Text = result == UserGroupResultType.InvalidEmail ? Translate("The email address is invalid") : result == UserGroupResultType.InvalidCustomerNumber ? Translate("The customer number is invalid") : result == UserGroupResultType.IncorrectPermission ? Translate("You do not have permission to edit this account") : null,
    } : null;
    
    @if (toast is not null) 
    { 
        <div aria-live="polite" aria-atomic="true" class="position-fixed bottom-0 end-0 p-4 z-3">
            <div class="toast toast-animate-in bg-body" role="status" aria-live="polite" aria-atomic="true" x-data x-init="const toast = new bootstrap.Toast($el, {autohide: true, delay: 5000 }); toast.show();" data-dw-colorscheme="light">
                <div class="toast-header border-0">
                    <strong class="me-auto hstack gap-2">
                        <div class="icon-2 rounded-circle bg-danger-subtle text-danger-emphasis">
                            @ReadFile("/Files/Images/Icons/circle-exclamation.svg")
                        </div>
                        <span class="fw-bold">@Translate("Error")</span>
                    </strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close" style="background-size: .5rem;"></button>
                </div>
                <div class="toast-body pt-2 text-muted lh-sm fs-7">
                    @toast.Text
                </div>
            </div>
        </div>
    }
}