@model CheckoutShippingAddressModel
<div class="checkout-data">
    @await Component.InvokeAsync("Widget", new { widgetZone = "checkout_shipping_address_top" })
    @if (Model.BillToTheSameAddress)
    {
        <div class="bill-to-same-address">
            <p class="selector">
                <label class="custom-control custom-checkbox">
                    <input asp-for="BillToTheSameAddress" class="custom-control-input" :disabled="vmorder.PickUpInStore" />
                    <span class="custom-control-label"></span>
                    <span class="custom-control-description">@Loc["Checkout.BillToTheSameAddress"]</span>
                </label>
            </p>
        </div>
    }

    <partial name="Partials/ShippingAddressPickupInStore" model="Model" />
    <div v-show="vmorder.shippingContainer">
        @if (Model.ExistingAddresses.Any())
        {
            <div class="select-shipping-address">
                <div class="col-12 px-0">
                    <label class="genera" for="shipping-address-select">@Loc["Checkout.SelectShippingAddressOrEnterNewOne"]</label>
                </div>
                <div class="col-12 px-0">
                    <select name="shipping_address_id" ref="shippingSelect" id="shipping-address-select" class="custom-select address-select"
                             onchange="vmorder.vShipping.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_shipping_address_middle" })
        <div class="new-shipping-address" id="shipping-new-address-form" ref="newShippingAddress">
            <div class="enter-address">
                @{
                    var dataDictAddress = new ViewDataDictionary(ViewData);
                    dataDictAddress.TemplateInfo.HtmlFieldPrefix = "ShippingNewAddress";
                    <partial name="Partials/CreateOrUpdateAddress" model="Model.NewAddress" view-data="dataDictAddress" />
                }
                <div asp-validation-summary="ModelOnly" class="message-error"></div>
                <template v-if="vmorder.shippingAddressErrors !== null">
                    <div class="alert alert-danger">
                        <ul class="m-0 p-0">
                            <template v-for="message in vmorder.shippingAddressErrors">
                                <li>
                                    {{message}}
                                </li>
                            </template>
                        </ul>
                    </div>
                </template>
            </div>
        </div>
    </div>
    @await Component.InvokeAsync("Widget", new { widgetZone = "checkout_shipping_address_bottom" })
</div>