
    <div class="checkpoint-page" ng-controller="sitesNewCtrl as vm">
        <div ba-panel
             ba-panel-title="{{ 'newsites' | translate }}">
            <div class="pull-right back">
                <a ui-sref="main.checkpoints.list" class="newlink"> {{'checkpointnewpage.back' | translate}} <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
            </div>
            <form name="form" ng-submit="vm.create()" role="form">
                <div class="checkpoint-inner">
                    <div class="col-xlg-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left checkpoint-panel">
                        <div class="checkpoint-body">
                            <div class="panel-content">
                                <div class="header">{{'sitenewpage.information' |translate }}</div>
                                <div class="row">
                                    <div class="col-xlg-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group" ng-class="{ 'has-error': form.name.$dirty && form.name.$error.required }">
                                            <label for="name" translate>sitenewpage.name</label>
                                            <input type="text" name="name" id="name" class="form-control" ng-model="vm.name" placeholder="Add a site name" required />
                                            <span ng-show="form.name.$dirty && form.name.$error.required" class="help-block" translate>sitenewpage.namereg</span>
                                        </div>
                                    </div>
                                    <div class="col-xlg-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group" ng-class="{ 'has-error': form.phone.$dirty && form.phone.$error.required }">
                                            <label for="phone" translate>sitenewpage.phone</label>
                                            <input type="text" name="phone" id="phone" class="form-control" ng-model="vm.phone" placeholder="example (123) 555-6789 "  required />
                                            <span ng-show="form.phone.$dirty && form.phone.$error.required" class="help-block" translate>sitenewpage.phone</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xlg-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">

                                        <div class="form-group" ng-class="{ 'has-error': form.contact.$dirty && form.contact.$error.required }">
                                            <label for="contact" translate>sitenewpage.contact</label>
                                            <input type="text" name="contact" id="contact" class="form-control" ng-model="vm.contact" placeholder="Add a site contact" required />
                                            <span ng-show="form.contact.$dirty && form.contact.$error.required" class="help-block" translate>sitenewpage.contact</span>
                                        </div>
                                    </div>
                                    <div class="col-xlg-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <label class="control-label" translate>sitenewpage.client</label>

                                            <select name="category-group" id="categoryGroup" ng-model="vm.selectedClientId" class="form-control selectpicker"  ng-change="onCategoryChange(itemSelected)"  ng-options="client.id as client.name for client in vm.clients" selectpicker></select>

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

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

                    <!-- Task List Ends Here -->
                    <div  class="col-xlg-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-right checkpoint-panel">
                        <div class="checkpoint-body">
                            <div class="panel-content">
                                <div class="header">Checkpoint Geolocation</div>

                                <div class="row">
                                    <div class="col-xlg-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <label for="inputWebsite" translate>checkpointnewpage.checkpointaddress </label>
                                            <input id="mapDetails" class="form-control" places-auto-complete size=80
                                                    ng-model="vm.address"
                                                    on-place-changed="vm.placeChanged()" />
                                            <div ng-show="vm.place"> Address = {{vm.place.formatted_address}} <br/>
                                                Location: {{vm.place.geometry.location}}<br/>

                                                zipcode: {{vm.zipcode}}<br/>
                                                country: {{vm.country}}<br/>
                                                state: {{vm.state}}<br/>
                                                city: {{vm.city}}<br/>
                                            </div>


                                        </div>
                                    </div>
                                    <div class="col-xlg-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <label for="checkpointgeo" translate>checkpointnewpage.checkpointgeo</label>
                                            <md-slider-container class="slider-left" ng-disabled="vm.isDisabled">
                                                <md-slider ng-model="vm.radius" ng-change="vm.onRadiusChange()"  aria-label="Disabled 1" flex md-discrete min="5" max="500"></md-slider>
                                            </md-slider-container>
                                            <md-checkbox class="slider-right" ng-model="vm.isDisabled">{{'checkpointnewpage.disabled' | translate}}</md-checkbox>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <leaflet lf-center="siteCenter" paths="paths"  layers="layers"  tiles="tiles" markers="markers" height="370px" width="100%"></leaflet>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-xlg-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left checkpoint-panel">
                        <div class="checkpoint-body">
                            <div class="panel-content">
                                <div class="header">Site Extra Notes Task</div>

                                <!-- Task List Starts Here -->
                                <div class="row">
                                    <div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <label for="extra" translate>profilepage.extra</label>
                                            <textarea placeholder="Extra Notes" class="form-control" id="extra" ng-model="vm.extra"></textarea>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row col-sm-12">
                        <form-builder form="vm.form"></form-builder>


                    </div>
                    <div class="row col-sm-12">
                        <div class="form-actions pull-right">
                            <button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary" translate>checkpointnewpage.checkpointbutton</button>
                            <img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /> </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

