{{"EMAIL"|translate}}*

{{"NAME"|translate}}*

{{"INSIDER.BIRTHDAY"|translate}}*

-

*

{{"INSIDER.HOME_ADDRESS"|translate}}*

{{"POSTAL_CODE" | translate}}*

{{"CITY" | translate}}*

{{"COUNTRY" | translate}}*

{{"INSIDER.JOB_DESCRIPTION" | translate}}*

<small class="invalid-field"
                                   ng-show="(form.jobDescription.$dirty||form.jobDescription.$touched||submitted) &&form.jobDescription.$error.required">
                                {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                            </small>
                        </div>
                    </div>

<div class="row container-section form-group" ng-class="{ 'has-error' : ((form.companyAddress.$dirty||submitted) && form.companyAddress.$invalid) ||
                                                                                            ((form.companyPostalCode.$dirty||submitted) && form.companyPostalCode.$invalid) ||
                                                                                            ((form.companyCity.$dirty||submitted) && form.companyCity.$invalid) ||
                                                                                            ((form.companyCountry.$dirty||submitted) && form.companyCountry.$invalid) }">
                        <label class="col-sm-2 control-label">{{"COMPANY.NAME"|translate}}*</label>
                        <div class="col-sm-10">
                            <input class="form-control"
                                   ng-model="insider.company.name"
                                   name="companyName" type="text"
                                   ng-attr-placeholder="{{'PLACEHOLDERS.COMPANY.NAME' | translate}}"
                                   ng-required="action!='editInsider'"
                            />
                            <small class="invalid-field"
                                   ng-show="(form.companyName.$dirty||form.companyName.$touched||submitted) &&form.companyName.$error.required">
                                {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                            </small>
                        </div>
                        <div class="col-sm-12 margin-top-10"></div>
                        <label class="col-sm-2 control-label">{{"COMPANY.ADDRESS"|translate}}*</label>
                        <div class="col-sm-10">
                            <input class="form-control"
                                   ng-model="insider.company.address"
                                   name="companyAddress" type="text"
                                   ng-attr-placeholder="{{'PLACEHOLDERS.INSIDER.ADDRESS' | translate}}"
                                   ng-required="action!='editInsider'"
                            />
                            <small class="invalid-field"
                                   ng-show="(form.companyAddress.$dirty||form.companyAddress.$touched||submitted) &&form.companyAddress.$error.required">
                                {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                            </small>
                        </div>
                        <div class="col-sm-12 margin-top-10"></div>
                        <label class="col-sm-2 control-label">{{"POSTAL_CODE" | translate}}*</label>
                        <div class="col-sm-4">
                            <input class="form-control"
                                   ng-model="insider.company.postalCode"
                                   name="companyPostalCode" type="text"
                                   ng-attr-placeholder="{{'PLACEHOLDERS.INSIDER.POSTAL_CODE' | translate}}"
                                   ng-required="action!='editInsider'"
                            />
                            <small class="invalid-field"
                                   ng-show="(form.companyPostalCode.$dirty||form.companyPostalCode.$touched||submitted) &&form.companyPostalCode.$error.required">
                                {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                            </small>
                        </div>
                        <label class="col-sm-2 control-label">{{"CITY" | translate}}*</label>
                        <div class="col-sm-4">
                            <input class="form-control"
                                   ng-model="insider.company.city"
                                   name="companyCity" type="text"
                                   ng-attr-placeholder="{{'PLACEHOLDERS.INSIDER.CITY' | translate}}"
                                   ng-required="action!='editInsider'"
                            />
                            <small class="invalid-field"
                                   ng-show="(form.companyCity.$dirty||form.companyCity.$touched||submitted) &&form.companyCity.$error.required">
                                {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                            </small>
                        </div>
                        <div class="col-sm-12 margin-top-10"></div>
                        <label class="col-sm-2 control-label">{{"COUNTRY" | translate}}*</label>
                        <div class="col-sm-4">
                            <input class="form-control"
                                   ng-model="insider.company.country"
                                   name="companyCountry" type="text"
                                   ng-attr-placeholder="{{'PLACEHOLDERS.INSIDER.COUNTRY' | translate}}"
                                   ng-required="action!='editInsider'"
                            />
                            <small class="invalid-field"
                                   ng-show="(form.companyCountry.$dirty||form.companyCountry.$touched||submitted) &&form.companyCountry.$error.required">
                                {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="clearfix container-box extension-box" ng-if="!isAdmin()">
        <div class="col-sm-12">
            <div class=" row container-box-heading-alternative">
                <p>{{"PHONE"|translate}}**</p>
                <p style="font-size: 11px; color:red;" ng-bind-html="'PHONE_INTERNATIONAL'|translate|safehtml"></p>
                <p style="font-size: 11px; color:red;" ng-bind-html="'PHONE_INTERNATIONAL_EXAMPLE'|translate|safehtml"></p>
                <p style="font-size: 11px">**{{'CREATE_INSIDER_FORM.ONE_PHONE_REQUIRED'|translate}}</p>
            </div>
            <div class="row container-box-body">
                <div class="col-sm-12">
                    <div class="row container-section form-group" >
                        <label class="col-sm-2 control-label">{{"TELEPHONE.WORK.LAND" | translate}}</label>
                        <div class="col-sm-4">
                            <div class="input-group">
                                <input class="form-control"
                                       ng-model="insider.workPhoneNumber"
                                       name="workPhoneNumber" type="tel"
                                       ng-attr-placeholder="{{'PLACEHOLDERS.PHONE.LANDLINE' | translate}}"
                                       autocomplete="off"
                                       phone-number-helper
                                       ng-disabled="!insider.workPhoneNumberChecked"
                                       ng-required="insider.workPhoneNumberChecked && action!='editInsider'"
                                />
                                <span class="input-group-addon" ng-class="{backgroundRed: (form.workPhoneNumber.$dirty||form.workPhoneNumber.$touched||submitted)
                                                                                && insider.workPhoneNumberChecked && (insider.workPhoneNumber == null)  && action!='editInsider' } " >
                                        <input type="checkbox" ng-model="insider.workPhoneNumberChecked" aria-label="Checkbox for following text input">
                                    </span>
                            </div>
                        </div>
                        <label class="col-sm-2 control-label">{{"TELEPHONE.WORK.MOBILE" | translate}}<span
                                ng-if="isAdmin()">*</span></label>
                        <div class="col-sm-4">
                            <div class="input-group">
                                <input class="form-control"
                                       ng-model="insider.workMobilePhoneNumber"
                                       name="workMobilePhoneNumber" type="tel"
                                       ng-attr-placeholder="{{'PLACEHOLDERS.PHONE.MOBILE' | translate}}"
                                       autocomplete="off"
                                       phone-number-helper
                                       ng-disabled="!insider.workMobilePhoneNumberChecked"
                                       ng-required="insider.workMobilePhoneNumberChecked && action!='editInsider' "
                                />
                                <span class="input-group-addon" ng-class="{backgroundRed: (form.workMobilePhoneNumber.$dirty||form.workMobilePhoneNumber.$touched||submitted)
                                                                                && insider.workMobilePhoneNumberChecked && (insider.workMobilePhoneNumber == null) && action!='editInsider' }" >
                                        <input type="checkbox" ng-model="insider.workMobilePhoneNumberChecked" aria-label="Checkbox for following text input">
                                    </span>
                            </div>
                        </div>
                        <div class="col-sm-12 margin-top-10"></div>
                        <label class="col-sm-2 control-label">{{"TELEPHONE.PERSONAL.LAND" | translate}}</label>
                        <div class="col-sm-4">
                            <div class="input-group">
                                <input class="form-control"
                                       ng-model="insider.personalPhoneNumber"
                                       name="personalPhoneNumber" type="tel"
                                       ng-attr-placeholder="{{'PLACEHOLDERS.PHONE.LANDLINE' | translate}}"
                                       autocomplete="off"
                                       phone-number-helper
                                       ng-disabled="!insider.personalPhoneNumberChecked"
                                       ng-required="insider.personalPhoneNumberChecked && action!='editInsider' "
                                />
                                <span class="input-group-addon" ng-class="{backgroundRed: (form.personalPhoneNumber.$dirty||form.personalPhoneNumber.$touched||submitted)
                                                                                && insider.personalPhoneNumberChecked && (insider.personalPhoneNumber == null) && action!='editInsider' }" >
                                        <input type="checkbox" ng-model="insider.personalPhoneNumberChecked" aria-label="Checkbox for following text input">
                                    </span>
                            </div>
                        </div>
                        <label class="col-sm-2 control-label">{{"TELEPHONE.PERSONAL.MOBILE" | translate}}</label>
                        <div class="col-sm-4">
                            <div class="input-group">
                                <input class="form-control"
                                       ng-model="insider.personalMobilePhoneNumber"
                                       name="personalMobilePhoneNumber" type="tel"
                                       ng-attr-placeholder="{{'PLACEHOLDERS.PHONE.MOBILE' | translate}}"
                                       autocomplete="off"
                                       phone-number-helper
                                       ng-disabled="!insider.personalMobilePhoneNumberChecked"
                                       ng-required="insider.personalMobilePhoneNumberChecked && action!='editInsider' "
                                />
                                <span class="input-group-addon" ng-class="{backgroundRed: (form.personalMobilePhoneNumber.$dirty||form.personalMobilePhoneNumber.$touched||submitted)
                                                                                && insider.personalMobilePhoneNumberChecked && (insider.personalMobilePhoneNumber == null)  && action!='editInsider' }" >
                                        <input type="checkbox"  ng-model="insider.personalMobilePhoneNumberChecked" aria-label="Checkbox for following text input">
                                    </span>
                            </div>
                        </div>
                        <div class="col-sm-12 margin-top-10"></div>
                        <small class="col-sm-12 text-center invalid-field" ng-if="isAdmin()"
                               ng-show="(form.workMobilePhoneNumber.$dirty||form.workMobilePhoneNumber.$touched||submitted) && form.workMobilePhoneNumber.$error.required">
                            {{"CREATE_INSIDER_FORM.WORK_MOBILE_REQUIRED"|translate}}
                        </small>
                        <small class="col-sm-12 text-center invalid-field" ng-if="!isAdmin() && hasNoPhoneNumber()">
                            {{"CREATE_INSIDER_FORM.ONE_PHONE_REQUIRED"|translate}}
                        </small>

</div>
                </div>
            </div>
        </div>
    </div>

<div class="clearfix container-box extension-box" ng-if="showEnabledBox() && !isAdmin() && insider.emailTemplates">
        <div class="col-sm-12">
            <div class=" row container-box-heading-alternative">
                <p>{{"EMAILS"|translate}}</p>
            </div>
            <div class="row container-box-body">
                <uib-accordion close-others="true" class="col-sm-12 emails-accordion">
                    <div uib-accordion-group class="panel-default" is-open="isOpen" ng-repeat="(epoch, emailBody) in insider.emailTemplates">
                        <uib-accordion-heading>
                            {{epoch | date:'yyyy-MM-dd HH:mm'}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
                        </uib-accordion-heading>
                        <span ng-bind-html="emailBody"></span>
                    </div>
                </uib-accordion>
            </div>
        </div>
    </div>

<div class="clearfix container-box extension-box" ng-if="!isAdmin()">
        <div class="col-sm-12">
            <div class="row container-box-body">
                <div class="col-sm-12">
                    <div class="row container-section">
                        <div ng-if="action=='newInsider'" class="row">
                            <div class="col-sm-6 col-sm-offset-3 text-center">
                                <input type="checkbox" ng-model="form.insiderRules"> <span
                                    ng-bind-html="'INSIDER_FORM.I_APPROVE_THE_INSIDER_RULES_WITH_LINK_1'|translate|safehtml">*</span>
                                <a href="{{linkToMar}}" target='_blank'>{{'INSIDER_FORM.I_APPROVE_THE_INSIDER_RULES_WITH_LINK_2'|translate}}</a>
                                <span ng-bind-html="'INSIDER_FORM.I_APPROVE_THE_INSIDER_RULES_WITH_LINK_3'|translate|safehtml"></span>
                                      <a href="{{privacyPolicy}}" target='_blank'>{{"SETTINGS.PRIVACY_POLICY.TITLE"|translate}}</a>
                                <span ng-bind-html="'INSIDER_FORM.I_APPROVE_THE_INSIDER_RULES_WITH_LINK_4'|translate|safehtml"></span>
                            </div>
                            <div class="col-sm-12 margin-top-10"></div>
                        </div>
                        <div ng-if="action=='editInsider'" class="row">
                            <div class="col-sm-8 col-sm-offset-2 text-center">
                                <span>{{'INSIDER_FORM.REMIND_INSIDER_RULES'|translate}}</span>
                            </div>
                            <div class="col-sm-12 margin-top-10"></div>
                        </div>
                        
                        <div class="row" ng-if="submitted">
                            <div class="col-sm-12"
                                 ng-show="(form.firstname.$dirty||form.firstname.$touched) && form.firstname.$error.required">
                                <small class="invalid-field">
                                    {{"NAME"|translate}} {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                            <div class="col-sm-12"
                                 ng-show="(form.lastname.$dirty||form.lastname.$touched) &&form.lastname.$error.required">
                                <small class="invalid-field">
                                    {{"PLACEHOLDERS.INSIDER.LAST_NAME" | translate}}
                                    {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                            <div class="col-sm-12" ng-show="((form.birthYear.$dirty || form.birthYear.$touched) && form.birthYear.$error.required) ||
                                                                                    ((form.birthMonth.$dirty || form.birthMonth.$touched) && form.birthMonth.$error.required) ||
                                                                                    ((form.birthDay.$dirty || form.birthDay.$touched) && form.birthDay.$error.required)">
                                <small class="invalid-field">
                                    {{"INSIDER.BIRTHDAY"|translate}} {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                            <div class="col-sm-12" ng-show="form.birthYear.$error.minlength">
                                <small class="invalid-field">
                                    {{"INSIDER.BIRTHDAY_YEAR" |translate}}
                                </small>
                            </div>
                            <div class="col-sm-12" ng-show="form.birthMonth.$error.minlength">
                                <small class="invalid-field">
                                    {{"INSIDER.BIRTHDAY_MONTH" |translate}}
                                </small>
                            </div>
                            <div class="col-sm-12" ng-show="form.birthDay.$error.minlength">
                                <small class="invalid-field">

{{"INSIDER.BIRTHDAY_DAY" |translate}}
                                </small>
                            </div>
                            <div class="col-sm-12"
                                 ng-show="(form.ssn.$invalid && !insider.ssnChecked)">
                                <small class="invalid-field">
                                    {{"INSIDER.SSN"|translate}} {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                            <div class="col-sm-12"
                                 ng-show="(form.address.$dirty||form.address.$touched) &&form.address.$error.required">
                                <small class="invalid-field">
                                    {{"INSIDER.HOME_ADDRESS"|translate}} {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                            <div class="col-sm-12"
                                 ng-show="(form.postalCode.$dirty||form.postalCode.$touched) &&form.postalCode.$error.required">
                                <small class="invalid-field">
                                    {{"POSTAL_CODE" | translate}} {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                            <div class="col-sm-12"
                                 ng-show="(form.city.$dirty||form.city.$touched) &&form.city.$error.required">
                                <small class="invalid-field">
                                    {{"CITY" | translate}} {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                            <div class="col-sm-12"
                                 ng-show="(form.country.$dirty||form.country.$touched) &&form.country.$error.required">
                                <small class="invalid-field">
                                    {{"COUNTRY" | translate}} {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                            <div class="col-sm-12"
                                 ng-show="(form.jobDescription.$dirty||form.jobDescription.$touched) &&form.jobDescription.$error.required">
                                <small class="invalid-field">
                                    {{"INSIDER.JOB_DESCRIPTION" | translate}}
                                    {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                            <div class="col-sm-12"
                                 ng-show="(form.companyName.$dirty||form.companyName.$touched) &&form.companyName.$error.required">
                                <small class="invalid-field">
                                    {{"COMPANY.NAME"|translate}} {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                            <div class="col-sm-12"
                                 ng-show="(form.companyAddress.$dirty||form.companyAddress.$touched) &&form.companyAddress.$error.required">
                                <small class="invalid-field">
                                    {{"COMPANY.ADDRESS"|translate}} {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                            <div class="col-sm-12"
                                 ng-show="(form.companyPostalCode.$dirty||form.companyPostalCode.$touched) &&form.companyPostalCode.$error.required">
                                <small class="invalid-field">
                                    {{"POSTAL_CODE" | translate}} {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                            <div class="col-sm-12"
                                 ng-show="(form.companyCity.$dirty||form.companyCity.$touched) &&form.companyCity.$error.required">
                                <small class="invalid-field">
                                    {{"CITY" | translate}} {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                            <div class="col-sm-12"
                                 ng-show="(form.companyCountry.$dirty||form.companyCountry.$touched) &&form.companyCountry.$error.required">
                                <small class="invalid-field">
                                    {{"COUNTRY" | translate}} {{"CREATE_INSIDER_FORM.REQUIRED"|translate}}
                                </small>
                            </div>
                        </div>
                        <div class="row text-center">
                            <button type="submit" ng-click="create()" class="btn btn-success">
                            <label ng-if="action != 'editInsider'"> {{"APPROVE"|translate}} </label>
                            <label ng-if="action == 'editInsider'"> {{"SAVE"|translate}} </label>
                            </button>

</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 text-center" ng-if="action!='editInsider'">
                <p>{{"INSIDER_FORM.SUPPORT_FOOTER"|translate}} <a href="mailto:support@insiderlog.com" >support@insiderlog.com</a></p>
            </div>
        </div>
    </div>
</div>
</form>