<form name="personForm" ng-submit="save()">
    <div class="modal-header">
        <h3><span translate>people.comp.editPerson.title</span></h3>
    </div>
    <div class="modal-body">
        <div class="row well-sm">
            <div class="col-sm-3 form-group">
                <label for="prefix" translate> people.comp.editPerson.prefix</label>
                <span class="required-asterisk">*</span>
                <select ng-model="person.title" id="prefix" name="prefix"
                        ng-options="prefix.key as prefix.value | translate for prefix in prefixes" class="form-control input-md" required>
                    <option value='' selected ng-value="null" translate>core.lookups.personTitles.selectPrefix</option>
                </select>
            </div>
            <div class="col-sm-3">
                <label for="familyName" translate> people.comp.editPerson.familyName </label>
                <span class="required-asterisk">*</span>
                <input type="text" id="familyName" ng-model="person.familyName" class="input-md form-control" required="required"
                        placeholder="{{ 'people.comp.editPerson.familyName.placeholder' | translate }}" style="background-color: white;">
            </div>
            <div class="col-sm-3">
                <label for="middleName" class="control-label">{{ 'people.comp.editPerson.middleName' | translate}}</label>
                <input type="text" id="middleName" ng-model="person.middleName" class="input-md form-control"
                        placeholder="{{ 'people.comp.editPerson.middleName.placeholder' | translate }}" style="background-color: white;">
            </div>
            <div class="col-sm-3">
                <label for="givenName" class="control-label">{{ 'people.comp.editPerson.givenName' |
                translate}}</label>
                <span class="required-asterisk">*</span>
                <input type="text" id="givenName" ng-model="person.givenName" class="input-md form-control" required="required"
                        placeholder="{{ 'people.comp.editPerson.givenName.placeholder' | translate }}">
            </div>
        </div>
        <div id="accordion" class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseIdentification" translate>
                            people.comp.editPerson.identification.title</a>
                    </h4>
                </div>
                <div id="collapseIdentification" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-4 form-group">
                                <label translate>
                                    people.comp.editPerson.identification.identificationNumber</label>
                                <input type="text" ng-model="person.defaultIdentification.identificationNumber"
                                        class="input-md form-control"
                                        placeholder="{{ 'people.comp.editPerson.identification.identificationNumber.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-4 form-group">
                                <label translate>people.comp.editPerson.identification.identificationType</label>
                                <span ng-show="person.defaultIdentification.identificationNumber" class="required-asterisk">*</span>
                                <select class="form-control" ng-required="person.defaultIdentification.identificationNumber"
                                        ng-disabled="!person.defaultIdentification.identificationNumber"
                                        ng-model="person.defaultIdentification.identificationType">
                                    <option ng-repeat="option in identificationTypes" value="{{option.key}}">
                                        {{option.value | translate}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4 form-group">
                                <label translate>
                                    people.comp.editPerson.identification.identificationIssuer</label>
                                <input type="text" ng-model="person.defaultIdentification.identificationIssuer"
                                        class="input-md form-control"
                                        placeholder="{{ 'people.comp.editPerson.identification.identificationIssuer.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-4 form-group">
                                <label translate>
                                    people.comp.editPerson.identification.identificationYearIssued</label>
                                <date-time-picker data="person.defaultIdentification.identificationYearIssued" no-default-date="true"
                                                  is-readonly="!person.defaultIdentification.identificationNumber" disable="!person.defaultIdentification.identificationNumber"></date-time-picker>
                            </div>
                            <div class="col-sm-4 form-group">
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="addIdentification();"
                                            ng-show="person.identifications.length < 1">
                                        <i class="fa fa-plus text-success"></i><span translate>people.comp.editPerson.addAnother</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div ng-repeat="identification in person.identifications">
                            <div class="row">
                                <div class="col-sm-4 form-group">
                                    <label translate>
                                        people.comp.editPerson.identification.identificationNumber</label>
                                    <span class="required-asterisk">*</span>
                                    <input type="text" ng-model="identification.identificationNumber" class="input-md form-control"
                                            required="required"
                                            placeholder="{{ 'people.comp.editPerson.identification.identificationNumber.placeholder' | translate }}">
                                </div>
                                <div class="col-sm-4 form-group">
                                    <label translate>
                                        people.comp.editPerson.identification.identificationType</label>
                                    <span class="required-asterisk">*</span>
                                    <select class="form-control" required="required" ng-disabled="!identification.identificationNumber"
                                            ng-model="identification.identificationType">
                                        <option ng-repeat="option in identificationTypes" value="{{option.key}}">
                                            {{option.value | translate}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4 form-group">
                                    <label translate>
                                        people.comp.editPerson.identification.identificationIssuer</label>
                                    <input type="text" ng-model="identification.identificationIssuer" class="input-md form-control"
                                            placeholder="{{ 'people.comp.editPerson.identification.identificationIssuer.placeholder' | translate }}">
                                </div>
                                <div class="col-sm-4 form-group">
                                    <div>
                                        <label translate>
                                            people.comp.editPerson.identification.identificationYearIssued</label>
                                        <date-time-picker data="identification.identificationYearIssued" is-readonly="!identification.identificationNumber"
                                                          no-default-date="true" disable="!identification.identificationNumber"></date-time-picker>
                                    </div>
                                </div>
                                <div class="col-sm-4 form-group">
                                    <div class="pull-left">
                                        <label class="control-label">&nbsp;</label>
                                        <button type="button" class="btn btn-link form-control"
                                                ng-click="removeIdentification(identification)">
                                            <i class="fa fa-minus text-danger"></i><span translate>people.comp.editPerson.communicationAccounts.removeContactMethod</span>
                                        </button>
                                    </div>
                                    <div class="pull-left">
                                        <label class="control-label">&nbsp;</label>
                                        <button type="button" class="btn btn-link form-control" ng-click="addIdentification();"
                                                ng-show="$last">
                                            <i class="fa fa-plus text-success"></i><span translate>people.comp.editPerson.addAnother</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapsePicture" translate>people.comp.editPerson.picture.title</a>
                </h4>
            </div>
            <div id="collapsePicture" class="panel-collapse collapse">
                <div class="panel-body" data-ng-repeat="picture in pictures">
                    <div class="row">
                        <div class="col-sm-4 form-group">
                            <label translate>people.comp.pictures.dialog.title</label><br />
                            <button ngf-select="showImage($file, $index)" ng-model="userPictures[$index]"
                                    ng-hide="userPictures[$index].name" ngf-pattern="'image/*'" ngf-accept="'image/*'"
                                    class="btn btn-sm btn-default"><span translate>people.comp.pictures.dialog.browse</span></button>
                            <img ng-src="{{previewImage[$index]}}" ng-class="{'img-circle img-responsive': previewImage[$index]}" />
                        </div>
                        <div class="col-sm-4 form-group">
                            <div class="pull-left" ng-show="userPictures[$index].name">
                                <label class="control-label">&nbsp;</label>
                                <button type="button" class="btn btn-link form-control" ng-click="removePicture($index)">
                                    <i class="fa fa-minus text-danger"></i><span translate>people.comp.editPerson.remove</span>
                                </button>
                            </div>
                            <div class="pull-left">
                                <label class="control-label">&nbsp;</label>
                                <button type="button" class="btn btn-link form-control" ng-click="addEmptyPicture();"
                                        ng-show="$last && userPictures[$index].name">
                                    <i class="fa fa-plus text-success"></i><span translate>people.comp.editPerson.addAnother</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOrganizations" translate>people.comp.editPerson.organizations.title</a>
                </h4>
            </div>
            <div id="collapseOrganizations" class="panel-collapse collapse">
                <div class="panel-body">
                    <div ng-repeat="organizationAssociation in person.organizationAssociations">
                        <div class="row">
                            <div class="col-sm-4 form-group">
                                <label>&nbsp;</label>
                                <input type="text" ng-model="organizationAssociation.organization.organizationValue"
                                        ng-click="searchOrganization($index)" class="input-md form-control"
                                        placeholder="{{ 'people.comp.editPerson.organizations.searchExisting.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-4 form-group">
                                <label translate>
                                    people.comp.organizations.type.label</label>
                                <select class="input-md form-control"
                                        ng-model="organizationAssociation.organizationToPersonAssociationType"
                                        ng-options="item.key as item.value | translate for item in organizationTypes"
                                        id="organizationToPersonAssociationType" name="organizationToPersonAssociationType"
                                        ng-disabled="true">
                                </select>
                            </div>
                            <div class="col-sm-4 form-group">
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control"
                                            ng-click="removeOrganization(organizationAssociation)" ng-show="!$first">
                                        <i class="fa fa-minus text-danger"></i><span translate>people.comp.editPerson.remove</span>
                                    </button>
                                </div>
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="addNewOrganization();"
                                            ng-disabled="!organizationAssociation.organization.organizationValue" ng-show="$last">
                                        <i class="fa fa-plus text-success"></i><span translate>people.comp.editPerson.addAnother</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseLocations" translate>people.comp.editPerson.locations.title</a>
                </h4>
            </div>
            <div id="collapseLocations" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <label translate> people.comp.editPerson.locations.country</label>
                            <span ng-if="checkLocationRules(person.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <select class="form-control" ng-model="person.defaultAddress.country"
                                    ng-change="changeStates(person.defaultAddress.country)" ng-required="checkLocationRules(person.defaultAddress)">
                                <option ng-repeat="option in countries" value="{{option.key}}">
                                    {{option.value | translate}}
                                </option>
                            </select>
                            <span class="text-danger" ng-if="!person.defaultAddress.country &&
                                    checkLocationRules(person.defaultAddress)"
                                  translate>
                            people.comp.newPerson.locations.country.validation.error</span>
                        </div>
                        <div class="col-sm-6 form-group">
                            <label translate> people.comp.editPerson.locations.type</label>
                            <span ng-if="checkLocationRules(person.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <select class="form-control" ng-model="person.defaultAddress.type" ng-required="checkLocationRules(person.defaultAddress)">
                                <option ng-repeat="option in addressTypes" value="{{option.key}}">
                                    {{option.value | translate}}
                                </option>
                            </select>
                            <span class="text-danger" ng-if="!person.defaultAddress.type &&
                                    checkLocationRules(person.defaultAddress)"
                                  translate>
                            people.comp.newPerson.locations.type.validation.error</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <label translate>
                                people.comp.editPerson.locations.streetAddress</label>
                            <span ng-if="checkLocationRules(person.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <input type="text" ng-model="person.defaultAddress.streetAddress" class="input-md form-control"
                                    placeholder="{{ 'people.comp.editPerson.locations.streetAddress.placeholder' | translate }}"
                                   ng-required="checkLocationRules(person.defaultAddress)">
                            <span class="text-danger" ng-if="!person.defaultAddress.streetAddress &&
                                    checkLocationRules(person.defaultAddress)"
                                  translate>
                            people.comp.newPerson.locations.streetAddress.validation.error</span>
                        </div>
                        <div class="col-sm-6 form-group">
                            <label translate>
                                people.comp.editPerson.locations.streetAddress2</label>
                            <input type="text" ng-model="person.defaultAddress.streetAddress2" class="input-md form-control"
                                    placeholder="{{ 'people.comp.editPerson.locations.streetAddress2.placeholder' | translate }}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <label translate>
                                people.comp.editPerson.locations.city</label>
                            <span ng-if="checkLocationRules(person.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <input type="text" ng-model="person.defaultAddress.city" class="input-md form-control"
                                    placeholder="{{ 'people.comp.editPerson.locations.city.placeholder' | translate }}"
                                   ng-required="checkLocationRules(person.defaultAddress)">
                            <span class="text-danger" ng-if="!person.defaultAddress.city &&
                                    checkLocationRules(person.defaultAddress)"
                                  translate>
                            people.comp.newPerson.locations.city.validation.error</span>
                        </div>
                        <div class="col-sm-2 form-group"
                                ng-if="person.defaultAddress.country == 'US' || person.defaultAddress.country == 'CA' || person.defaultAddress.country == 'JP'">
                            <label translate>
                                people.comp.editPerson.locations.state</label>
                            <span ng-if="checkLocationRules(person.defaultAddress)"
                                  class="required-asterisk-state-label">*</span>
                            <select class="form-control" ng-model="person.defaultAddress.state" ng-required="checkLocationRules(person.defaultAddress)">
                                <option ng-repeat="option in states" value="{{option.key}}">
                                    {{option.value | translate}}
                                </option>
                            </select>
                            <span class="text-danger" ng-if="!person.defaultAddress.state &&
                                    checkLocationRules(person.defaultAddress)"
                                  translate>
                            people.comp.newPerson.locations.state.validation.error</span>
                        </div>
                        <div class="col-sm-2 form-group"
                                ng-if="person.defaultAddress.country != 'US' && person.defaultAddress.country != 'CA' && person.defaultAddress.country != 'JP'">
                            <label for="txtState" translate>
                                people.comp.addresses.modal.state.label
                            </label>
                            <span ng-if="checkLocationRules(person.defaultAddress)"
                                  class="required-asterisk-state-label">*</span>
                            <input id="txtState" type="text" ng-model="person.defaultAddress.state" class="input-md form-control"
                                    placeholder="{{ 'people.comp.addresses.modal.state.placeholder' | translate }}" ng-required="checkLocationRules(person.defaultAddress)">
                            <span class="text-danger" ng-if="!person.defaultAddress.state &&
                                    checkLocationRules(person.defaultAddress)"
                                  translate>
                            people.comp.newPerson.locations.state.validation.error</span>
                        </div>
                        <div class="col-sm-2 form-group">
                            <label translate>
                                people.comp.editPerson.locations.zip</label>
                            <span ng-if="checkLocationRules(person.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <input type="text" ng-model="person.defaultAddress.zip" class="input-md form-control"
                                    placeholder="{{ 'people.comp.editPerson.locations.zip.placeholder' | translate }}"
                                   ng-required="checkLocationRules(person.defaultAddress)">
                            <span class="text-danger" ng-if="!person.defaultAddress.zip &&
                                    checkLocationRules(person.defaultAddress)"
                                  translate>
                            people.comp.newPerson.locations.zip.validation.error</span>
                        </div>

                        <div class="col-sm-2 form-group">
                            <div class="pull-left">
                                <label class="control-label">&nbsp;</label>
                                <button type="button" class="btn btn-link form-control" ng-click="addAddress();"
                                        ng-show="person.addresses.length < 1">
                                    <i class="fa fa-plus text-success"></i><span translate>people.comp.editPerson.addAnother</span>
                                </button>
                            </div>
                        </div>

                    </div>

                    <div ng-repeat="address in person.addresses track by $index">
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <label translate> people.comp.editPerson.locations.country</label>
                                <select class="form-control" ng-model="address.country" ng-change="changeStates(address.country)" ng-required="checkLocationRules(address)>
                                    <option ng-repeat="option in countries" value="{{option.key}}">
                                        {{option.value | translate}}
                                    </option>
                                </select>
                            </div>
                            <div class="col-sm-6 form-group">
                                <label translate> people.comp.editPerson.locations.type</label>
                                <select class="form-control" ng-model="address.type" ng-required="checkLocationRules(address)">
                                    <option ng-repeat="option in addressTypes" value="{{option.key}}">
                                        {{option.value | translate}}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <label translate>
                                    people.comp.editPerson.locations.streetAddress</label>
                                <input type="text" ng-model="address.streetAddress" class="input-md form-control"
                                        placeholder="{{ 'people.comp.editPerson.locations.streetAddress.placeholder' | translate }}"
                                       ng-required="checkLocationRules(address)>
                            </div>
                            <div class="col-sm-6 form-group">
                                <label translate>
                                    people.comp.editPerson.locations.streetAddress2</label>
                                <input type="text" ng-model="address.streetAddress2" class="input-md form-control"
                                        placeholder="{{ 'people.comp.editPerson.locations.streetAddress2.placeholder' | translate }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <label translate>
                                    people.comp.editPerson.locations.city</label>
                                <input type="text" ng-model="address.city" class="input-md form-control"
                                        placeholder="{{ 'people.comp.editPerson.locations.city.placeholder' | translate }}"
                                       ng-required="checkLocationRules(address)">
                            </div>
                            <div class="col-sm-2 form-group"
                                    ng-if="address.country == 'US' || address.country == 'CA' || address.country == 'JP'">
                                <label translate>
                                    people.comp.editPerson.locations.state</label>
                                <select class="form-control" ng-model="address.state" ng-required="checkLocationRules(address)">
                                    <option ng-repeat="option in states" value="{{option.key}}">
                                        {{option.value | translate}}
                                    </option>
                                </select>
                            </div>
                            <div class="col-sm-2 form-group"
                                    ng-if="address.country != 'US' && address.country != 'CA' && address.country != 'JP'">
                                <label for="txtState" translate>
                                    people.comp.addresses.modal.state.label
                                </label>
                                <input type="text" ng-model="address.state" class="input-md form-control"
                                        placeholder="{{ 'people.comp.addresses.modal.state.placeholder' | translate }}"
                                       ng-required="checkLocationRules(address)">
                            </div>
                            <div class="col-sm-2 form-group">
                                <label translate>
                                    people.comp.editPerson.locations.zip</label>
                                <input type="text" ng-model="address.zip" class="input-md form-control"
                                        placeholder="{{ 'people.comp.editPerson.locations.zip.placeholder' | translate }}"
                                       ng-required="checkLocationRules(address)">
                            </div>
                            <div class="col-sm-2 form-group">
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="removeAddress(address)">
                                        <i class="fa fa-minus text-danger"></i><span translate>people.comp.editPerson.remove</span>
                                    </button>
                                </div>
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="addAddress();" ng-show="$last">
                                        <i class="fa fa-plus text-success"></i><span translate>people.comp.editPerson.addAnother</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseCommunicationAccounts" translate>people.comp.editPerson.communicationAccounts.title</a>
                </h4>
            </div>
            <div id="collapseCommunicationAccounts" class="panel-collapse collapse">
                <div class="panel-body">
                    <div ng-repeat="caType in communicationAccountsTypes">
                        <div class="row">
                            <div class="col-sm-4">
                                <label>
                                    {{'people.comp.editPerson.communicationAccounts.' + caType |
                                    translate}} </label>
                                <span class="required-asterisk" ng-show="person['default'+capitalizeFirstLetter(caType)].value">*</span>
                                <input type="{{caType}}" ng-model="person['default'+capitalizeFirstLetter(caType)].value"
                                        class="input-md form-control"
                                        placeholder="{{ 'people.comp.editPerson.communicationAccounts.' + caType + '.placeholder' | translate }}"
                                        ng-blur="validateInput(caType, person['default'+capitalizeFirstLetter(caType)], true)">
                                <span ng-if="caType == 'phone' && showPhoneError == true" translate>people.comp.editPerson.communicationAccounts.validationMessage</span>
                                <span ng-if="caType == 'email' && showEmailError == true" translate>people.comp.editPerson.communicationAccounts.emailValidationMessage</span>
                            </div>
                            <div class="col-sm-4">
                                <label for="defaultPhoneSubType" class="control-label">{{'people.comp.editPerson.communicationAccounts.'
                                    + caType + 'Type' | translate}}</label>
                                <span class="required-asterisk" ng-show="person['default'+capitalizeFirstLetter(caType)].value">*</span>
                                <select id="defaultPhoneSubType" class="form-control"
                                        ng-required="person['default'+capitalizeFirstLetter(caType)].value"
                                        ng-disabled="!person['default'+capitalizeFirstLetter(caType)].value"
                                        ng-model="person['default'+capitalizeFirstLetter(caType)].subType">
                                    <option ng-repeat="option in cmTypes[caType].subLookup" value="{{option.key}}">
                                        {{option.value | translate}}
                                    </option>
                                </select>
                            </div>
                            <div class="col-sm-4">
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="addContactMethod(caType);"
                                            ng-show="showAddAnotherContactMethod(caType)">
                                        <i class="fa fa-plus text-success"></i><span translate>people.comp.editPerson.addAnother</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div ng-repeat="contactMethod in person.contactMethods | filter: {type:caType}" class="row">
                            <div class="col-sm-4">
                                <label>
                                    {{'people.comp.editPerson.communicationAccounts.' + caType |
                                    translate}} {{contactMethod.input_type}} </label>
                                <span class="required-asterisk">*</span>
                                <input type="{{contactMethod.type}}" ng-model="contactMethod.value" required="required"
                                        class="input-md form-control"
                                        placeholder="{{ 'people.comp.editPerson.communicationAccounts.'+ caType +'.placeholder' | translate }}"
                                        ng-blur="validateInput(caType, contactMethod, false)">
                                <span ng-if="caType == 'phone' && contactMethod.showPhoneError == true" translate>people.comp.editPerson.communicationAccounts.validationMessage</span>
                                <span ng-if="caType == 'email' && contactMethod.showEmailError == true" translate>people.comp.editPerson.communicationAccounts.emailValidationMessage</span>
                            </div>
                            <div class=" col-sm-4">
                                <label class="control-label">{{'people.comp.editPerson.communicationAccounts.' +
                                    caType + 'Type' | translate}}</label>
                                <span class="required-asterisk">*</span>
                                <select ng-model="contactMethod.subType" required="required" ng-disabled="!contactMethod.value"
                                        class="form-control">
                                    <option ng-repeat="option in cmTypes[caType].subLookup" value="{{option.key}}">
                                        {{option.value | translate}}
                                    </option>
                                </select>
                            </div>
                            <div class="col-sm-4">
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="removeContactMethod(contactMethod)">
                                        <i class="fa fa-minus text-danger"></i><span translate>people.comp.editPerson.communicationAccounts.removeContactMethod</span>
                                    </button>
                                </div>
                                <div class="pull-left">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="addContactMethod(caType)"
                                            ng-show="$last">
                                        <i class="fa fa-plus text-success"></i><span translate>people.comp.editPerson.addAnother</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseDetails" translate>people.comp.details.title</a>
                </h4>
            </div>
            <div id="collapseDetails" class="panel-collapse collapse">
                <div class="panel-body remove-margin-bottom-from-summernote">
                    <mention-summernote ng-model="person.details" params="paramsSummernote"></mention-summernote>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip" data-title="Cancel" ng-click="cancelModal()">
            <span translate> people.comp.editPerson.cancelButton</span>
        </button>
        <button type="submit" ng-disabled="personForm.$invalid || loading" class="btn btn-primary btn-sm" data-toggle="tooltip"
                id="saveButton" data-title="Save">
            <i class="{{loadingIcon}}"></i>
            <span translate> people.comp.editPerson.saveButton</span>
        </button>
    </div>
</form>
