<div class="app-header bg-header-1">
    <div class="layout-fixed full-h text-center">
        <div class="full-h v-bottom-i pdB15">
            <div class="app-content-header bg-header-1">
                <div class="text-title-header-1 nowrap mgT10">New Jobsite</div>
            </div>
        </div>
    </div>
    <button class="popup-close-button bg-transparent pd0-i biger-3-time" type="button" ng-click="closeTarget('#addJobsiteModal')"></button>
</div>
<form class="app-content" ng-submit="validateForm_Jobsite(formAddJobsite, 'Add')" id="formAddJobsite" name="formAddJobsite" novalidate="">
    <div class="app-content-inner content-pd">
        <button type="submit" id="submitFormAddJobsite" style="display:none;">submit</button>
        <ion-scroll class="scroll-area" direction="y" has-bouncing="false" overflow-scroll="false" delegate-handle="scrollJobsiteAdd" on-scroll="scrollContent('scrollJobsiteAdd')">
            <div class="box-setting-4 form-field-container">
                <div class="content content-in">
                    <div class="itm">
                        <div class="layout-fixed" >
                            <div>
                                <div class="input-form-field-1 mgT20" ng-class="{ 'has-errors' : formAddJobsite.jobsiteAddLabel.$invalid }" ng-click="focusHandle($event)">
                                    <input type="text" class="h32px pdR35-i" id="jobsiteAddLabel" name="jobsiteAddLabel" ng-model="dataAddJobsite.label" placeholder="Label" required value="">
                                </div>
                                <div class="input-form-field-1 mgT20" ng-class="{ 'has-errors' : dataAddJobsite.street.length == 0 }" ng-click="focusHandle($event)">
                                    <tags-input ng-model="dataAddJobsite.street"
                                    add-on-paste="true"
                                    display-property="description"
                                    key-property="place_id"
                                    on-tag-adding="selectAddressJobsite($tag,'add')"
                                    enable-editing-last-tag="true"
                                    max-tags="1"
                                    min-tags="1"
                                    on-tag-removed="removetagJobsite($tag,'add')">
                                    <auto-complete load-on-empty="true" source="loadAddress($query)"></auto-complete>
                                </tags-input>
                                <input type="hidden" ng-model="dataAddJobsite.streetValue">
                            </div>
                            <div class="input-form-field-1 mgT20" ng-click="focusHandle($event)">
                                <input class="h32px" type="text" name="" placeholder="Apt #/ Unit #" ng-model="dataAddJobsite.apt_unit">
                            </div>
                            <div class="layout-fixed input-1-detail mgT20">
                                <div class="layout-w-1:2">
                                    <div class="input-form-field-1" ng-class="{ 'has-errors' : formAddJobsite.jobsiteAddCity.$invalid }" ng-click="focusHandle($event)">
                                        <input class="h32px locality" id="jobsiteAddCity" name="jobsiteAddCity" ng-model="dataAddJobsite.city" placeholder="City" required type="text" />
                                    </div>
                                </div>
                                <div>
                                    <div class="input-form-field-1" ng-class="{ 'has-errors' : formAddJobsite.jobsiteAddState.$invalid }" ng-click="focusHandle($event)">
                                        <input class="h32px administrative_area_level_1" id="jobsiteAddState" name="jobsiteAddState" ng-model="dataAddJobsite.state" placeholder="State" required type="text" />
                                    </div>
                                </div>
                                <div>
                                    <div class="input-form-field-1" ng-click="focusHandle($event)">
                                        <input class="h32px postal_code" numbers-only="numbers-only" id="jobsiteAddZipcode" name="jobsiteAddZipcode" ng-model="dataAddJobsite.zipcode" placeholder="Zip code" type="text" />
                                    </div>
                                </div>
                            </div>
                            <div class="input-form-field-1 mgT20" ng-class="{ 'has-errors' : formAddJobsite.jobsiteAddContactPerson.$invalid }" ng-click="focusHandle($event)">
                                <input class="h32px" id="jobsiteAddContactPerson" name="jobsiteAddContactPerson" ng-model="dataAddJobsite.contactperson" placeholder="Contact person" required type="text" />
                            </div>
                            <div class="input-form-field-1 mgT20" ng-class="{ 'has-errors' : formAddJobsite.jobsiteAddContactPhone.$invalid }" ng-click="focusHandle($event)">
                                <input class="h32px" id="jobsiteAddContactPhone" name="jobsiteAddContactPhone" ng-model="dataAddJobsite.contactphone" pattern=".{10,20}" phone-input="" placeholder="Contact number" required type="text">
                            </div>
                            <div class="input-form-field-1 mgT20" ng-click="focusHandle($event)">
                                <input class="h32px" id="jobsiteAddPhoneDetail" name="jobsiteAddPhoneDetail" ng-model="dataAddJobsite.detail" placeholder="Phone detail" type="text">
                            </div>
                            <div class="input-form-field-1 mgT20" ng-class="{ 'has-errors' : formAddJobsite.jobsiteAddContactMail.$invalid }" ng-click="focusHandle($event)">
                                <input class="h32px" name="jobsiteAddContactMail" ng-model="dataAddJobsite.contactmail" placeholder="Contact Email" type="email">
                            </div>
                            <div class="input-form-field-1 mgT20" ng-class="{ 'has-errors' : formAddJobsite.jobsiteAddContactName2.$invalid }" ng-click="focusHandle($event)">
                                <input class="h32px" id="jobsiteAddContactName2" name="jobsiteAddContactName2" ng-model="dataAddJobsite.contact_2_name" placeholder="Contact 2 Name" required type="text" />
                            </div>
                            <div class="input-form-field-1 mgT20" ng-class="{ 'has-errors' : formAddJobsite.jobsiteAddContactPhone2.$invalid }" ng-click="focusHandle($event)">
                                <input class="h32px" id="jobsiteAddContactPhone2" name="jobsiteAddContactPhone2" ng-model="dataAddJobsite.contact_2_phone" pattern=".{10,20}" phone-input="" placeholder="Contact 2 Phone" type="text">
                            </div>
                            <div class="input-form-field-1 mgT20" ng-class="{ 'has-errors' : formAddJobsite.jobsiteAddContactMail2.$invalid }" ng-click="focusHandle($event)">
                                <input class="h32px" name="jobsiteAddContactMail2" ng-model="dataAddJobsite.contact_2_email" placeholder="Contact 2 Email" type="email">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ion-scroll>
</div>
</form>
<div class="app-control">
    <div class="layout-fixed full-h pdT2">
        <div class="full-h">
            <button class="button-form-field-1 darkgray position-left full" type="button" ng-click="closeTarget('#addJobsiteModal');">
                Cancel
            </button>
        </div>
        <div class="full-h">
            <button class="button-form-field-1 position-right full" onclick="getElementById('submitFormAddJobsite').click()" type="button">
                <svg class="icon h14px" viewBox="0 0 28.91 28.91"> <path style="fill:#030104;" d="M4.594,11.533c0,0-3.091,12.141-4.2,16.889l5.937-8.125c-0.539-1.199-0.214-3.018,0.729-4.049   c1.266-1.383,3.52-1.383,4.904-0.117s1.479,3.414,0.213,4.797c-0.959,1.053-2.733,1.477-3.989,1.008L0.771,28.91l15.646-6.059   l6.287-9.42l-8.229-7.705L4.594,11.533z" /> <polygon style="fill:#030104;" points="20.669,0 16.153,4.193 24.241,11.988 28.515,7.555  " /> </svg>
                Create
            </button>
        </div>
    </div>
</div>
