<form name="organizationForm" ng-submit="save()">
    <div class="modal-header">
        <h3><span translate>organizations.comp.newOrganization.title</span></h3>
    </div>
    <div class="modal-body">
        <div class="row well-sm">
            <div class="col-sm-4 form-group">
                <label for="organizationName" translate> organizations.comp.newOrganization.name </label>
                <span class="required-asterisk">*</span>
                <input id="organizationName" type="text" ng-model="organization.organizationValue" class="input-md form-control"
                       required="required" ng-blur="organizationExists()" placeholder="{{ 'organizations.comp.newOrganization.name.placeholder' | translate }}"
                       style="background-color: white;">
            </div>
            <div class="col-sm-4">
                <label for="orgType" class="control-label">{{'organizations.comp.newOrganization.type'|translate}}</label>
                <span class="required-asterisk">*</span>
                <select id="orgType" class="form-control" required="required" ng-model="organization.organizationType">
                    <option ng-repeat="option in organizationTypes" value="{{option.key}}">
                        {{option.value | translate}}
                    </option>
                </select>
            </div>
            <div class="col-sm-4">
                <label for="parentOrganization" class="control-label">{{
                    'organizations.comp.newOrganization.parentOrganization' | translate}}</label>
                <input id="parentOrganization" type="text" ng-model="organization.parentOrganization.organizationValue" readonly
                       ng-click="searchOrganization()" class="input-md form-control"
                       placeholder="{{ 'organizations.comp.newOrganization.searchParentOrganization.placeholder' | translate }}"
                       style="background-color: white;">
            </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" href="#collapseIdentification" translate>
                            organizations.comp.newOrganization.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 for="identificationNumber" translate>
                                    organizations.comp.newOrganization.identification.identificationNumber</label>
                                <input id="identificationNumber" type="text"
                                       ng-model="organization.defaultIdentification.identificationNumber" class="input-md form-control"
                                       placeholder="{{ 'organizations.comp.newOrganization.identification.identificationNumber.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-4 form-group">
                                <label for="identificationType" translate>organizations.comp.newOrganization.identification.identificationType</label>
                                <span class="required-asterisk" ng-show="organization.defaultIdentification.identificationNumber">*</span>
                                <select id="identificationType" ng-required="organization.defaultIdentification.identificationNumber"
                                        ng-disabled="!organization.defaultIdentification.identificationNumber" class="form-control"
                                        ng-model="organization.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 for="identificationIssuer" translate>
                                    organizations.comp.newOrganization.identification.identificationIssuer</label>
                                <input id="identificationIssuer" type="text"
                                       ng-model="organization.defaultIdentification.identificationIssuer" class="input-md form-control"
                                       placeholder="{{ 'organizations.comp.newOrganization.identification.identificationIssuer.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-4 form-group">
                                <label translate>
                                    organizations.comp.newOrganization.identification.identificationYearIssued</label>
                                <date-time-picker data="organization.defaultIdentification.identificationYearIssued" is-readonly="!organization.defaultIdentification.identificationNumber"
                                                  no-default-date="true" disable="!organization.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="organization.identifications.length < 1">
                                        <i class="fa fa-plus text-success"></i><span
                                            translate>organizations.comp.newOrganization.addAnother</span>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div ng-repeat="identification in organization.identifications">
                            <div class="row">
                                <div class="col-sm-4 form-group">
                                    <label translate>
                                        organizations.comp.newOrganization.identification.identificationNumber</label>
                                    <span class="required-asterisk">*</span>
                                    <input type="text" ng-model="identification.identificationNumber" class="input-md form-control"
                                           required="required"
                                           placeholder="{{ 'organizations.comp.newOrganization.identification.identificationNumber.placeholder' | translate }}">
                                </div>
                                <div class="col-sm-4 form-group">
                                    <label translate>
                                        organizations.comp.newOrganization.identification.identificationType</label>
                                    <span class="required-asterisk">*</span>
                                    <select required="required" class="form-control" 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>
                                        organizations.comp.newOrganization.identification.identificationIssuer</label>
                                    <input type="text" ng-model="identification.identificationIssuer" class="input-md form-control"
                                           placeholder="{{ 'organizations.comp.newOrganization.identification.identificationIssuer.placeholder' | translate }}">
                                </div>
                                <div class="col-sm-4 form-group">
                                    <div>
                                        <label translate>
                                            organizations.comp.newOrganization.identification.identificationYearIssued</label>
                                        <date-time-picker data="identification.identificationYearIssued" is-readonly="!identification.identificationNumber"
                                                          disable="!identification.identificationNumber" no-default-date="true"></date-time-picker>
                                    </div>
                                </div>
                                <div class="col-sm-4 form-group">
                                    <div class="pull-left">
                                        <label for="" 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>organizations.comp.newOrganization.communicationAccounts.removeContactMethod</span>
                                        </button>
                                    </div>
                                    <div class="pull-left">
                                        <label for="" 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>organizations.comp.newOrganization.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"  href="#collapseOrganizations" translate>organizations.comp.newOrganization.people.title</a>
                </h4>
            </div>
            <div id="collapseOrganizations" class="panel-collapse collapse">
                <div class="panel-body">
                    <div ng-repeat="personAssociation in organization.personAssociations">
                        <div class="row">
                            <div class="col-sm-4 form-group">
                                <label for="searchExisting">&nbsp;</label>
                                <input id="searchExisting" type="text" ng-model="personAssociation.personFullName"
                                       ng-click="searchPerson($index, true)" class="input-md form-control" readonly
                                       placeholder="{{ 'organizations.comp.newOrganization.people.searchExisting.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-4 form-group">
                                <label translate>organizations.comp.people.type.label</label>
                                <select class="input-md form-control"
                                        ng-model="personAssociation.personToOrganizationAssociationType"
                                        ng-options="item.key as item.value | translate for item in personAssociationTypes"
                                        id="personToOrganizationAssociationType" name="personToOrganizationAssociationType"
                                        ng-disabled="true">
                                </select>
                            </div>
                            <div class="col-sm-4 form-group">
                                <div class="pull-left">
                                    <label for="" class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="removePerson(personAssociation)"
                                            ng-show="!$first">
                                        <i class="fa fa-minus text-danger"></i><span
                                            translate>organizations.comp.newOrganization.remove</span>
                                    </button>
                                </div>
                                <div class="pull-left">
                                    <label for="" class="control-label">&nbsp;</label>
                                    <button type="button" class="btn btn-link form-control" ng-click="addNewPerson();"
                                            ng-disabled="!personAssociation.personFullName" ng-show="$last">
                                        <i class="fa fa-plus text-success"></i><span
                                            translate>organizations.comp.newOrganization.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" href="#collapseLocations" translate>organizations.comp.newOrganization.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 for="country" translate>
                                organizations.comp.newOrganization.locations.country</label>
                            <span ng-if="checkLocationRules(organization.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <select id="country" class="form-control" ng-model="organization.defaultAddress.country"
                                    ng-change="changeStates(organization.defaultAddress.country)"
                                    ng-required="checkLocationRules(organization.defaultAddress)">
                                <option ng-repeat="option in countries" value="{{option.key}}">
                                    {{option.value | translate}}
                                </option>
                            </select>
                            <span class="text-danger" ng-if="!organization.defaultAddress.country &&
                                    checkLocationRules(organization.defaultAddress)"
                                  translate>
                            organizations.comp.newOrganization.locations.country.validation.error</span>
                        </div>
                        <div class="col-sm-6 form-group">
                            <label for="loctype" translate>
                                organizations.comp.newOrganization.locations.type</label>
                            <span ng-if="checkLocationRules(organization.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <select id="loctype" class="form-control" ng-model="organization.defaultAddress.type"
                                    ng-required="checkLocationRules(organization.defaultAddress)">
                                <option ng-repeat="option in addressTypes" value="{{option.key}}">
                                    {{option.value | translate}}
                                </option>
                            </select>
                            <span class="text-danger" ng-if="!organization.defaultAddress.type &&
                                    checkLocationRules(organization.defaultAddress)"
                                  translate>
                            organizations.comp.newOrganization.locations.type.validation.error</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <label for="" translate>
                                organizations.comp.newOrganization.locations.streetAddress</label>
                            <span ng-if="checkLocationRules(organization.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <input id="streetDefaultAddress" type="text" ng-model="organization.defaultAddress.streetAddress"
                                   class="input-md form-control"
                                   ng-required="checkLocationRules(organization.defaultAddress)"
                                   placeholder="{{ 'organizations.comp.newOrganization.locations.streetAddress.placeholder' | translate }}">
                            <span class="text-danger" ng-if="!organization.defaultAddress.streetAddress &&
                                    checkLocationRules(organization.defaultAddress)"
                                  translate>
                            organizations.comp.newOrganization.locations.streetAddress.validation.error</span>
                        </div>
                        <div class="col-sm-6 form-group">
                            <label for="streetAddress2" translate>
                                organizations.comp.newOrganization.locations.streetAddress2</label>
                            <input id="streetDefaultAddress2" type="text" ng-model="organization.defaultAddress.streetAddress2"
                                   class="input-md form-control"
                                   placeholder="{{ 'organizations.comp.newOrganization.locations.streetAddress2.placeholder' | translate }}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <label for="city" translate>
                                organizations.comp.newOrganization.locations.city</label>
                            <span ng-if="checkLocationRules(organization.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <input id="city" for="" type="text" ng-model="organization.defaultAddress.city" class="input-md form-control"
                                   ng-required="checkLocationRules(organization.defaultAddress)"
                                   placeholder="{{ 'organizations.comp.newOrganization.locations.city.placeholder' | translate }}">
                            <span class="text-danger" ng-if="!organization.defaultAddress.city &&
                                    checkLocationRules(organization.defaultAddress)"
                                  translate>
                            organizations.comp.newOrganization.locations.city.validation.error</span>
                        </div>
                        <div class="col-sm-2 form-group"
                             ng-if="organization.defaultAddress.country == 'US' || organization.defaultAddress.country == 'CA' || organization.defaultAddress.country == 'JP'">
                            <label for="state" translate>
                                organizations.comp.newOrganization.locations.state</label>
                            <span ng-if="checkLocationRules(organization.defaultAddress)"
                                  class="required-asterisk-state-label">*</span>
                            <select id="state" class="form-control" ng-model="organization.defaultAddress.state"
                                    ng-required="checkLocationRules(organization.defaultAddress)">
                                <option ng-repeat="option in states" value="{{option.key}}">
                                    {{option.value | translate}}
                                </option>
                            </select>
                            <span class="text-danger" ng-if="!organization.defaultAddress.state &&
                                    checkLocationRules(organization.defaultAddress)"
                                  translate>
                            organizations.comp.newOrganization.locations.state.validation.error</span>
                        </div>
                        <div class="col-sm-2 form-group"
                             ng-if="organization.defaultAddress.country != 'US' && organization.defaultAddress.country != 'CA' && organization.defaultAddress.country != 'JP'">
                            <label for="txtState" translate>
                                organizations.comp.newOrganization.locations.state
                            </label>
                            <span ng-if="checkLocationRules(organization.defaultAddress)"
                                  class="required-asterisk-state-label">*</span>
                            <input id="txtState" type="text" ng-model="organization.defaultAddress.state" class="input-md form-control"
                                   ng-required="checkLocationRules(organization.defaultAddress)"
                                   placeholder="{{ 'organizations.comp.newOrganization.locations.state.placeholder' | translate }}">
                            <span class="text-danger" ng-if="!organization.defaultAddress.state &&
                                    checkLocationRules(organization.defaultAddress)"
                                  translate>
                            organizations.comp.newOrganization.locations.state.validation.error</span>
                        </div>
                        <div class="col-sm-2 form-group">
                            <label for="zip" translate>
                                organizations.comp.newOrganization.locations.zip</label>
                            <span ng-if="checkLocationRules(organization.defaultAddress)"
                                  class="required-asterisk">*</span>
                            <input id="zip" type="text" ng-model="organization.defaultAddress.zip" class="input-md form-control"
                                   ng-required="checkLocationRules(organization.defaultAddress)"
                                   placeholder="{{ 'organizations.comp.newOrganization.locations.zip.placeholder' | translate }}">
                            <span class="text-danger" ng-if="!organization.defaultAddress.zip &&
                                    checkLocationRules(organization.defaultAddress)"
                                  translate>
                            organizations.comp.newOrganization.locations.zip.validation.error</span>
                        </div>

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

                    <div ng-repeat="address in organization.addresses">
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <label for="country" translate>
                                    organizations.comp.newOrganization.locations.country</label>
                                <select id="country" class="form-control" ng-model="address.country"
                                        ng-change="changeStates(address.country)">
                                    <option ng-repeat="option in countries" value="{{option.key}}">
                                        {{option.value | translate}}
                                    </option>
                                </select>
                            </div>
                            <div class="col-sm-6 form-group">
                                <label for="loctype" translate>
                                    organizations.comp.newOrganization.locations.type</label>
                                <select id="" class="form-control" ng-model="address.type">
                                    <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 for="streetAddress" translate>
                                    organizations.comp.newOrganization.locations.streetAddress</label>
                                <input id="streetAddress" type="text" ng-model="address.streetAddress" class="input-md form-control"
                                       placeholder="{{ 'organizations.comp.newOrganization.locations.streetAddress.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-6 form-group">
                                <label for="streetAddress2" translate>
                                    organizations.comp.newOrganization.locations.streetAddress2</label>
                                <input id="streetAddress2" type="text" ng-model="address.streetAddress2" class="input-md form-control"
                                       placeholder="{{ 'organizations.comp.newOrganization.locations.streetAddress2.placeholder' | translate }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <label for="city" translate>
                                    organizations.comp.newOrganization.locations.city</label>
                                <input id="city" type="text" ng-model="address.city" class="input-md form-control"
                                       placeholder="{{ 'organizations.comp.newOrganization.locations.city.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-2 form-group"
                                 ng-if="address.country == 'US' || address.country == 'CA' || address.country == 'JP'">
                                <label for="state" translate>
                                    organizations.comp.newOrganization.locations.state</label>
                                <select id="state" class="form-control" ng-model="address.state">
                                    <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>
                                    organizations.comp.newOrganization.locations.state
                                </label>
                                <input type="text" ng-model="address.state" class="input-md form-control"
                                       placeholder="{{ 'organizations.comp.newOrganization.locations.state.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-2 form-group">
                                <label for="zip" translate>
                                    organizations.comp.newOrganization.locations.zip</label>
                                <input id="zip" type="text" ng-model="address.zip" class="input-md form-control"
                                       placeholder="{{ 'organizations.comp.newOrganization.locations.zip.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-2 form-group">
                                <div class="pull-left">
                                    <label for="" 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>organizations.comp.newOrganization.remove</span>
                                    </button>
                                </div>
                                <div class="pull-left">
                                    <label for="" 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>organizations.comp.newOrganization.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" href="#collapseCommunicationAccounts" translate>organizations.comp.newOrganization.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>
                                    {{'organizations.comp.newOrganization.communicationAccounts.' + caType |
                                    translate}} </label>
                                <input type="{{caType}}" ng-model="organization['default'+capitalizeFirstLetter(caType)].value"
                                       class="input-md form-control"
                                       placeholder="{{ 'organizations.comp.newOrganization.communicationAccounts.' + caType + '.placeholder' | translate }}"
                                       ng-blur="validateContact(caType, organization['default'+capitalizeFirstLetter(caType)], true)">
                                <span ng-if="caType == 'phone' && showPhoneError == true" translate>organizations.comp.newOrganization.communicationAccounts.validationMessage</span>
                                <span ng-if="caType == 'fax' && showFaxError == true" translate>organizations.comp.newOrganization.communicationAccounts.faxValidationMessage</span>
                                <span ng-if="caType == 'email' && showEmailError == true" translate>organizations.comp.newOrganization.communicationAccounts.emailValidationMessage</span>
                            </div>
                            <div class="col-sm-4">
                                <label for="defaultPhoneSubType" class="control-label">{{'organizations.comp.newOrganization.communicationAccounts.'
                                    + caType + 'Type' | translate}}</label>
                                <select id="defaultPhoneSubType" class="form-control"
                                        ng-model="organization['default'+capitalizeFirstLetter(caType)].subType"
                                        ng-required="organization['default'+capitalizeFirstLetter(caType)].value"
                                        ng-disabled="!organization['default'+capitalizeFirstLetter(caType)].value">
                                    <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 for="" 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>organizations.comp.newOrganization.addAnother</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div ng-repeat="contactMethod in organization.contactMethods | filter: {type:caType}" class="row">
                            <div class="col-sm-4">
                                <label for="caType">
                                    {{'organizations.comp.newOrganization.communicationAccounts.' + caType |
                                    translate}} </label>
                                <span class="required-asterisk">*</span>
                                <input id="caType" type="{{contactMethod.type}}" ng-model="contactMethod.value" required="required"
                                       class="input-md form-control"
                                       placeholder="{{ 'organizations.comp.newOrganization.communicationAccounts.'+ caType +'.placeholder' | translate }}"
                                       ng-blur="validateContact(contactMethod.type, contactMethod, false)">
                                <span ng-if="contactMethod.type === 'phone' && contactMethod.showPhoneError == true" translate>organizations.comp.newOrganization.communicationAccounts.validationMessage</span>
                                <span ng-if="contactMethod.type === 'fax' && contactMethod.showFaxError == true" translate>organizations.comp.newOrganization.communicationAccounts.faxValidationMessage</span>
                                <span ng-if="contactMethod.type === 'email' && contactMethod.showEmailError == true" translate>organizations.comp.newOrganization.communicationAccounts.emailValidationMessage</span>
                            </div>
                            <div class="col-sm-4">
                                <label class="control-label">{{'organizations.comp.newOrganization.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 for="" 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>organizations.comp.newOrganization.communicationAccounts.removeContactMethod</span>
                                    </button>
                                </div>
                                <div class="pull-left">
                                    <label for="" 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>organizations.comp.newOrganization.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" href="#collapseDetails"
                       translate>organizations.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="organization.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> organizations.comp.newOrganization.cancelButton </span>
        </button>
        <button type="submit" ng-disabled="checkLocationRules(organization.defaultAddress) && organizationForm.$invalid || loading" class="btn btn-primary btn-sm" data-toggle="tooltip"
                id="saveButton" data-title="Save">
            <i class="{{loadingIcon}}"></i>
            <span translate>organizations.comp.newOrganization.saveButton</span>
        </button>
    </div>
</form>
