<#
var data = settings.cps_icon_list;


 if(settings.cps_process_layout == 'Horizontal'){
    var preset = settings.cps_preset_hr_style;  
    var pswfe_steps_layout = 'pswfe-steps';
 }
 else if( settings.cps_process_layout == 'new_design' ){

     var pswfe_steps_layout = 'pswfe-steps-accoridion';
}
 else{
    var preset = settings.cps_preset_vertical_style;
    var pswfe_steps_layout = 'pswfe-vertical-steps';
 }
 
 if(settings.cps_process_layout == 'new_design' ){
  #>
    <div class='cps-show-events'>
            <div class='cps-left'>
              
 <# } #>
 <ul class="{{pswfe_steps_layout}}  pswfe-process {{preset}}">
 <#

    if(layout == 'Horizontal'){
        var has_arrow = (settings.cps_enable_connector == 'cps-connector-arrow') ? 'pswfe-has-arrow' : "";
        var has_gap = (settings.cps_show_gap === 'yes') ? 'pswfe-has-gap' : "";
        var icon_badge = (settings.cps_selected_badge) ? settings.cps_selected_badge : '1';
        
    } else if( layout == 'new_design'){
		<!-- $has_arrow  = ( settings.cps_enable_connector == 'cps-connector-arrow' ) ? 'pswfe-accordion-has-arrow' : ''; -->
		var has_gap    = ( settings.cps_show_gap === 'yes') ? 'pswfe-accordion-has-gap' : '';
		var icon_badge = ( settings.cps_selected_badge ) ? settings.cps_selected_badge : '1';

	}
  else{
        var has_arrow = (settings.cps_enable_connector == 'cps-connector-arrow') ? 'pswfe-vertical-has-arrow' : "";
        var has_gap = (settings.cps_show_gap === 'yes') ? 'pswfe-vertical-has-gap' : "";
        var icon_badge = (settings.cps_selected_badge) ? settings.cps_selected_badge : '1';
    }
    
#>

 <#   _.each(data, function(item, index){

  var activecls = '';
	var cp_selected ='';

    var icon_type = (item.cps_selected_icon)?(item.cps_selected_icon):'icon';
    var title_link = (item.cps_website_link.url !="" && item.cps_enable_link=='yes') ?'<a href="'+item.cps_website_link.url+'">'+item.cps_title+'</a>' :'<div '+view.getRenderAttributeString(title_key)+'>'+item.cps_title+'</div>';
    var title_key = view.getRepeaterSettingKey( 'cps_title', 'cps_icon_list',index );
    description_key = view.getRepeaterSettingKey( 'cps_description', 'cps_icon_list',index );



    //inline attributes
      view.addInlineEditingAttributes( title_key, 'none' );
      view.addInlineEditingAttributes( description_key, 'advanced' );

    if(layout == 'Horizontal'){
        var psefe_title_var = ['pswfe-title'];
        var pswfe_description_var = ['pswfe-content-desc'];
        var pswfe_step_segment = 'pswfe-steps-segment';
        var pswfe_badge = 'pswfe-badge';
        var pswfe_step_marker = 'pswfe-steps-marker';
        var pswfe_step_marker_text = 'pswfe-marker-text';
        var pswfe_step_marker_image = 'pswfe-marker-image';
        var pswfe_step_content = 'pswfe-steps-content';
    }
    else if( layout == 'new_design') {
		var psefe_title_var         = ['pswfe-accordion-title'];
		var pswfe_description_var   = ['pswfe-vertical-content-desc'];
		var pswfe_step_segment      = 'cps-accordion';
		var pswfe_badge             = 'pswfe-badge-tab-design';
    var pswfe_step_marker       = 'cps-icon_div';
    var pswfe_step_marker_text  = 'pswfe-accordion-marker-text';
    var pswfe_step_marker_image = 'pswfe-accordion-image';
    var pswfe_step_content      = 'cps-process-details';
    var activecls = 0 === index ? ' active' : activecls;
		var cp_selected = 0 === index ? ' cps-selected' : cp_selected;

	} 
    else{
        var psefe_title_var = ['pswfe-vertical-title'];
        var pswfe_description_var = ['pswfe-vertical-content-desc'];
        var pswfe_step_segment = 'pswfe-vertical-steps-segment';
        var pswfe_badge = 'pswfe-vertical-badge';
        var pswfe_step_marker = 'pswfe-vertical-steps-marker';
        var pswfe_step_marker_text = 'pswfe-vertical-marker-text';
        var pswfe_step_marker_image = 'pswfe-vertical-marker-image';
        var pswfe_step_content = 'pswfe-vertical-steps-content';

    }

       //class for title and description

      view.addRenderAttribute(title_key, {'class' : psefe_title_var,});
      view.addRenderAttribute(description_key, {'class': pswfe_description_var,});

#>
<li class="{{pswfe_step_segment}} pswfe-animation elementor-repeater-item-{{item._id}} {{has_arrow}} {{has_gap}} {{activecls}} {{cp_selected}}">
<div class="{{pswfe_step_marker}}">
    <#
    if(icon_type == 'icon'){ #>
      <# var iconHTML = elementor.helpers.renderIcon( view, item.cps_story_icon, { 'aria-hidden': true }, 'i' , 'object' ); #>
      <# if(iconHTML && iconHTML.rendered){#>
        <span class="{{pswfe_step_marker_text}}">
          {{{ iconHTML.value }}}
        </span>
      <#
      } else{
        #>
        <span class="{{pswfe_step_marker_text}}">
        <i class="{{  item.cps_story_icon.value }}" aria-hidden="true"></i>
      </span>
        <#
      }
     }
       else if(icon_type == 'image'){
    #>
    <img src="{{item.cps_icon_image.url}}" class="{{pswfe_step_marker_image}}">
    <#
   }

      else{
        if(icon_type == 'customtext'){ #>
          <span class="{{pswfe_step_marker_text}}">{{{item.cps_icon_text}}}</span>
       <#  }
    }
    #>

    <# 
    if(layout !== 'new_design'){
    if(icon_badge == 'badge-customtext'){
       if(item.cps_badge!=""){
        var steps = (item.cps_badge.length > "2") ? "steps" : "";
      #>

     <span class="{{pswfe_badge}} {{steps}} {{settings.cps_badge_position}}">{{{ item.cps_badge }}}</span>

    <#
       }
  }
      }
    #>
    <div class="pswfe-hover-animation {{settings.cps_hover_animation}}"></div>
    </div>
<#
if(item.cps_title !="" || item.cps_description !=""){
  #>
    <div class="{{pswfe_step_content}}">
    
    <# if(layout == 'new_design'){
    
      
      if(icon_badge == 'badge-customtext'){
       
      if(item.cps_badge!=""){
        var steps = (item.cps_badge.length > "2") ? "steps" : "";
      #>

     <div class="cps-badge"><span class="{{pswfe_badge}} {{steps}} {{settings.cps_badge_position}}">{{{ item.cps_badge }}}</span></div>

    <#
       }
  }
             } #>      
            <div {{{view.getRenderAttributeString( title_key )}}}>
              <# if(item.cps_website_link.url !="" && item.cps_enable_link=='yes'){ #>
                <a href="{{item.cps_website_link.url}}">{{{item.cps_title}}}</a>
              <# }else{ #>
                <div {{{view.getRenderAttributeString(title_key)}}}>{{{item.cps_title}}}</div>
              <# } #>
            </div>
            <# if(layout == 'new_design'){ #>
           <div class='cps-footer'>
		<#}#>

            <div {{{view.getRenderAttributeString( description_key )}}}>{{{item.cps_description}}}</div>


            <# if(layout == 'new_design'){#>
              <div class='cps_mobile_image'>
              <div class='cps-img'>
                     <img src="{{item.cps_accordion_image.url}}" class="{{pswfe_step_marker_image}}">
                  </div> 
              </div>
              
	</div>
		 <#}#>
        </div>
        <# }
        if(layout == 'new_design'){ #>
		<svg xmlns='http://www.w3.org/2000/svg' class='cps-icon-arrow-up' aria-hidden='true' width='16' height='1' viewBox='0 0 320 512' fill='currentColor'>
  <path d='M143 352.3V32c0-17.7 14.3-32 32-32s32 14.3 32 32v320.3l119-119c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-176 176c-12.5 12.5-32.8 12.5-45.3 0l-176-176c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l119 119z'/>
</svg><#
	}  #>
        </li>
 <# }); #>
    </ul>
    <# if(settings.cps_process_layout == 'new_design'){ #>

</div>
 <div class='cps-right  cps_desktop_img'>
 <#   _.each(data, function(item, index){ 
  var pswfe_step_marker_image = 'pswfe-accordion-image ';


  #>
                  <div class='cps-img'>
                     <img src="{{item.cps_accordion_image.url}}" class="{{pswfe_step_marker_image}}">
                  </div> 
                  <# }); #>     
          </div>
</div>
<# }  #>


<!-- new design html  -->



