<form name="organizationForm" ng-submit="save()">
    <div class="modal-header">
        <h3><span translate>common.newOrganization.title</span></h3>
    </div>
    <div class="modal-body">
        <div class="row well-sm">
            <div class="col-sm-4 form-group">
                <label translate> common.newOrganization.name</label>
                <span class="required-asterisk">*</span>
                <input type="text" ng-model="organization.organizationValue" class="input-md form-control" required="required"
                        ng-blur="organizationExists()" placeholder="{{ 'common.newOrganization.name.placeholder' | translate }}" style="background-color: white;">
            </div>
            <div class="col-sm-4">
                <label class="control-label">{{ 'common.newOrganization.type'|translate}}</label>
                <span class="required-asterisk">*</span>
                <select 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 class="control-label">{{ 'common.newOrganization.parentOrganization' | translate}}</label>
                <input type="text" ng-model="organization.parentOrganization.organizationValue" readonly ng-click="searchOrganization()"
                        class="input-md form-control"
                        placeholder="{{'common.newOrganization.searchParentOrganization.placeholder' | translate}}"
                        style="background-color: white;">
            </div>
        </div>
        <div id="#accordionNewOrganization{{accordionSuffix}}" class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordionNewOrganization{{accordionSuffix}}"
                                href="#collapseIdentification{{accordionSuffix}}" translate>
                            common.newOrganization.identification.title</a>
                    </h4>
                </div>
                <div id="collapseIdentification{{accordionSuffix}}" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-4 form-group">
                                <label translate>
                                    common.newOrganization.identification.identificationNumber</label>
                                <input type="text" ng-model="organization.defaultIdentification.identificationNumber"
                                        class="input-md form-control"
                                        placeholder="{{ 'common.newOrganization.identification.identificationNumber.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-4 form-group">
                                <label translate>common.newOrganization.identification.identificationType</label>
                                <span ng-show="organization.defaultIdentification.identificationNumber" class="required-asterisk">*</span>
                                <select class="form-control" ng-required="organization.defaultIdentification.identificationNumber"
                                        ng-disabled="!organization.defaultIdentification.identificationNumber"
                                        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 translate>
                                    common.newOrganization.identification.identificationIssuer</label>
                                <input type="text" ng-model="organization.defaultIdentification.identificationIssuer"
                                        class="input-md form-control"
                                        placeholder="{{ 'common.newOrganization.identification.identificationIssuer.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-4 form-group">
                                <label translate>
                                    common.newOrganization.identification.identificationYearIssued</label>
                                <date-time-picker data="organization.defaultIdentification.identificationYearIssued" no-default-date="true"
                                                  is-readonly="!organization.defaultIdentification.identificationNumber" 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>common.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>
                                        common.newOrganization.identification.identificationNumber</label>
                                    <span class="required-asterisk">*</span>
                                    <input type="text" ng-model="identification.identificationNumber" required="required"
                                            class="input-md form-control"
                                            placeholder="{{ 'common.newOrganization.identification.identificationNumber.placeholder' | translate }}">
                                </div>
                                <div class="col-sm-4 form-group">
                                    <label translate>
                                        common.newOrganization.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>
                                        common.newOrganization.identification.identificationIssuer</label>
                                    <input type="text" ng-model="identification.identificationIssuer" class="input-md form-control"
                                            placeholder="{{ 'common.newOrganization.identification.identificationIssuer.placeholder' | translate }}">
                                </div>
                                <div class="col-sm-4 form-group">
                                    <div>
                                        <label translate>
                                            common.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 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>common.newOrganization.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>common.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" data-parent="#accordionNewOrganization{{accordionSuffix}}"
                            href="#collapsePeople{{accordionSuffix}}" translate>common.newOrganization.people.title</a>
                </h4>
            </div>
            <div id="collapsePeople{{accordionSuffix}}" 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)" class="input-md form-control" readonly
                                        placeholder="{{ 'common.newOrganization.people.searchExisting.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-4 form-group">
                                <label translate>common.newOrganization.people.personType</label>
                                {{personAssociation.personToOrganizationAssociationTypeName.name}}
                                <input class="form-control" readonly ng-model="personAssociation.personToOrganizationAssociationType">
                            </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="removePerson(personAssociation)"
                                            ng-show="!$first">
                                        <i class="fa fa-minus text-danger"></i><span translate>common.newOrganization.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="addNewPerson();">
                                        <i class="fa fa-plus text-success"></i><span translate>common.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" data-parent="#accordionNewOrganization{{accordionSuffix}}"
                            href="#collapseLocations{{accordionSuffix}}" translate>common.newOrganization.locations.title</a>
                </h4>
            </div>
            <div id="collapseLocations{{accordionSuffix}}" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <label translate> common.newOrganization.locations.country</label>
                            <select class="form-control" ng-model="organization.defaultAddress.country"
                                    ng-change="changeStates(organization.defaultAddress.country)">
                                <option ng-repeat="option in countries" value="{{option.key}}">
                                    {{option.value | translate}}
                                </option>
                            </select>
                        </div>
                        <div class="col-sm-6 form-group">
                            <label translate> common.newOrganization.locations.type</label>
                            <select class="form-control" ng-model="organization.defaultAddress.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 translate>
                                common.newOrganization.locations.streetAddress</label>
                            <input type="text" ng-model="organization.defaultAddress.streetAddress" class="input-md form-control"
                                    placeholder="{{ 'common.newOrganization.locations.streetAddress.placeholder' | translate }}">
                        </div>
                        <div class="col-sm-6 form-group">
                            <label translate>
                                common.newOrganization.locations.streetAddress2</label>
                            <input type="text" ng-model="organization.defaultAddress.streetAddress2" class="input-md form-control"
                                   placeholder="{{ 'common.newOrganization.locations.streetAddress2.placeholder' | translate }}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <label translate>
                                common.newOrganization.locations.city</label>
                            <input type="text" ng-model="organization.defaultAddress.city" class="input-md form-control"
                                    placeholder="{{ 'common.newOrganization.locations.city.placeholder' | translate }}">
                        </div>
                        <div class="col-sm-2 form-group"
                                ng-if="organization.defaultAddress.country == 'US' || organization.defaultAddress.country == 'CA' || organization.defaultAddress.country == 'JP'">
                            <label translate>
                                common.newOrganization.locations.state</label>
                            <select id="txtState" class="form-control" ng-model="organization.defaultAddress.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="organization.defaultAddress.country != 'US' && organization.defaultAddress.country != 'CA' && organization.defaultAddress.country != 'JP'">
                            <label for="txtState" translate>
                                common.newOrganization.locations.state
                            </label>
                            <input id="txtState" type="text" ng-model="organization.defaultAddress.state" class="input-md form-control"
                                    placeholder="{{ 'common.newOrganization.locations.state.placeholder' | translate }}">
                        </div>
                        <div class="col-sm-2 form-group">
                            <label translate>
                                common.newOrganization.locations.zip</label>
                            <input type="text" ng-model="organization.defaultAddress.zip" class="input-md form-control"
                                    placeholder="{{ 'common.newOrganization.locations.zip.placeholder' | translate }}">
                        </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="organization.addresses.length < 1">
                                    <i class="fa fa-plus text-success"></i><span translate>common.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 translate> common.newOrganization.locations.country</label>
                                <select 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 translate> common.newOrganization.locations.type</label>
                                <select 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 translate>
                                    common.newOrganization.locations.streetAddress</label>
                                <input type="text" ng-model="address.streetAddress" class="input-md form-control"
                                        placeholder="{{ 'common.newOrganization.locations.streetAddress.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-6 form-group">
                                <label translate>
                                    common.newOrganization.locations.streetAddress2</label>
                                <input type="text" ng-model="address.streetAddress2" class="input-md form-control"
                                        placeholder="{{ 'common.newOrganization.locations.streetAddress2.placeholder' | translate }}">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <label translate>
                                    common.newOrganization.locations.city</label>
                                <input type="text" ng-model="address.city" class="input-md form-control"
                                        placeholder="{{ 'common.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 translate>
                                    common.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>
                                    common.newOrganization.locations.state
                                </label>
                                <input type="text" ng-model="address.state" class="input-md form-control"
                                        placeholder="{{ 'common.newOrganization.locations.state.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-2 form-group">
                                <label translate>
                                    common.newOrganization.locations.zip</label>
                                <input type="text" ng-model="address.zip" class="input-md form-control"
                                        placeholder="{{ 'common.newOrganization.locations.zip.placeholder' | translate }}">
                            </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>common.newOrganization.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>common.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" data-parent="#accordionNewOrganization{{accordionSuffix}}"
                            href="#collapseCommunicationAccounts{{accordionSuffix}}" translate>common.newOrganization.communicationAccounts.title</a>
                </h4>
            </div>
            <div id="collapseCommunicationAccounts{{accordionSuffix}}" class="panel-collapse collapse">
                <div class="panel-body">
                    <div ng-repeat="caType in communicationAccountsTypes">
                        <div id="defaultPhone" class="row">
                            <div class="col-sm-4">
                                <label>
                                    {{'common.newOrganization.communicationAccounts.' + caType |
                                    translate}} </label>
                                <span ng-show="organization['default'+capitalizeFirstLetter(caType)].value" class="required-asterisk">*</span>
                                <input type="{{caType}}" ng-model="organization['default'+capitalizeFirstLetter(caType)].value"
                                        class="input-md form-control"
                                        placeholder="{{ 'common.newOrganization.communicationAccounts.' + caType + '.placeholder' | translate }}"
                                        ng-blur="validateInput(caType)">
                                <span ng-if="caType == 'phone' && showPhoneError == true" translate>common.newOrganization.communicationAccounts.validationMessage</span>
                            </div>
                            <div class="col-sm-4">
                                <label class="control-label">{{'common.newOrganization.communicationAccounts.'
                                    + caType + 'Type' | translate}}</label>
                                <span ng-show="organization['default'+capitalizeFirstLetter(caType)].value" class="required-asterisk">*</span>
                                <select 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 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>common.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>
                                    {{'common.newOrganization.communicationAccounts.' + caType |
                                    translate}} </label>
								<span class="required-asterisk">*</span>
                                <input type="{{contactMethod.type}}" ng-model="contactMethod.value" required="required" class="input-md form-control"
                                        placeholder="{{ 'common.newOrganization.communicationAccounts.'+ caType +'.placeholder' | translate }}">
                            </div>
                            <div class="col-sm-4">
                                <label class="control-label">{{'common.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 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>common.newOrganization.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>common.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" data-parent="#accordionNewOrganization{{accordionSuffix}}"
                            href="#collapseDetails{{accordionSuffix}}" translate>common.newOrganization.details.title</a>
                </h4>
            </div>
            <div id="collapseDetails{{accordionSuffix}}" class="panel-collapse collapse">
                <div class="panel-body">
                    <summernote config="options" ng-model="organization.details"></summernote>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="well-sm">
            <div class="row">
                <div class="well-sm">
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-secondary btn-sm" ng-click="onClickCancel()">
                                <span translate>common.newOrganization.cancelButton</span>
                            </button>
                            <button type="submit" ng-disabled="organizationForm.$invalid || saved" class="btn btn-primary btn-sm"
                                    data-toggle="tooltip" id="saveButton" data-title="Save">
                                <i class="{{loadingIcon}}"></i>
                                <span translate> common.newOrganization.saveButton</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
