@model CheckoutBillingAddressModel
<div class="checkout-data">
    @await Component.InvokeAsync("Widget", new { widgetZone = "checkout_billing_address_top" })
    @if (Model.ExistingAddresses.Any())
    {
        <div class="select-billing-address">
            <div class="col-12 px-0">
                <label class="genera" for="billing-address-select">@Loc["Checkout.SelectBillingAddressOrEnterNewOne"]</label>
            </div>
            <div class="col-12 px-0">
                <select name="billing_address_id" ref="billingSelect" id="billing-address-select" class="custom-select address-select"
                        title="" onchange="vmorder.vBilling.newAddress(!this.value)">
                    @foreach (var address in Model.ExistingAddresses)
                    {
                        var addressLine = "";
                        addressLine += address.FirstName;
                        addressLine += " " + address.LastName;
                        if (address.StreetAddressEnabled && !String.IsNullOrEmpty(address.Address1))
                        {
                            addressLine += ", " + address.Address1;
                        }
                        if (address.CityEnabled && !String.IsNullOrEmpty(address.City))
                        {
                            addressLine += ", " + address.City;
                        }
                        if (address.StateProvinceEnabled && !String.IsNullOrEmpty(address.StateProvinceName))
                        {
                            addressLine += ", " + address.StateProvinceName;
                        }
                        if (address.ZipPostalCodeEnabled && !String.IsNullOrEmpty(address.ZipPostalCode))
                        {
                            addressLine += " " + address.ZipPostalCode;
                        }
                        if (address.CountryEnabled && !String.IsNullOrWhiteSpace(address.CountryName))
                        {
                            addressLine += ", " + address.CountryName;
                        }
                        <option value="@(address.Id)">@(addressLine)</option>
                    }
                    <option value="" selected="@Model.NewAddressPreselected">@Loc["Checkout.NewAddress"]</option>
                </select>
            </div>
        </div>
    }
    @await Component.InvokeAsync("Widget", new { widgetZone = "checkout_billing_address_middle" })
    <div class="new-billing-address" id="billing-new-address-form">
        <div class="enter-address">
            @{
                var dataDictAddress = new ViewDataDictionary(ViewData);
                dataDictAddress.TemplateInfo.HtmlFieldPrefix = "BillingNewAddress";
                <partial name="Partials/CreateOrUpdateAddress" model="Model.NewAddress" view-data="dataDictAddress" />
            }
            <div asp-validation-summary="ModelOnly" class="message-error"></div>
            <template v-if="vmorder.billingAddressErrors !== null">
                <div class="alert alert-danger">
                    <ul class="m-0 p-0">
                        <template v-for="message in vmorder.billingAddressErrors">
                            <li>
                                {{message}}
                            </li>
                        </template>
                    </ul>
                </div>
            </template>
        </div>
    </div>
    @await Component.InvokeAsync("Widget", new { widgetZone = "checkout_billing_address_bottom" })
</div>