<form
    action="${URLUtils.url('Address-SaveAddress', 'addressId', pdict.addressId)}"
    class="address-form"
    method="POST"
    name="address-form" ${pdict.addressForm.attributes}>
    <!-- Address Title -->
    <div class="form-group
        ${pdict.addressForm.addressId.mandatory === true ? 'required' : ''}">
        <label class="form-control-label" for="addressId">
            <isprint value="${pdict.addressForm.addressId.label}" encoding="htmlcontent" />
        </label>
        <input type="text" class="form-control" id="addressId"
            <isprint value="${pdict.addressForm.addressId.attributes}" encoding="off" />>
        <div class="invalid-feedback"></div>
    </div>

    <!-- Country and Zip -->
    <div class="row">
        <!-- Country  -->
        <div class="col-6">
            <div class="form-group
                ${pdict.addressForm.country.mandatory === true ? 'required' : ''}">
                <label class="form-control-label" for="country">
                    <isprint value="${pdict.addressForm.country.label}" encoding="htmlcontent" />
                </label>
                <select class="form-control" id="country"
                    <isprint value="${pdict.addressForm.country.attributes}" encoding="off" />
                    autocomplete="country">
                    <isloop items=${pdict.addressForm.country.options} var="country">
                        <option id="${country.id}" value="${country.htmlValue}" <isif condition="${country.selected}">selected</isif>>${country.label}</option>
                    </isloop>
                </select>
                <div class="invalid-feedback"></div>
            </div>
        </div>

        <!-- ZIP Code -->
        <div class="col-6">
            <div class="form-group
                ${pdict.addressForm.postalCode.mandatory === true ? 'required' : ''}">
                <label class="form-control-label" for="zipCode">
                    <isprint value="${pdict.addressForm.postalCode.label}" encoding="htmlcontent" />
                </label>
                <input type="text" class="form-control" id="zipCode"
                    <isprint value="${pdict.addressForm.postalCode.attributes}" encoding="off" />
                    autocomplete="postal-code">
                <div class="invalid-feedback"></div>
                <span>${Resource.msg('example.postalcode','forms',null)}</span>
            </div>
        </div>
    </div>

    <!-- State and City -->
    <div class="row">
        <!-- State  -->
        <div class="col-6">
            <div class="form-group
                ${pdict.addressForm.states.stateCode.mandatory === true ? 'required' : ''}">
                <label class="form-control-label" for="state">
                    <isprint value="${pdict.addressForm.states.stateCode.label}" encoding="htmlcontent" />
                </label>
                <input class="form-control" id="state"
                    <isprint value="${pdict.addressForm.states.stateCode.attributes}" encoding="off" />
                    autocomplete="region">
                </input>
                <div class="invalid-feedback"></div>
            </div>
        </div>

        <!-- City  -->
        <div class="col-6">
            <div class="form-group
                ${pdict.addressForm.city.mandatory === true ? 'required' : ''}">
                <label class="form-control-label" for="city">
                    <isprint value="${pdict.addressForm.city.label}" encoding="htmlcontent" />
                </label>
                <input type="text" class="form-control" id="city"
                    <isprint value="${pdict.addressForm.city.attributes}" encoding="off" />
                    autocomplete="locality">
                <div class="invalid-feedback"></div>
            </div>
        </div>
    </div>

    <!-- Address 1 -->
    <div class="form-group
        ${pdict.addressForm.address1.mandatory === true ? 'required' : ''}">
        <label class="form-control-label" for="address1">
            <isprint value="${pdict.addressForm.address1.label}" encoding="htmlcontent" />
        </label>
        <input type="text" class="form-control" id="address1"
            <isprint value="${pdict.addressForm.address1.attributes}" encoding="off" />
            autocomplete="address-line1">
        <div class="invalid-feedback"></div>
    </div>

    <!-- Address 2 -->
    <div class="form-group
        ${pdict.addressForm.address2.mandatory === true ? 'required' : ''}">
        <label class="form-control-label" for="address2">
            <isprint value="${pdict.addressForm.address2.label}" encoding="htmlcontent" />
        </label>
        <input type="text" class="form-control" id="address2"
            <isprint value="${pdict.addressForm.address2.attributes}" encoding="off" />
            autocomplete="billing address-line2">
        <div class="invalid-feedback"></div>
    </div>

    <!-- Name -->
    <div class="row">
        <!-- Last Name -->
        <div class="col-6">
            <div class="form-group
                ${pdict.addressForm.lastName.mandatory === true ? 'required' : ''}">
                <label class="form-control-label" for="lastName">
                    <isprint value="${pdict.addressForm.lastName.label}" encoding="htmlcontent" />
                </label>
                <input type="text" class="form-control" id="lastName"
                    <isprint value="${pdict.addressForm.lastName.attributes}" encoding="off" />
                    autocomplete="family-name">
                <div class="invalid-feedback"></div>
            </div>
        </div>

        <!-- First Name -->
        <div class="col-6">
            <div class="form-group
                ${pdict.addressForm.firstName.mandatory === true ? 'required' : ''}">
                <label class="form-control-label" for="firstName">
                    <isprint value="${pdict.addressForm.firstName.label}" encoding="htmlcontent" />
                </label>
                <input type="text" class="form-control" id="firstName"
                    <isprint value="${pdict.addressForm.firstName.attributes}" encoding="off" />
                    autocomplete="given-name">
                <div class="invalid-feedback"></div>
            </div>
        </div>
    </div>

    <!-- Phone Number -->
    <div class="form-group
        ${pdict.addressForm.phone.mandatory === true ? 'required' : ''}">
        <label class="form-control-label" for="phone">
            <isprint value="${pdict.addressForm.phone.label}" encoding="htmlcontent" />
        </label>
        <input type="text" class="form-control" id="phone"
            <isprint value="${pdict.addressForm.phone.attributes}" encoding="off" />
            autocomplete="tel">
        <div class="invalid-feedback"></div>
        <span>${Resource.msg('example.phone','forms',null)}</span>
    </div>

    <input type="hidden" name="${pdict.csrf.tokenName}" value="${pdict.csrf.token}"/>

    <!-- Cancel and Save Buttons -->
    <div class="row">
        <div class="col-6">
            <a href="${URLUtils.url('Address-List')}" class="btn btn-block btn-outline-primary">${Resource.msg('button.cancel','account',null)}</a>
        </div>
        <div class="col-6">
            <button type="submit" name="save" class="btn btn-save btn-block btn-primary">${Resource.msg('button.save','account',null)}</button>
        </div>
    </div>

</form>
