<style>
    .box-content-preview{
        box-shadow: 0 0 3px #d2d2d2;
        border-bottom: 1px solid #cbcbcb;
        padding: 10px;
    }
    .mb-5{
        margin-bottom: 5px !important;
    }
    .relative{
        position: relative;
    }
    .faEditCustomField{
        position: absolute;
        right: 20px;
        top: 10px;
    }
    .inputEditCustomField{
        padding: 6px 20px 6px 12px !important;
    }
    </style> 
    <div ng-show="facebook_ads">

        <div class="row">
            <div class="col-sm-4 ui-sortable">
                <div direction="row" wrap="nowrap" class="UIFlex__StyledFlex-lrnh00-0 kaaFyQ private-flex m-y-6">
                    <div direction="column" wrap="nowrap" class="UIFlex__StyledFlex-lrnh00-0 iwYiVq private-flex">
                      <div style="width: 360px;margin-right: 86px;">
                          <div style="border: 1px solid rgb(203, 214, 226); width: 100%; background-color: rgb(255, 255, 255);">
                            <div class="m-x-2 m-top-2 align-start">
                                <div class="display-inline-block">
                                  <div>
                                      <strong>
                                        <i18n-string data-locale-at-render="en-us" data-key="creation.leadAd.preview.defaults.pageName">Select a page</i18n-string>
                                      </strong>
                                  </div>
                                  <small class="private-microcopy is--text--help">
                                      <i18n-string data-locale-at-render="en-us" data-key="creation.leadAd.preview.promoted">Promoted</i18n-string>
                                  </small>
                                </div>
                            </div>
                            <div class="p-all-2" data-test-id="text-preview" style="white-space: pre-line;margin-bottom: -24px;">
                                <i18n-string data-locale-at-render="en-us" data-key="creation.leadAd.preview.defaults.text"><p style="font-size: 14px;
                                    color: #33475b;
                                    line-height: 24px;margin-left: 8px;">{{ fb.heading }}</p></i18n-string>
                            </div>
                            <div>
                                <div direction="row" wrap="nowrap" class="UIFlex__StyledFlex-lrnh00-0 kaaFyQ private-flex" style="width: 100%; height: 225px; text-align: center; margin: auto; display: flex; align-items: center; background-color: rgb(223, 227, 235);">
                                    <img src="../images/dashboard/ajax-loader.gif" class="loaderImg"
                                    ng-hide="exploderImg" style="cursor:pointer;">
                                <div style="height: 60px; width: 60px; border: 1px solid #2d353c; margin-left:5px; margin: auto; text-align: center;"
                                    id="isFbAdsImg" ng-hide="isFbAdsImg">
                                    <img src="../images/dashboard/1462811934_file_add.png" alt=""
                                    ng-click="openFileWindow('expandedNotify')"
                                        style="margin-left: 10px;margin-top: 12px;cursor:pointer;"
                                        title="Upload Image" />
                                </div>
                                
                                    <span class="private-icon private-icon__high m-all-auto" data-icon-name="insertImage" style="color: rgb(153, 172, 194); font-size: 48px;">
                                        <img src="{{expandedNotificationImageFile}}" alt="" ng-if="expandedNotificationImageFile" id="expandedNotificationImageFile" style="width: 100%;"  ng-click="openFileWindow('expandedNotify')">
                                    </span></div>
                                    <input type="file" accept=".jpg,.jpeg,.png" id="expandedNotify" style="width: 1px; display: none;"
                                                class="notificationImageFile" />
                            </div>
                            <div class="p-y-2 p-left-2 p-right-3" style="background-color: rgb(245, 248, 250); margin-top: 0px;">
                                <div class="row media private-media private-media--align-start">
                                  <div class=" media-body private-media__body">
                                      <div class="col-lg-8">
                                        <strong>
                                          
                                                <p style="font-size: 13px; word-wrap: break-word; white-space: initial;
                                                line-height: 10px;
                                                padding: 12px;
                                                color: #444;
                                                font-weight: 400;">{{fb.websiteurl}}</p>
                                                <p style="font-size: 13px; word-wrap: break-word; white-space: initial;
                                                color: #33475b;
                                                ">{{ fb.message }}</p>
                                        </strong>
                                        <br>
                                       
                                      </div>
                                  </div>
                                  <div class="col-lg-4 private-media__item private-media__item--right">
                                      <button aria-disabled="false" class="uiButton private-button private-button--transparent private-button--default private-button--non-link" data-button-use="transparent" tabindex="0" type="button" style="background: #D8DADF; margin-top: 50px;
                                      color: #444;">
                                        <strong>
                                            Learn More
                                        </strong>
                                      </button>
                                  </div>
                                </div>
                            </div>
                          </div>
                      </div>
                    </div>
                </div>
            </div> 
            <!-- web push Setting section -->
            <div class="col-sm-8 ui-sortable">
                <div class="panel-body" style="margin-left: 40px;">
                                        <!-- <fieldset id="pushTemplate"> -->
                                            <legend>Push Notification Settings</legend>

                                            <div class="form-group">
                                                <label class="col-md-3 control-label">Select Existing Template</label>
                                                 <a ng-click="editTemplate('PUSH')" class="col-md-1 href="">  <i class="fa fa-pencil"></i> </a>
                                                <div class="col-md-8">
                                                    <select class="template-select form-control input-sm">
                                                    </select>
                                                </div>
                                            </div>
                        
                                            <div class="clearfix down-space"></div>
                        
                                            <div
                                                style="width: 98%; height:12px; border-bottom: 1px solid #e2e7eb; text-align: center; margin-bottom: 10px; margin-left: 2%;">
                                                <span style="font-size: 15px; background-color: #F3F5F6; padding: 0 10px;">
                                                    Create New
                                                </span>
                                            </div>
                                            <div class="clearfix down-space"></div>
                                            <div class="form-group">
                                                <label class="col-md-4 control-label">Template Name</label>
                                                <div class="col-md-8">
                                                    <input type="text" id="templateName" class="form-control" placeholder="Template Name"
                                                        maxlength="40" ng-model="cTools.template_name">
                        
                                                </div>
                                            </div>                        
                    <div  class="clearfix down-space"></div>
                    <div class="form-group">
                        <label class="col-md-4 control-label">Ad account ID</label>
                        <div class="col-md-8">
                            <input class="form-control input-sm" type="text" ng-model="fb.ads_account" id="fb_ads_account">
                        </div>
                    </div>

                    <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">Facebook page ID</label>
                            <div class="col-md-8">
                                <input class="form-control input-sm" type="text" name="" ng-model="fb.pageId" id="">
                            </div>
                        </div>
                        <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">Website URL</label>
                            <div class="col-md-8">
                                <input type="text" id="templateName" class="form-control ng-pristine ng-valid ng-valid-maxlength ng-touched" placeholder="Website URL" ng-model="fb.websiteurl">
                                
                            </div>
                        </div>


                        <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">Headline</label>
                            <div class="col-md-8">
                                <input type="text" id="templateName" class="form-control ng-pristine ng-valid ng-valid-maxlength ng-touched" placeholder="" ng-model="fb.heading" >
                                
                            </div>
                        </div>

                        <div  class="clearfix down-space"></div>

                        <div class="form-group">
                            <label class="col-md-4 control-label">Text/Body</label>
                            <div class="col-md-8">
                                <textarea type="text" id="templateName" cols="30" rows="5" maxlength="150" class="form-control ng-pristine ng-valid ng-valid-maxlength ng-touched" placeholder="Write a message that clearly tells people about what you're promoting." ng-model="fb.message" > </textarea>    
                            </div>
                        </div>

                        <div  class="clearfix down-space"></div>

                        <div  class="clearfix down-space"></div>
                        <div  class="clearfix down-space"></div>

                        <div class="form-group">
                            <label class="col-md-3 control-label"></label>
                            <div class="col-md-9" style="text-align: right;">
                                <button type="button" ng-show="btnFbSavePush"  ng-click="saveFbAdsSettingsTools()" class="btn btn-sm btn-success">Submit </button>
                                <button type="button" ng-show="btnFbUpdatePush" ng-click="updateFbAdsTemplateSettingsTools()" class="btn btn-sm btn-success">Update </button>
                                <input type="hidden" ng-model="updateTemplateId" value="{{updateTemplateId}}">
                                <button type="button" id="btnClose" class="btn btn-sm btn-success" ng-click="closeTemplate(clearTemplateId);">Close</button>
                                
                            </div>
                            
                        </div>
                        <div class="form-group">
                            <div class="col-md-4">
                                &nbsp;
                            </div>
                            <div class="col-md-8">
                                <span ng-if="template_name_error" style="color: red">{{template_name_error}}</span>
                            </div>
                        </div>

                </div>
            <!-- Setting ends here -->
            </div>

        </div>
    </div>
    </div>
    <script>
        $("#fb_ads_image").change(function(){
    angular.element(this).scope().uplodExpendedImg(this.files, 'expandedNotify')
})
    </script>
    <style>
  

    .is--text--help {
        color: #516f90!important;
    }
    .private-microcopy, small {
        font-size: 12px;
        line-height: 18px;
    }
    a .is--code, a code, b, strong {
        font-weight: 600;
    }
    .private-media__item--right {
    order: 3;
}
.private-media>*+* {
    margin-left: 12px;
    float: right;
    margin-top: -80px;
    margin-right: 5px;
    margin-bottom: 7px;
}

.private-button--transparent.private-button--default {
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 4px;
}
.private-button--transparent {
    background-color: transparent;
    border-color: transparent;
    font-family: Avenir Next W02,Helvetica,Arial,sans-serif;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all .15s ease-out;
    color: #0091ae;
    text-decoration: none;
    -webkit-user-select: inherit;
    -moz-user-select: inherit;
    -ms-user-select: inherit;
    user-select: inherit;
}
.private-button--default {
    font-size: 14px;
    line-height: 16px;
    padding: 11px 24px;
    font-family: Avenir Next W02,Helvetica,Arial,sans-serif;
    font-weight: 500;
}
    .align-start {
    display: flex;
    align-items: flex-start!important;
}
.align-start {
    display: flex;
    align-items: flex-start!important;
}
.m-top-2 {
    margin-top: 8px!important;
}
.m-x-2 {
    margin-left: 8px!important;
    margin-right: 8px!important;
}
.m-y-6 {
    margin-top: 24px!important;
    margin-bottom: 24px!important;
}
    </style>