<isset name="addressFields" value="${pdict.forms.shippingForm.shippingAddress.addressFields}" scope="page"/>
<isif condition="${shippingModel.shippingAddress}">
    <isset name="shippingAddress" value="${shippingModel.shippingAddress}" scope="page" />
<iselse/>
    <isset name="shippingAddress" value="${{}}" scope="page" />
</isif>

<!--- make drop down--->
<div class="row">
    <div class="col-sm-6">
        <div class="form-group
            ${addressFields.country.mandatory === true ? 'required' : ''}
            ${addressFields.country.htmlName}">
            <label class="form-control-label" for="shippingCountry${lineItem ? lineItem.UUID : 'default'}">
                ${Resource.msg('field.shipping.address.country','address',null)}
            </label>
            <select class="form-control shippingCountry custom-select" id="shippingCountry${lineItem ? lineItem.UUID : 'default'}"
                <isprint value=${addressFields.country.attributes} encoding="off"/>
                autocomplete="shipping country"
                aria-describedby="${lineItem ? lineItem.UUID : 'default'}Country">
                    <option label=" "></option>
                    <isloop items=${addressFields.country.options} var="country">
                        <option id="${country.id}" value="${country.htmlValue}" ${shippingAddress.countryCode && country.id === shippingAddress.countryCode.value ? 'selected' : ''}>${country.label}</option>
                    </isloop>
            </select>
            <div class="invalid-feedback" id="${lineItem ? lineItem.UUID : 'default'}Country"><isprint value="${addressFields.country.error}" ></div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="form-group
            ${addressFields.postalCode.mandatory === true ? 'required' : ''}
            ${addressFields.postalCode.htmlName}">
            <label class="form-control-label" for="shippingZipCode${lineItem ? lineItem.UUID : 'default'}">
                ${Resource.msg('field.shipping.address.zip.code','address',null)}
            </label>
            <input type="text" class="form-control shippingZipCode" id="shippingZipCode${lineItem ? lineItem.UUID : 'default'}" aria-describedby="${lineItem ? lineItem.UUID : 'default'}PostalCode"
                value="${shippingAddress.postalCode||''}" <isprint value=${addressFields.postalCode.attributes} encoding="off"/>
                autocomplete="shipping postal-code">
            <div class="invalid-feedback" id="${lineItem ? lineItem.UUID : 'default'}PostalCode"><isprint value="${addressFields.postalCode.error}" ></div>
             <span>${Resource.msg('example.postalcode','forms',null)}</span>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <div class="form-group
            ${addressFields.states.stateCode.mandatory === true ? 'required' : ''}
            ">
            <label class="form-control-label" for="shippingState${lineItem ? lineItem.UUID : 'default'}">
                ${Resource.msg('field.shipping.address.state','address',null)}
            </label>
            <input class="form-control shippingState" id="shippingState${lineItem ? lineItem.UUID : 'default'}" name="${addressFields.states.stateCode.htmlName}" aria-describedby="${lineItem ? lineItem.UUID : 'default'}State"
                value="${shippingAddress.stateCode||''}"
                <isprint value="${addressFields.states.stateCode.attributes}" encoding="off" />
                autocomplete="shipping address-level1">
            </input>
            <div class="invalid-feedback" id="${lineItem ? lineItem.UUID : 'default'}State"><isprint value="${addressFields.states.stateCode.error}" ></div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="form-group
            ${addressFields.city.mandatory === true ? 'required' : ''}
            ${addressFields.city.htmlName}">
            <label class="form-control-label" for="shippingAddressCity${lineItem ? lineItem.UUID : 'default'}">
                ${Resource.msg('field.shipping.address.city','address',null)}
            </label>
            <input type="text" class="form-control shippingAddressCity" id="shippingAddressCity${lineItem ? lineItem.UUID : 'default'}" aria-describedby="${lineItem ? lineItem.UUID : 'default'}City"
                value="${shippingAddress.city||''}" <isprint value=${addressFields.city.attributes} encoding="off"/>
                autocomplete="shipping address-level2">
            <div class="invalid-feedback" id="${lineItem ? lineItem.UUID : 'default'}City"><isprint value="${addressFields.city.error}" ></div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="form-group
            ${addressFields.address1.mandatory === true ? 'required' : ''}
            ${addressFields.address1.htmlName}">
            <label class="form-control-label" for="shippingAddressOne${lineItem ? lineItem.UUID : 'default'}">
                ${Resource.msg('field.shipping.address.one','address',null)}
            </label>
            <input type="text" class="form-control shippingAddressOne" id="shippingAddressOne${lineItem ? lineItem.UUID : 'default'}" aria-describedby="${lineItem ? lineItem.UUID : 'default'}AddressLine1"
                value="${shippingAddress.address1||''}" <isprint value=${addressFields.address1.attributes} encoding="off"/>
                autocomplete="shipping address-line1">
            <div class="invalid-feedback" id="${lineItem ? lineItem.UUID : 'default'}AddressLine1"><isprint value="${addressFields.address1.error}" ></div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="form-group
            ${addressFields.address2.mandatory === true ? 'required' : ''}
            ${addressFields.address2.htmlName}">
            <label class="form-control-label" for="shippingAddressTwo${lineItem ? lineItem.UUID : 'default'}">
                ${Resource.msg('field.shipping.address.two','address',null)}
            </label>
            <input type="text" class="form-control shippingAddressTwo" id="shippingAddressTwo${lineItem ? lineItem.UUID : 'default'}" aria-describedby="${lineItem ? lineItem.UUID : 'default'}AddressLine2"
                value="${shippingAddress.address2||''}" <isprint value=${addressFields.address2.attributes} encoding="off"/>
                autocomplete="shipping address-line2">
            <div class="invalid-feedback" id="${lineItem ? lineItem.UUID : 'default'}AddressLine2"><isprint value="${addressFields.address2.error}" ></div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <div class="form-group
            ${addressFields.firstName.mandatory === true ? 'required' : ''}
            ${addressFields.firstName.htmlName}">
            <label class="form-control-label" for="shippingFirstName${lineItem ? lineItem.UUID : 'default'}"  >
                ${Resource.msg('field.shipping.address.first.name','address',null)}

            </label>
            <input autofocus type="text" class="form-control shippingFirstName" id="shippingFirstName${lineItem ? lineItem.UUID : 'default'}" aria-describedby="${lineItem ? lineItem.UUID : 'default'}FirstName"
                value="${shippingAddress.firstName||''}" <isprint value=${addressFields.firstName.attributes} encoding="off"/>
                autocomplete="shipping given-name" >
            <div class="invalid-feedback" id="${lineItem ? lineItem.UUID : 'default'}FirstName"><isprint value="${addressFields.firstName.error}" ></div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group
            ${addressFields.lastName.mandatory === true ? 'required' : ''}
            ${addressFields.lastName.htmlName}">
            <label class="form-control-label" for="shippingLastName${lineItem ? lineItem.UUID : 'default'}">
                ${Resource.msg('field.shipping.address.last.name','address',null)}
            </label>
            <input type="text" class="form-control shippingLastName" id="shippingLastName${lineItem ? lineItem.UUID : 'default'}" aria-describedby="${lineItem ? lineItem.UUID : 'default'}LastName"
                value="${shippingAddress.lastName||''}" <isprint value=${addressFields.lastName.attributes} encoding="off"/>
                autocomplete="shipping family-name">
            <div class="invalid-feedback" id="${lineItem ? lineItem.UUID : 'default'}LastName"><isprint value="${addressFields.lastName.error}" ></div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="form-group
            ${addressFields.phone.mandatory === true ? 'required' : ''}
            ${addressFields.phone.htmlName}">
            <label class="form-control-label" for="shippingPhoneNumber${lineItem ? lineItem.UUID : 'default'}">
                ${Resource.msg('field.shipping.address.phone','address',null)}
            </label>
            <input type="tel" class="form-control shippingPhoneNumber" id="shippingPhoneNumber${lineItem ? lineItem.UUID : 'default'}" aria-describedby="${lineItem ? lineItem.UUID : 'default'}TelephoneNumber"
                value="${shippingAddress.phone||''}" <isprint value=${addressFields.phone.attributes} encoding="off"/>
                   autocomplete="shipping tel">
            <div class="invalid-feedback" id="${lineItem ? lineItem.UUID : 'default'}TelephoneNumber"><isprint value="${addressFields.phone.error}" ></div>
            <span>${Resource.msg('example.phone','forms',null)}</span>
        </div>
    </div>
</div>
