<?php 
    $is_items = (isset($settings['items']) && !empty($settings['items']) && count($settings['items'])) || false;
?>

<?php if($is_items): ?>
    <div class="pxl-company-features">
        <div class="pxl-item--container">
            <div class="pxl-item--inner">
                <div class="pxl-item--col pxl-item--col1">
                    <div class="pxl-col--inner">
                        <ul class="pxl-list--btn">
                            <?php foreach($settings['items'] as $key => $item): ?>
                                <?php 
                                    $tab_index = 'tab'.(string)$key;    
                                    $active = ($key === $settings['tab_active']) ? 'active' : '';
                                ?>
                                <?php if(!empty($item)) : ?>
                                    <li class="pxl-item--btn">
                                        <a href="#" type="button" class="btn <?php echo esc_attr($active); ?>" data-tab="<?php echo esc_attr($tab_index); ?>">
                                            <span class="pxl-btn--text">
                                                <?php echo esc_attr($item['tab_title']); ?>
                                            </span>
                                            <span class="pxl-btn--icon">
                                                <span>                                            
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
                                                        <path d="M15 7.30933L9 13.3093M15 7.30933L9 1.30933M15 7.30933L1 7.30933" stroke="#4AAB3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </li>
                                <?php endif; ?>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                </div>
                <div class="pxl-item--col pxl-item--col2">
                    <div class="pxl-col--inner">
                        <div class="pxl-list--images">
                            <?php foreach($settings['items'] as $key => $item): ?>
                                <?php 
                                    $image_url = solarva_get_thumbnail($item['feature_image']['id'], 'full', true);
                                    $tab_index = 'tab'.(string)$key;    
                                    $active = ($key === $settings['tab_active']) ? 'active' : '';
                                ?>
                                <div class="pxl-item--image <?php echo esc_attr($tab_index.' '.$active); ?>" style="background-image: url('<?php echo esc_url($image_url); ?>')"></div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
                <div class="pxl-item--col pxl-item--col3">
                    <div class="pxl-col--inner">
                        <div class="pxl-list--content">
                            <?php foreach($settings['items'] as $key => $item): ?>
                                <?php 
                                    $tab_index = 'tab'.(string)$key;    
                                    $active = $key === $settings['tab_active'] ? 'active' : '';
                                    $feature_list = explode('|', $item['feature_list']);
                                ?>
                                <div class="pxl-item--content <?php echo esc_attr($tab_index.' '.$active); ?>">
                                    <div class="pxl-feature--title">
                                        <?php echo esc_attr($item['feature_title']); ?>
                                    </div>
                                    <div class="pxl-feature--desc">
                                        <?php echo esc_attr($item['feature_desc']); ?>
                                    </div>
                                    <ul class="pxl-list--features">
                                        <?php foreach($feature_list as $key => $feature) : ?>
                                            <?php 
                                                $animate_delay = $key * 100;
                                            ?>
                                            <li class="pxl-item--feature" style="animation-delay: <?php echo esc_attr($animate_delay.'ms'); ?>">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 7.34784 1.05357 4.8043 2.92893 2.92893C4.8043 1.05357 7.34784 0 10 0C12.6522 0 15.1957 1.05357 17.0711 2.92893C18.9464 4.8043 20 7.34784 20 10C20 12.6522 18.9464 15.1957 17.0711 17.0711C15.1957 18.9464 12.6522 20 10 20C7.34784 20 4.8043 18.9464 2.92893 17.0711C1.05357 15.1957 0 12.6522 0 10ZM9.42933 14.28L15.1867 7.08267L14.1467 6.25067L9.23733 12.3853L5.76 9.488L4.90667 10.512L9.42933 14.28Z" fill="#86BB46"/>
                                                </svg>
                                                <span class="pxl-feature--text">
                                                    <?php echo esc_attr($feature); ?>
                                                </span>
                                            </li>
                                        <?php endforeach; ?>
                                    </ul>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php endif; ?>