<?php 
    $categories_choose = array();
    if (!empty($settings['posts_categories'])){
        $categories_choose = $settings['posts_categories']; 
    } 
?>

<div class="tabs">

    <?php if ($settings['show_filter'] == 'yes'): ?>
        <div class="header-tabs">
            <button type="button" class="filter-btn active" data-filter="*">All</button>
            <?php if (!empty($settings['posts_categories'])): ?>
                <?php foreach ($categories_choose as $key => $category) : ?>
                    <?php $category_name = str_replace('-', ' ', $category); ?>
                    <button type="button" class="filter-btn" data-filter="<?php echo esc_attr('.'.$category); ?>"><?php esc_html_e($category_name,'norstar'); ?></button>
                <?php endforeach; ?>    
            <?php else: ?>
                <?php $categories_choose = get_terms('portfolios_category'); ?>
                <?php foreach ($categories_choose as $key => $category) : ?>
                    <button type="button" class="filter-btn" data-filter="<?php echo esc_attr('.'.$category->slug); ?>"><?php esc_html_e($category->name,'norstar'); ?></button>
                <?php endforeach; ?>  
            <?php endif; ?>
        </div>
    <?php endif; ?>
    


    <div class="grid tab-content">
    <?php $index = 0; ?>
    <?php while ($query->have_posts()) : $query->the_post(); ?>
        <?php 
            if ( $index % 2 == 0 ){
                $class_addon = 'even';
            } else {
                $class_addon = 'odd';
            } 

            $post_categories = wp_get_post_terms(get_the_ID(), 'portfolios_category', array('fields' => 'slugs'));
            $category_classes = implode(' ', $post_categories);
        ?>
        <div  class="grid-item tab-content-item tab-content-item-<?php echo esc_attr($class_addon.' ','norstar-core'); ?> filter <?php echo esc_attr($category_classes); ?>" >
            <div class="content">
                <h4 class="title">
                    <a href="<?php echo esc_attr(get_the_permalink()); ?>" >
                        <?php esc_html_e(get_the_title(), 'norstar'); ?>
                    </a>
                </h4>
                <p class="description">
                    <?php echo wp_trim_words(get_the_excerpt(), $settings['excerpt_lenght'], ''); ?>
                </p>
                <?php if ($settings['show_button'] == 'yes' ): ?>
                    <?php if (!empty( $settings['button_text'] ) || !empty($settings['post_icon_readmore'])): ?>
                        <a href="<?php echo get_the_permalink(); ?>" class="tf-portfolio-btn-st4">
                            <?php if (!empty( $settings['button_text'] )): ?>
                                <?php esc_html_e($settings['button_text'],'norstar'); ?>
                            <?php endif; ?>
                            <?php echo \Elementor\Addon_Elementor_Icon_manager_norstar::render_icon( $settings['post_icon_readmore'], [ 'aria-hidden' => 'true' ] );?>
                        </a>
                    <?php endif; ?>

                <?php endif; ?>
            </div>
            <?php if (has_post_thumbnail()) : ?>
                <div class="feature-post">
                    <a href="<?php echo esc_attr(get_the_permalink());?>">
                        <?php echo sprintf('<img src="%s" alt="image">', \Elementor\Group_Control_Image_Size::get_attachment_image_src(get_post_thumbnail_id(), 'thumbnail', $settings)); ?>
                    </a>
                </div>
            <?php endif; ?>
        </div>
        <?php $index++; ?>
    <?php endwhile; ?>
    </div>
</div>
