@model AddressModel

<input asp-for="Id" type="hidden"/>
<div class="edit-address">
    <div class="row mb-3">
        <label asp-for="FirstName" asp-postfix=":" class="col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0 pt-0"></label>
        <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
            <input asp-for="FirstName" class="form-control" />
        </div>
        <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3 required-error">
            <span asp-validation-for="FirstName"></span>
            <strong class="d-none d-md-block d-lg-block d-xl-block"><nop-required /></strong>
        </div>
    </div>
    <div class="row mb-3">
        <label asp-for="LastName" asp-postfix=":" class="col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0 pt-0"></label>
        <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
            <input asp-for="LastName" class="form-control" />
        </div>
        <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3 required-error">
            <span asp-validation-for="LastName"></span>
            <strong class="d-none d-md-block d-lg-block d-xl-block"><nop-required /></strong>
        </div>
    </div>
    <div class="row mb-3">
        <label asp-for="Email" asp-postfix=":" class="col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0 pt-0"></label>
        <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
            <input asp-for="Email" class="form-control" />
        </div>
        <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3 required-error">
            <span asp-validation-for="Email"></span>
            <strong class="d-none d-md-block d-lg-block d-xl-block"><nop-required /></strong>
        </div>
    </div>
    @if (Model.CompanyEnabled)
    {
        <div class="row mb-3">
            <label asp-for="Company" asp-postfix=":" class="col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0 pt-0"></label>
            <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
                <input asp-for="Company" class="form-control" />
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3 required-error">
                <span asp-validation-for="Company"></span>
                @if (Model.CompanyRequired)
                {
                    <strong class="d-none d-md-block d-lg-block d-xl-block"><nop-required /></strong>
                }
            </div>
        </div>
    }

    @if (Model.CountryEnabled)
    {
        <div class="row mb-3">
            <label asp-for="CountryId" asp-postfix=":" class="col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0 pt-0"></label>
            <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
                <select asp-for="CountryId" asp-items="Model.AvailableCountries" class="form-control custom-select"
                        data-trigger="country-select"
                        data-url="@(Url.RouteUrl("GetStatesByCountryId"))"
                        data-stateprovince="#@Html.IdFor(model => model.StateProvinceId)"
                        data-loading="#states-loading-progress">
                </select>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3 required-error">
                <span asp-validation-for="CountryId"></span>
                <strong class="d-none d-md-block d-lg-block d-xl-block"><nop-required /></strong>
            </div>
        </div>
    }

    @if (Model.CountryEnabled && Model.StateProvinceEnabled)
    {
        <div class="row mb-3">
            <label asp-for="StateProvinceId" asp-postfix=":" class="col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0 pt-0"></label>
            <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
                <select asp-for="StateProvinceId" asp-items="Model.AvailableStates" class="form-control custom-select"></select>
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3">
                <span asp-validation-for="StateProvinceId"></span>
                <span id="states-loading-progress" style="display: none;" class="please-wait">@T("Common.Wait...")</span>
            </div>
        </div>
    }
    @if (Model.CountyEnabled)
    {
        <div class="row mb-3">
            <label asp-for="County" asp-postfix=":" class="col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0 pt-0"></label>
            <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
                <input asp-for="County" class="form-control" />
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3">
                <span asp-validation-for="County"></span>
                @if (Model.CountyRequired)
                {
                    <strong class="d-none d-md-block d-lg-block d-xl-block"><nop-required /></strong>
                }
            </div>
        </div>
    }
    @if (Model.CityEnabled)
    {
        <div class="row mb-3">
            <label asp-for="City" asp-postfix=":" class="col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0 pt-0"></label>
            <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
                <input asp-for="City" class="form-control" />
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3 required-error">
                <span asp-validation-for="City"></span>
                @if (Model.CityRequired)
                {
                    <strong class="d-none d-md-block d-lg-block d-xl-block"><nop-required /></strong>
                }
            </div>
        </div>
    }
    @if (Model.StreetAddressEnabled)
    {
        <div class="row mb-3">
            <label asp-for="Address1" asp-postfix=":" class="col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0 pt-0"></label>
            <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
                <input asp-for="Address1" class="form-control" />
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3 required-error">
                <span asp-validation-for="Address1"></span>
                @if (Model.StreetAddressRequired)
                {
                    <strong class="d-none d-md-block d-lg-block d-xl-block"><nop-required /></strong>
                }
            </div>
        </div>
    }
    @if (Model.StreetAddress2Enabled)
    {
        <div class="row mb-3">
            <label asp-for="Address2" asp-postfix=":" class="col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0 pt-0"></label>
            <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
                <input asp-for="Address2" class="form-control" />
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3 required-error">
                <span asp-validation-for="Address2"></span>
                @if (Model.StreetAddress2Required)
                {
                    <strong class="d-none d-md-block d-lg-block d-xl-block"><nop-required /></strong>
                }
            </div>
        </div>
    }
    @if (Model.ZipPostalCodeEnabled)
    {
        <div class="row mb-3">
            <label asp-for="ZipPostalCode" asp-postfix=":" class="col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0 pt-0"></label>
            <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
                <input asp-for="ZipPostalCode" class="form-control" />
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3 required-error">
                <span asp-validation-for="ZipPostalCode"></span>
                @if (Model.ZipPostalCodeRequired)
                {
                    <strong class="d-none d-md-block d-lg-block d-xl-block"><nop-required /></strong>
                }
            </div>
        </div>
    }
    @if (Model.PhoneEnabled)
    {
        <div class="row mb-3">
            <label asp-for="PhoneNumber" asp-postfix=":" class="col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0 pt-0"></label>
            <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
                <input asp-for="PhoneNumber" class="form-control" />
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3 required-error">
                <span asp-validation-for="PhoneNumber"></span>
                @if (Model.PhoneRequired)
                {
                    <strong class="d-none d-md-block d-lg-block d-xl-block"><nop-required /></strong>
                }
            </div>
        </div>
    }
    @if (Model.FaxEnabled)
    {
        <div class="row mb-3">
            <label asp-for="FaxNumber" asp-postfix=":" class="col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0 pt-0"></label>
            <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
                <input asp-for="FaxNumber" class="form-control" />
            </div>
            <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3 required-error">
                <span asp-validation-for="FaxNumber"></span>
                @if (Model.FaxRequired)
                {
                    <strong class="d-none d-md-block d-lg-block d-xl-block"><nop-required /></strong>
                }
            </div>
        </div>
    }
    @if (Model.CustomAddressAttributes.Count > 0)
    {
        @await Html.PartialAsync("_AddressAttributes", Model.CustomAddressAttributes)
    }
    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.AddressBottom, additionalData = Model })
</div>
