<?php
$widget->add_render_attribute( 'counter', [
    'class' => 'pxl--counter-value',
    'data-duration' => $settings['duration'],
    'data-to-value' => $settings['ending_number'],
    'data-delimiter' => $settings['thousand_separator_char'],
    'data-prefix' => $settings['prefix'],
    'data-suffix' => $settings['suffix'],
] );
$widget->add_render_attribute( 'counter2', [
    'class' => 'pxl--counter-value-hide',
    'data-duration' => $settings['duration'],
    'data-to-value' => $settings['ending_number'],
    'data-delimiter' => $settings['thousand_separator_char'],
    'data-prefix' => $settings['prefix'],
    'data-suffix' => $settings['suffix'],
] ); ?>
<div class="pxl-counter pxl-counter1 <?php echo esc_attr($settings['counter_style']); ?> <?php echo esc_attr($settings['pxl_animate']); ?>" data-wow-delay="<?php echo esc_attr($settings['pxl_animate_delay']); ?>ms" data-wow-duration="<?php echo esc_attr($settings['pxl_animate_duration']); ?>s">
    <div class="pxl--item-inner">
        <div class="pxl--counter-number">
            <svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52" fill="none">
                <circle opacity="0.1" cx="26" cy="26" r="25.5" stroke="#1A1A1A"/>
            </svg>
            <span <?php pxl_print_html($widget->get_render_attribute_string( 'counter' )); ?>><?php echo esc_html($settings['starting_number']); ?></span>
            <span <?php pxl_print_html($widget->get_render_attribute_string( 'counter2' )); ?>><?php echo esc_html($settings['ending_number']); ?></span>
        </div>
        <?php if(!empty($settings['title'])) : ?>
            <div class="pxl-item--title"><?php echo pxl_print_html($settings['title']); ?></div>
        <?php endif; ?>
    </div>
</div>