<div class="modal-header">
    <h3 ng-hide="isEdit">
        <span translate>organizations.comp.addresses.modal.addAddress</span>
    </h3>

    <h3 ng-show="isEdit">
        <span translate>organizations.comp.addresses.modal.editAddress</span>
    </h3>
</div>
<div class="modal-body">
    <form name="addressesForm">
        <div class="row">
            <div class="col-sm-6 form-group">
                <label for="country" translate> organizations.comp.addresses.modal.country.label</label>
                <span class="required-asterisk">*</span>
                <select id="country" class="form-control" ng-model="address.country" ng-change="changeStates(address.country)" required>
                    <option ng-repeat="option in countries" value="{{option.key}}">
                        {{option.value | translate}}
                    </option>
                </select>
            </div>
            <div class="col-sm-6 form-group">
                <label for="addressTypes" translate> organizations.comp.addresses.modal.type.label</label>
                <span class="required-asterisk">*</span>
                <select id="addressTypes" class="form-control" ng-model="address.addressType"
                        ng-options="item.key as item.value | translate for item in addressTypes" required></select>
            </div>
        </div>
        <div class=" row">
            <div class="col-sm-6 form-group">
                <label for="streetAddress" translate>
                    organizations.comp.addresses.modal.streetAddress.label</label>
                <span class="required-asterisk">*</span>
                <input id="streetAddress" type="text" ng-model="address.streetAddress" class="input-md form-control"
                        placeholder="{{ 'organizations.comp.addresses.modal.streetAddress.placeholder' | translate }}" required>
            </div>
            <div class="col-sm-6 form-group">
                <label for="streetAddress2" translate>
                    organizations.comp.addresses.modal.streetAddress2.label</label>
                <input id="streetAddress2" type="text" ng-model="address.streetAddress2" class="input-md form-control"
                        placeholder="{{ 'organizations.comp.addresses.modal.streetAddress2.placeholder' | translate }}">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 form-group">
                <label for="city" translate>
                    organizations.comp.addresses.modal.city.label</label>
                <span class="required-asterisk">*</span>
                <input id="city" type="text" ng-model="address.city" class="input-md form-control"
                        placeholder="{{ 'organizations.comp.addresses.modal.city.placeholder' | translate }}" required>
            </div>
            <div class="col-sm-3 form-group" ng-if="address.country == 'US' || address.country == 'CA' || address.country == 'JP'">
                <label for="state" translate>
                    organizations.comp.addresses.modal.state.label</label>
                <select id="state" class="form-control" ng-model="address.state" required>
                    <option ng-repeat="option in states" value="{{option.key}}">
                        {{option.value | translate}}
                    </option>
                </select>
            </div>
            <div class="col-sm-3 form-group" ng-if="address.country != 'US' && address.country != 'CA' && address.country != 'JP'">
                <label for="txtState" translate>
                    organizations.comp.addresses.modal.state.label
                </label>
                <span class="required-asterisk-state-label-modals">*</span>
                <input id="txtState" type="text" ng-model="address.state" class="input-md form-control"
                        placeholder="{{ 'organizations.comp.addresses.modal.state.placeholder' | translate }}" required>
            </div>
            <div class="col-sm-3 form-group">
                <label for="zip" translate>
                    organizations.comp.addresses.modal.zip.label</label>
                <span class="required-asterisk">*</span>
                <input id="zip" type="text" ng-model="address.zip" class="input-md form-control"
                        placeholder="{{ 'organizations.comp.addresses.modal.zip.placeholder' | translate }}" required>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 form-group">
                <label translate>organizations.comp.addresses.modal.setPrimary</label><span class="required-asterisk">*</span>
                <label>
                    <input type="radio" ng-model="isDefault" ng-value="true">
                    <translate>organizations.comp.addresses.modal.yes</translate>
                </label>
                <label ng-hide="hideNoField">
                    <input type="radio" ng-model="isDefault" ng-value="false">
                    <translate>organizations.comp.addresses.modal.no</translate>
                </label>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-secondary" ng-click="onClickCancel()">
        <span translate>organizations.comp.addresses.modal.btnCancel.text</span>
    </button>
    <button class="btn btn-primary" ng-click="onClickOk()" ng-disabled="addressesForm.$invalid">
        <span translate>organizations.comp.addresses.modal.btnOk.text</span>
    </button>
</div>
