<?php
$active = intval($settings['active']);
$accordion = $widget->get_settings('accordion');
$wg_id = pxl_get_element_id($settings);
if(!empty($accordion)) : ?>
    <div class="pxl-accordion pxl-accordion3 <?php echo esc_attr($settings['style'].' '.$settings['pxl_animate']); ?>" data-wow-delay="<?php echo esc_attr($settings['pxl_animate_delay']); ?>ms">
        <?php foreach ($accordion as $key => $value):
            $is_active = ($key + 1) == $active;
            $pxl_id = isset($value['_id']) ? $value['_id'] : '';
            $title = isset($value['title']) ? $value['title'] : '';
            $desc = isset($value['desc']) ? $value['desc'] : '';
            $index = $key + 1;
            ?>
            <div class="pxl--item <?php echo esc_attr($is_active ? 'active' : ''); ?>">
                <<?php pxl_print_html($settings['title_tag']); ?> class="pxl-accordion--title" data-target="<?php echo esc_attr('#'.$wg_id.'-'.$pxl_id); ?>">
                    <span class="pxl-title--text">
                        <div class="pxl-item--number">
                            <span class="number"><?php echo sprintf('%02d', $index); ?></span><span class="qstn-number"><?php echo esc_html__('QUESTION-', 'aimo'); ?><?php echo sprintf('%02d', $index); ?></span>
                        </div>
                        <div class="title"><?php echo wp_kses_post($title); ?></div>
                    </span>
                    <?php if($settings['style'] == 'style-default') : ?><span class="pxl-icon--action"><span class="pxl-icon--plus"><span></span></span></span><?php endif; ?>
                </<?php pxl_print_html($settings['title_tag']); ?>>
                <div id="<?php echo esc_attr($wg_id.'-'.$pxl_id); ?>" class="pxl-accordion--content" <?php if($is_active){ ?>style="display: block;"<?php } ?>>
                    <?php echo wp_kses_post(nl2br($desc)); ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
<?php endif; ?>