@inject UserManager<ApplicationUser> _userManager

@* This is a temporary infobox to inform users about the state changes in 1.4.0. It should be removed eventually. *@
@if ((await _userManager.GetUserAsync(User)).GetBlob().ShowInvoiceStatusChangeHint)
{
    <div class="alert alert-light alert-dismissible fade show mb-5" role="alert">
        <form method="post" asp-controller="UIManage" asp-action="DisableShowInvoiceStatusChangeHint" id="invoicestatuschangeform">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                <vc:icon symbol="close" />
            </button>
            <h5 class="alert-heading">Updated in v1.4.0</h5>
            <p class="mb-2">Invoice states have been updated to match the Greenfield API:</p>
            <div class="row">
                <div class="col-12 col-md-6">
                    <ul class="list-unstyled mb-md-0">
                        <li>
                            <span class="badge badge-processing">Paid</span>
                            <span class="mx-1">is now shown as</span>
                            <span class="badge badge-processing">Processing</span>
                        </li>
                        <li class="mt-2">
                            <span class="badge badge-settled">Completed</span>
                            <span class="mx-1">is now shown as</span>
                            <span class="badge badge-settled">Settled</span>
                        </li>
                        <li class="mt-2">
                            <span class="badge badge-settled">Confirmed</span>
                            <span class="mx-1">is now shown as</span>
                            <span class="badge badge-settled">Settled</span>
                        </li>
                    </ul>
                </div>
                <div class="col-12 col-md-6 d-flex justify-content-md-end align-items-md-end">
                    <button name="command" type="submit" value="save" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="alert">Don't Show Again</button>
                </div>
            </div>
        </form>
    </div>
    <script>
        document.getElementById("invoicestatuschangeform").addEventListener("submit", event => {
            event.preventDefault();
            const xhttp = new XMLHttpRequest();
            xhttp.open('POST', event.target.getAttribute('action'), true);
            xhttp.send(new FormData(event.target));
        });
    </script>
}