	
<div ng-show="inAppNotification">
  <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Select an Upload Method</h5>
		  <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top: -20px;">
			<span aria-hidden="true">&times;</span>
		  </button>
        </div>
        <div class='container' ng-show="urlbasedImgUpload">
            <input class="form-control" placeholder="Enter your Image url here" style="width: 80%;margin:7px 0px ;" type="text" id="inputImgUrl_2" ng-model="inputImgUrl">
            <button class='btn btn-sm btn-primary' style="margin:7px 0px ;" ng-click="saveUserUrl(inputImgUrl)"> Upload Image </button>
        </div>
        <div class="modal-footer">
          <button type="button" ng-click='openUrlInput(ImageType)' class="btn btn-secondary">Upload from Web</button>
          <button type="button" ng-click="openFileWindow(ImageType)" class="btn btn-secondary">Upload from Device</button>
        </div>
      </div>
    </div>
  </div>
  
	<div class="row">
	
	<!-- Iphone Device -->
		<div class="col-sm-4 ui-sortable" id="inAppIphonePreview" style="display:none;">
			<div id="showPreview">
				<div class="iphonePreview openExpandedView" style="top: 20px; display: block;" id="">
					<div id="inAppNotificationView" class="iPhoneDataview">

							<div class="dataView1" ng-show="inAppFull">
								<div class="pushBasic" style="width: 100%; text-align: center; margin: 1px;">
									<div style="height: 328px; text-align: center; border: 1px solid #555;">
										<div class="in-app-device-img">
											<img src="../images/dashboard/ajax-loader.gif" ng-hide="loderImg">

											<img src="../images/dashboard/1462811934_file_add.png"  ng-show="fullScreenImgIcon" alt="" ng-click="openAskWindow('inAppImageFile1',2)" style="cursor:pointer;" />

											<img ng-src="{{inAppFullImageFile}}" ng-hide="isBasicStaticImgFull" alt="" ng-click="openAskWindow('inAppImageFile1',2)" height="{{inAppImgHeightFull}}" width="{{inAppImgWidthFull}}" style="position: absolute;left: -84px; top: -65px; margin-left: 0px; height: 500px; width: 243px; cursor:pointer;" loading="lazy" />

										</div>
									</div>
									<div class="clearfix"></div>
								</div>

								<div style="position:absolute;bottom:50px;left:-11px;">
									<div class="clearfix"></div>
									<div class="form-group">
										<div class="col-md-12">

											<input type="text" class="form-control push_message iosPush_message" name="inAppHeader" ng-model="inApp.inAppHeader" placeholder="In App Header" id="inAppHeader" ng-trim="false" maxlength="35" ng-trim="false" ng-keyup="remainCharacter('inAppHeader', 35)" ng-blur="remainCharacterHide()">

											<i class="fa fa-pencil inputEditIcon" aria-hidden="true" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppHeader')"></i>
										</div>
									
										<div class="col-md-12">
											<textarea ng-model="inApp.inAppDescription" id="inAppDescription" placeholder="In App Description" class="form-control push_message_desc iosTextarea" ng-trim="false" maxlength="80" style="padding-left: 26px;" ng-keyup="remainCharacter('inAppDescription', 80)" ng-blur="remainCharacterHide()"></textarea>
											
											<i class="fa fa-pencil inputTextareaIcon" aria-hidden="true" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppDescription')"></i>
											
										</div>
									</div>							
									<div class="clearFloat"></div>    
									<div class="form-group">
										<div class="col-md-12" style="margin-top: 10px; text-align: center;">
											<span class="spanButton">{{inApp.inAppActionTitle}}</span>
										</div>
									</div>
								</div>
							</div>

							<div ng-show="inAppMini" class="dataView2">
								<div style="position: absolute;top: 100px; width: 226px;">
									<div class="form-group">
										<div class="col-md-12">	
										<div style="float: left; width: 40px;margin-left: -15px;">
											<img src="../images/dashboard/ajax-loader.gif" ng-hide="loderImg">
												
												<img src="../images/dashboard/1462811934_file_add.png" ng-show="miniScreenImgIcon" alt="" ng-click="openAskWindow('inAppImageFile2',2)" style="cursor:pointer; border: 1px solid #555; padding: 8px;" />

												<img ng-src="{{iconInAppImageFile}}" ng-hide="inAppBasicS3Img" alt="" ng-click="openAskWindow('inAppImageFile2',2)" height="{{inAppImgHeight}}" width="{{inAppImgWidth}}" style="cursor:pointer;" loading="lazy" />

										</div>
										<div style="width: 171px;float: right;">								
										<textarea id="inAppMiniDesc" ng-model="inApp.inAppMiniDesc" placeholder="Description max 80 chars" class="form-control push_message_desc iosTextarea" style="margin-left:-1px !important; width:196px;" ng-trim="false" maxlength="80" style="display:none;" >
											
										</textarea>    
	    
										<i class="fa fa-pencil inputTextareaIcon" style="left:106%!important"
										     aria-hidden="true" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppMiniDesc')">
										</i>
										</div>
										</div>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>

							<div ng-show="header" class="dataView2">
								<div style="position: absolute;top: 5px; width: 226px;">
									<div class="form-group">
										<div class="col-md-12">	
										<div style="float: left; width: 40px;margin-left: -15px;">
											<img src="../images/dashboard/ajax-loader.gif" ng-hide="loderImg">
												
												<img src="../images/dashboard/1462811934_file_add.png" ng-show="headerScreenImgIcon" alt="" ng-click="openAskWindow('inAppImageFile2',2)" style="cursor:pointer; border: 1px solid #555; padding: 8px;" />

												<img ng-src="{{iconInAppImageFileHeader}}" ng-hide="inAppBasicS3ImgHeader" alt="" ng-click="openAskWindow('inAppImageFile2',2)" height="{{inAppImgHeight}}" width="{{inAppImgWidth}}" style="cursor:pointer;" loading="lazy" />

										</div>
										<div style="width: 171px;float: right;">								
										<textarea id="inAppMiniDesc" ng-model="inApp.inAppHeaderDesc" placeholder="Description max 80 chars" class="form-control push_message_desc iosTextarea" style="margin-left:-1px !important; width:196px;" ng-trim="false" maxlength="80" style="display:none;">
											
										</textarea>    
	    
										<i class="fa fa-pencil inputTextareaIcon" style="left:106%!important"
										     aria-hidden="true" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppMiniDesc')">
										</i>
										</div>
										</div>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>

							<div ng-show="footer" class="dataView2">
								<div style="position: absolute;bottom: 17px; width: 226px;">
									<div class="form-group">
										<div class="col-md-12">	
										<div style="float: left; width: 40px;margin-left: -15px;">
											<img src="../images/dashboard/ajax-loader.gif" ng-hide="loderImg">
												
												<img src="../images/dashboard/1462811934_file_add.png" ng-show="footerScreenImgIcon" alt="" ng-click="openAskWindow('inAppImageFile2',2)" style="cursor:pointer; border: 1px solid #555; padding: 8px;" />

												<img ng-src="{{iconInAppImageFileFooter}}" ng-hide="inAppBasicS3ImgFooter" alt="" ng-click="openAskWindow('inAppImageFile2',2)" height="{{inAppImgHeight}}" width="{{inAppImgWidth}}" style="cursor:pointer;" loading="lazy" />

										</div>
										<div style="width: 171px;float: right;">								
										<textarea id="inAppMiniDesc" ng-model="inApp.inAppFooterDesc" placeholder="Description max 80 chars" class="form-control push_message_desc iosTextarea" style="margin-left:-1px !important; width:196px;" ng-trim="false" maxlength="80" style="display:none;">
											
										</textarea>    
	    
										<i class="fa fa-pencil inputTextareaIcon" style="left:106%!important"
										     aria-hidden="true" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppMiniDesc')">
										</i>
										</div>
										</div>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>

							</div>
						</div>
					</div>                        
				</div>
			<!-- </div>
		</div> -->

	<!-- Iphone device ends here -->
	

	<!-- Device Android -->
	
		<div class="col-sm-4 ui-sortable" id="inAppAndroidPreview">
			<div id="showPreview"> 
				<div class="phonePreview openExpandedView" style="top: 20px; display: block;" id="previewDiv">
					<div id="pushNotificationView" class="dataView">

						<div class="dataView1" ng-show="inAppFull">
							<div class="pushBasic" style="width: 86%; margin-left: 7%; margin-top: 13px; margin-bottom: 13px; margin-right: 7%; text-align: center; height: 358px; border: 1px solid #555;">
								<div style="height: 360px; text-align: center; position: relative;">
									<img src="{{inAppFullImageFile}}" ng-hide="isBasicStaticImgFull" alt="" ng-click="openAskWindow('inAppImageFilefullScreen',2)" style="position: absolute; left: 0px; margin-left: 0px; width: 100%; height: 358px; cursor: pointer;" />
									<div class="in-app-device-img" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
										<img src="../images/dashboard/ajax-loader.gif" ng-hide="loderImg">
										<img src="../images/dashboard/1462811934_file_add.png"  ng-show="fullScreenImgIcon" alt="" ng-click="openAskWindow('inAppImagefullScreen',2)" style="cursor:pointer; margin-top: 70px;" />
										<input type="file" accept=".jpg,.jpeg,.png,.gif" id="inAppImagefullScreen" style="width: 100%; height: 100%;" class="notificationImageFile" multiple/>
									</div>
								</div>
							</div>
							<style>
                            .in-app-device-img {
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
							}
							</style>

							<div style="position:absolute;bottom:0px;width: 100%;">
								<div class="clearfix"></div>
								<div class="form-group" ng-hide="isBasic">
									<div class="col-md-12" style="position: relative;top: 25px;">

										<!-- <input type="text" class="form-control push_message iosPush_message" name="inAppHeader" ng-model="inApp.inAppHeader" placeholder="In App Header" id="inAppHeader" style="width:238px!important; position: relative;top: 30px;left: 3px;" ng-trim="false" maxlength="35" ng-keyup="remainCharacter('inAppHeader', 35, 'full')" ng-blur="remainCharacterHide()"> -->

										<!-- <i class="fa fa-pencil inputEditIcon" aria-hidden="true" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppHeader')" style="top: -5px;!important"></i> -->

										<!-- <textarea ng-model="inApp.inAppDescription" id="inAppDescription" placeholder="In App Description" class="form-control push_message_desc iosTextarea" style="width:236px!important;   padding-left: 26px;" ng-trim="false" maxlength="80" ng-keyup="remainCharacter('inAppDescription', 80, 'full')" ng-blur="remainCharacterHide()">
										</textarea> -->
										<!-- <span>You have {{ 350 - cTools.notificationDescription.length}} characters left  </span> -->
										<!-- <i class="fa fa-pencil inputTextareaIcon" aria-hidden="true" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppDescription')"></i> -->

									</div>
												
								</div>	
								<div class="form-group" ng-show="hideCta" >
									<div class="col-md-12" style="text-align: center;" ng-show="setAction">
										<button class="rectangle-btn" ng-style="{'background-color': inApp.backgroundColor, 'color': inApp.submitBtnTextClr}">{{inApp.inAppActionTitle}}</button>
									</div>
								</div>
							</div>
						</div>

						<div ng-show="inAppMini" class="dataView2">
							<div style="position: absolute;top:80px;width: 226px;border: 1px solid #555;margin-left: 12px;height: 175px;">
								<div class="form-group">
									<div class="col-md-12">	
									<div style="float: left;width: 100%;margin-left: -15px;">
										
										<img src="../images/dashboard/ajax-loader.gif" ng-hide="loderImg">
											
											<img src="../images/dashboard/1462811934_file_add.png" ng-show="miniScreenImgIcon" alt="" ng-click="openAskWindow('inAppImageMini',2)" style="cursor:pointer;padding: 8px;margin-left: 45%; "/>

											<img ng-src="{{iconInAppImageFile}}" ng-hide="inAppBasicS3Img" alt="" ng-click="openAskWindow('inAppImageMini',2)"  style="cursor: pointer;
											width: 225px;
											height: 175px;
											"/>

											<input id="inAppImageMini" type="file" accept=".jpg,.jpeg,.png" style="opacity: 0; width: 40px; cursor: pointer" class="notificationImageFile" />
									</div>
									<div style="width: 171px;float: right; margin-top:20px">	

									<textarea id="inAppMiniDesc" ng-model="inApp.inAppMiniDesc" ng-hide="true"  placeholder="In App Description" class="form-control push_message_desc iosTextarea" style="margin-left:-1px !important; width:200px;" ng-trim="false" maxlength="80" ng-keyup="remainCharacter('inAppMiniDesc', 80, 'mini')" 
									ng-blur="remainCharacterHide()" style="display:none;">
									</textarea>    
    
									<i class="fa fa-pencil inputTextareaIcon" aria-hidden="true" style="left:107%!important" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppMiniDesc')">
									</i>
									</div>
									<div class="form-group" ng-show="hideCta">
										<div class="col-md-12" style="text-align:center;" ng-show="setAction">
											<button class="rectangle-btn" ng-style="{'background-color': inApp.backgroundColor, 'color': inApp.submitBtnTextClr}">{{inApp.inAppActionTitle}}</button>

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

						<div ng-show="header" class="dataView2">
							<div style="position: absolute;top: -14px; height:170px;  width: 240px;" ng-style="{'background-color': inApp.backgroundColor}">
								<div class="form-group" id="legacyHeader">
									<div class="col-md-12">	
									<div style="float: left; margin-top: 20px; width: 40px;margin-left: -15px;">
										<img src="../images/dashboard/ajax-loader.gif" ng-hide="loderImg">
											
											<img src="../images/dashboard/1462811934_file_add.png" ng-show="headerScreenImgIcon" alt="" ng-click="openAskWindow('inAppImageHeader',2)" style="cursor:pointer; border: 1px solid #555; padding: 8px;"/>

											<img ng-src="{{iconInAppImageFileHeader}}" ng-hide="inAppBasicS3ImgHeader" alt="" ng-click="openAskWindow('inAppImageHeader',2)" height="{{inAppImgHeight}}" width="{{inAppImgWidth}}" style="cursor:pointer;" loading="lazy"/>

											<input id="inAppImageHeader" type="file" accept=".jpg,.jpeg,.png" style="opacity: 0; width: 40px; cursor: pointer" class="notificationImageFile" />
									</div>
									<div style="width: 171px;float: right; margin-top:20px">

									<textarea id="inAppHeaderDesc" ng-model="inApp.inAppHeaderDesc"  placeholder="In App Description" class="form-control push_message_desc iosTextarea" style="margin-left:-1px !important; width:200px;" ng-trim="false" maxlength="80" ng-keyup="remainCharacter('inAppHeaderDesc', 80, 'header')"
									ng-blur="remainCharacterHide()" ng-style="{'color': inApp.descriptionTextClr}">
									</textarea>    
    
									<i class="fa fa-pencil inputTextareaIcon" aria-hidden="true" style="left:107%!important" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppMiniDesc')">
									</i>
									</div>
									</div>
								</div>
								
								<div class="form-group" id="expandedHeader" hidden>
									<div class="col-md-12">
										<!-- exp image background div -->
										<div style="float: left; margin-top: 20px; width: 240px; margin-left: -15px;">
											<img src="../images/dashboard/ajax-loader.gif" ng-hide="loderImg">
											<img src="../images/dashboard/1462811934_file_add.png" ng-show="headerScreenImgIcon" alt="" ng-click="openAskWindow('inAppExpImageHeader',2)" style="cursor:pointer; border: 1px solid #555; padding: 8px; margin: 10% 0 3% 40%;" />
											<img ng-src="{{iconInAppImageFileHeader}}" ng-hide="inAppBasicS3ImgHeader" alt="" ng-click="openAskWindow('inAppExpImageHeader',2)" style="cursor:pointer; width: 240px; height: 100px;" loading="lazy" />
											<input id="inAppExpImageHeader" type="file" accept=".jpg,.jpeg,.png" style="opacity: 0; width: 40px; cursor: pointer" class="notificationImageFile" />
										</div>
								
										<!-- Textarea element -->
										<textarea id="inAppHeaderDesc" ng-model="inApp.inAppHeaderDesc" placeholder="In App Description" class="form-control push_message_desc iosTextarea" style="margin-top: 2%; width: 200px; margin-left: -1px !important;" ng-trim="false" maxlength="80" ng-keyup="remainCharacter('inAppHeaderDesc', 80, 'footer')" ng-blur="remainCharacterHide()" ng-style="{'color': inApp.descriptionTextClr}">
										</textarea>
								
										<!-- Icon element -->
										<div style="width: 171px; float: right; margin-top: 20px;">
											<i class="fa fa-pencil inputTextareaIcon" aria-hidden="true" style="left: 107% !important;" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppMiniDesc')"></i>
										</div>
									</div>
								</div>
								
								
							</div> 
						</div>

						<div ng-show="footer" class="dataView2">
							<div style="position: absolute; bottom: -24px; height: 170px; width: 240px;" ng-style="{'background-color': inApp.backgroundColor}">
								<div class="form-group" id="legacyFooter" style="margin-top: 100px;">
									<div class="col-md-12">
										<div style="float: left; margin-top: 20px; width: 40px; margin-left: -15px;">
											<img src="../images/dashboard/ajax-loader.gif" ng-hide="loderImg">
											<img src="../images/dashboard/1462811934_file_add.png" ng-show="footerScreenImgIcon" alt="" ng-click="openAskWindow('inAppImageFilefooter',2)" style="cursor:pointer; border: 1px solid #555; padding: 8px;"/>
											<img ng-src="{{iconInAppImageFileFooter}}" ng-hide="inAppBasicS3ImgFooter" alt="" ng-click="openAskWindow('inAppImageFilefooter',2)" height="{{inAppImgHeight}}" width="{{inAppImgWidth}}" style="cursor:pointer;" loading="lazy"/>
											<input id="inAppImageFilefooter" type="file" accept=".jpg,.jpeg,.png" style="opacity: 0; width: 40px; cursor: pointer" class="notificationImageFile" />
										</div>
										<div style="width: 171px; float: right; margin-top: 20px">

											<textarea id="inAppFooterDesc" ng-model="inApp.inAppFooterDesc" placeholder="In App Description" class="form-control push_message_desc iosTextarea" style="width: 200px; margin-left: -1px !important; position: relative; margin-bottom: 3%;" ng-trim="false" maxlength="80" ng-keyup="remainCharacter('inAppFooterDesc', 80, 'footer')" ng-blur="remainCharacterHide()" ng-style="{'color': inApp.descriptionTextClr}">        
											</textarea>
											<i class="fa fa-pencil inputTextareaIcon" aria-hidden="true" style="left: 107% !important" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppMiniDesc')"></i>
										</div>
									</div>
								</div>
						
								<!-- Expanded Footer Section -->
								<div class="form-group" id="expandedFooter" hidden>
									<div class="col-md-12" style="position: relative;">
										<!-- Textarea element -->
										<textarea id="inAppFooterDesc" ng-model="inApp.inAppFooterDesc" placeholder="In App Description" class="form-control push_message_desc iosTextarea" style="width: 200px; margin-left: -1px !important; position: relative; margin-bottom: 3%;" ng-trim="false" maxlength="80" ng-keyup="remainCharacter('inAppFooterDesc', 80, 'footer')" ng-blur="remainCharacterHide()" ng-style="{'color': inApp.descriptionTextClr}">        
										</textarea>
										
																				<!-- exp image background div -->
										<div style="float: left; width: 240px; margin-left: -15px;">
											<img src="../images/dashboard/ajax-loader.gif" ng-hide="loderImg">
											<img src="../images/dashboard/1462811934_file_add.png" ng-show="headerScreenImgIcon" alt="" ng-click="openAskWindow('inAppExpImageFooter',2)" style="cursor:pointer; border: 1px solid #555; padding: 8px; margin: 10% 0 3% 40%;" />
											<img ng-src="{{iconInAppImageFileHeader}}" ng-hide="inAppBasicS3ImgHeader" alt="" ng-click="openAskWindow('inAppExpImageFooter',2)" style="cursor:pointer; width: 240px; height: 100px;" loading="lazy" />
											<input id="inAppExpImageFooter" type="file" accept=".jpg,.jpeg,.png" style="opacity: 0; width: 40px; cursor: pointer" class="notificationImageFile" />
										</div>
										
										<!-- Icon element -->
										<div style="width: 171px; float: right; margin-top: 20px;">
											<i class="fa fa-pencil inputTextareaIcon" aria-hidden="true" style="left: 107% !important;" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppMiniDesc')"></i>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div ng-if="leftCharacter" ng-style="{'position':'absolute', 'left':'22px','color':'#ffffff', 'bottom': leftCharBottom+'px'}">
							{{leftCharacter}}
						</div>
					</div>
				</div>
			</div>                        
		</div>
			<!-- </div>
		</div> -->
	<!-- device android ends -->

	<!-- PushNotification Setting section -->
		<div class="col-sm-8 ui-sortable">
			<div class="panel-body">
				<div id="divSavedTools">
							<legend>In-App Settings</legend>
							<div class="form-group">

								<div class="col-md-12">
									 <label class="control-label col-md-3">Select Existing Template</label>
									 <a href="javascript:void(0)" ng-click="editTemplate('IN-APP')" class="col-md-1 href="">  <i class="fa fa-pencil"></i> </a>
									<label class="col-md-8">
										<select id="selectPushTemplate" ng-model="selectPushTemplate" ng-change="getAppTemplatesById(selectPushTemplate)" class="form-control input-sm">
										<option value="">Select Template</option>
										<option ng-repeat="pushTemplate in pushTemplates" value="{{pushTemplate._id}}">{{pushTemplate.template_name}}</option>
									</select>
									</label>
								</div>
								<div  class="clearfix down-space"></div>			
								
								<div style="width: 94%; height:12px; border-bottom: 1px solid #e2e7eb; text-align: center; margin-bottom: 10px; margin-left: 5%;">
							      <span style="font-size: 15px; background-color: #F3F5F6; padding: 0 10px;">
							        Create New
							      </span>
							    </div>

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

								<div class="col-md-12">
									 <label class="control-label col-md-4">Template Name</label>
									
									<label class="col-md-8">
										<input type="text" id="templateName" class="form-control" placeholder="Template Name" ng-model="inApp.template_name" ng-trim="false" maxlength="40">
									
									</label>
								</div>

								<div class="col-md-12">
									 <label class="control-label col-md-4">View</label>
									
									<label class="col-md-8">
										<table class="viewmode">
			                            	<tr>
			                            		<td style="cursor:pointer" ng-model="inApp.view_mode" ng-click="changeViewMode('Fullscreen');">
			                            			<img id="imgFullscreen"  ng-src="{{inAppDefaultFullImg}}">
			                            		</td>
			                            		<td style="cursor:pointer" ng-model="inApp.view_mode" ng-click="changeViewMode('Mini');">
			                            			<img id="imgMini" ng-src="{{inAppDefaultMiniImg}}">
			                            		</td>
			                            		<td style="cursor:pointer" ng-model="inApp.view_mode" ng-click="changeViewMode('Header');">
			                            			<img id="imgMini" ng-src="{{inAppDefaultHeaderImg}}">
			                            		</td>
			                            		<td style="cursor:pointer" ng-model="inApp.view_mode" ng-click="changeViewMode('Footer');">
			                            			<img id="imgMini" ng-src="{{inAppDefaultFooterImg}}">
			                            		</td>
			                            	</tr>
			                            	<tr>
			                            		<td>Fullscreen</td>
			                            		<td>Mini</td>
			                            		<td>Header</td>
			                            		<td>Footer</td>
			                            	</tr>
			                            </table>
									</label>
								</div>

							
							<div class="col-md-12" ng-show="actionTapUrl">
								 <label class="control-label col-md-4">Tap Action Url</label>
								
								<label class="col-md-7">
									<input type="text" class="form-control" placeholder="In-App Action Url." ng-model="inApp.inAppActionUrl"  id="inAppActionUrl">
								</label>
								<label class="col-md-1">
									<i class="fa fa-2x fa-edit" style="cursor:pointer;float: right;" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppActionUrl')"></i>
								</label>
							</div>

							<div class="col-md-12"  ng-show="inApp.view_mode == 'Header' || inApp.view_mode == 'Footer'" style="margin: 10px 0 10px 0;" >
                            
								<label  class="control-label col-md-4" >Expanded Image</label>
								<div class="col-md-8" id="expandedImageInapp">
									<input bs-switch state="expandedImageInapp_" type="checkbox" class="BSswitch"
										data-off-text="&nbsp;No" data-on-text="&nbsp;Yes" data-label-text="&nbsp;Yes"
										data-on-color="success" data-off-color="success" id="expandedImageInappSwitch" onSwitchChange="expandedImageInappAction" >
								</div>
							   </div>

							<div  class="clearfix down-space" ng-show="hideCta"></div>
							
							<div class="col-md-12" ng-show="hideCta">
								 <label class="control-label col-md-4">Set Call To Action</label>
								
								<label class="col-md-8">
									<input type="checkbox" name="sCta" ng-model="inApp.sCta" ng-change="setCta()">
								</label>
								
							</div>

							<div  class="clearfix down-space" ng-show="hideCta"></div>
							<!-- ADD Custom data start here -->
							<div class="form-group col-md-12">
								<label class="col-md-4 control-label">Custom Data</label>
								<div class="col-md-2">
									<input bs-switch state="customDataStyle" type="checkbox" class="BSswitch"
										data-off-text="&nbsp;No" data-on-text="&nbsp;Yes" data-label-text="&nbsp;Yes"
										data-on-color="success" data-off-color="success" onSwitchChange="customDataType">
	
								</div>
								<div class="form-group" ng-if="isCustomData">
									<div class="col-md-3" style="text-align:center;">
										<button type="button" href="#customData" data-toggle="modal"
											class="btn btn-sm btn-danger">Add</button>
									</div>
								</div>
							</div>
							<div  class="clearfix down-space" ng-show="setAction"></div>
							<div id="ifActionIsNo" style="padding-left:25px ;" ng-show="setAction">
								<div class="form-group" style="margin-left:-10px !important">
									<label class="col-md-4 control-label">URL Type</label>
								</div>
								<div class="col-md-8" style="padding-left: 10px;">
									<input bs-switch state="cTools.notifyType" type="checkbox" class="BSswitch"
										data-off-text="&nbsp;Deep&nbsp;Link" data-on-text="&nbsp;Landing&nbsp;Page"
										data-label-text="&nbsp;Landing&nbsp;Page" data-on-color="success" data-off-color="success"
										onSwitchChange="notificationType">
										<div class="form-group readOnly" ng-show="cTools.notificationType === 'lp'">
											<div class="clearfix down-space"></div>  
											<label class="col control-label"></label>
											<div class="col">
												<label class="radio-inline">
													<input type="radio" name="optionsDays" value="ALLWEEK"
														ng-model="lcamp.daySelector" id="rdbAllWeek">
														Open in browser
												</label>
												<label class="radio-inline">
													<input type="radio" name="optionsDays" value="SPECIFICDAYS"
														ng-click="rdbSpecificDays()" id="rdbSpecificDays"
														ng-model="lcamp.daySelector">
														Open as webview
												</label>
											</div>
										</div>
								</div>
								<div class="clearfix down-space"></div>
								<div class="clearfix down-space"></div>
								<!-- </fieldset> -->
							</div>
							
							<div class="col-md-12" ng-show="setAction">
								 <label class="control-label col-md-4">Action Title</label>
						
								<label class="col-md-8">
									<input type="text" class="form-control" placeholder="Action title max 10 chars" ng-model="inApp.inAppActionTitle" ng-trim="false" maxlength="15"  id="inAppActionTitle">
								</label>
								
							</div>

							<div  class="clearfix down-space" ng-show="setAction"></div>
							
							<div class="col-md-12" ng-show="setAction">
								 <label class="control-label col-md-4">External URL/Deeplink URL</label>
								
								<label class="col-md-7">
									<input type="text" class="form-control" placeholder="Enter external url or deep link url." ng-model="inApp.inAppActionUrl"  id="inAppActionUrl">
								</label>
								<label class="col-md-1">
									<i class="fa fa-2x fa-edit" style="cursor:pointer;float: right;" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppActionUrl')"></i>
								</label>
								
							</div>

							<div class="clearfix down-space"></div>
							
							<div class="col-md-12">
								 <label class="control-label col-md-4">Header Text Color</label>
								
								<label class="col-md-7">
									<input type="color" class="form-control" placeholder="Header Text Color" ng-model="inApp.headerTextClr"  id="headerTextClr">
								</label>
								
							</div>

							<div class="clearfix down-space"></div>
							
							<div class="col-md-12">
								 <label class="control-label col-md-4">Description Text Color</label>
								
								<label class="col-md-7">
									<input type="color" class="form-control" placeholder="Description Text Color" ng-model="inApp.descriptionTextClr"  id="descriptionTextClr">
								</label>
								
							</div>

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

							
							<div class="col-md-12">
								 <label class="control-label col-md-4">Background Color</label>
								
								<label class="col-md-7">
									<input type="color" class="form-control" placeholder="Background Color" ng-model="inApp.backgroundColor"  id="backgroundColor">
								</label>
								
							</div>

							<div  class="clearfix down-space" ng-show="setAction"></div>

							
							<div class="col-md-12" ng-show="setAction">
								 <label class="control-label col-md-4">Action Title Text Color</label>
								
								<label class="col-md-7">
									<input type="color" class="form-control" placeholder="Action Title Text Color" ng-model="inApp.submitBtnTextClr"  id="submitBtnTextClr">
								</label>
								
							</div>

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

							<div class="col-md-12" ng-if="template_name_error">
								<div class="col-md-4">&nbsp;</div>
								<div class="col-md-8">
									<span style="color: red">{{template_name_error}}</span>
								</div>								
							</div>

							<legend>&nbsp;</legend>

							<div class="col-md-12">
								<div class="col-md-12" style=" text-align:right">
									<button type="button" ng-hide="btnSaveInApp" ng-click="saveInAppSettings()" class="btn btn-sm btn-success">Submit </button>

									<button ng-hide="!btnSaveInApp" type="button" id="btnUpdateInApp" ng-click="updateInAppSettingsTools()" class="btn btn-sm btn-success">Update </button>

									<button type="button" id="btnClose" class="btn btn-sm btn-success" ng-click="closeTemplate(clearTemplateId);">Close</button>
								</div>
							</div>
								
						<!-- </fieldset> -->
				</div>
			</div>
		</div>
	<!-- Setting ends here -->
		</div>
	</div>

	<!-- Dialog  custom field popup Start-->
<div class="modal fade" id="customfields-dialog" style="z-index:1050!important;">
    <div class="modal-dialog embedCustomField">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Embed Custom Fields</h4>
            </div>
            <div class="modal-body">
            	
            	<div style="height:250px;overflow:auto">
            	<table class="table">
            		<thead>            			
            			<th>Select</th>
            			<th>Field Name</th>
            			<th>Default Value</th>            			            			
            		</thead>
            		<tbody ng-repeat="cf in customFields">
            			<tr >
            				<td><input type="checkbox" ng-model="cf.selected"/></td>
            				<td>{{cf.name}}</td> 
            				<td><input type="text" placeholder="Default Value" class="form-control" ng-model="cf.defaultValue"></td>            				
            			</tr>
            		</tbody>
            	</table>
            	</div>	                                                            
            </div>
            <div class="modal-footer">            	
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="embedCustomField()"  data-dismiss="modal">Save</button>                
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="refreshCustomFields()" data-dismiss="modal">Cancel</button>
               
            </div>
        </div>
    </div>
</div>
<!-- Dialog  custom field popup End-->

</div>


<style>
    .rectangle-btn {
      display: inline-block;
      padding: 8px 20px; /* Reduced height */
      border: none;
      text-align: center;
      text-decoration: none;
      font-size: 12px;
      cursor: pointer;
      border-radius: 4px;
      font-weight:bolder; /* Make text bold */
    }
  </style>