<?php 
    /* get categories */
    $taxo = 'projects-categories';
    $_category = array();
    if(!isset($atts['cat']) || $atts['cat']==''){
        $terms = get_terms($taxo);
        foreach ($terms as $cat){
            $_category[] = $cat->term_id;
        }
    } else {
        $_category  = explode(',', $atts['cat']);
    }
    $atts['categories'] = $_category;
    $layout = isset($atts['layout']) ? $atts['layout'] : '';
    $gird_item_space = isset($atts['gird_item_space']) ? $atts['gird_item_space'] : '15px';
    $gird_crop_image = isset($atts['gird_crop_image']) ? $atts['gird_crop_image'] : '';
    $hide_load_more = isset($atts['hide_load_more']) ? $atts['hide_load_more'] : '';

    /*ajax media*/
    wp_enqueue_style('wp-mediaelement');
    wp_enqueue_script('wp-mediaelement');
    /* js, css for load more */
    wp_register_script('cms-loadmore-js', get_template_directory_uri() . '/assets/js/cms_loadmore_grid.js', array('jquery'), '1.0', true);
    // What page are we on? And what is the pages limit?
    global $wp_query;
    $max = $wp_query->max_num_pages;
    $limit = $atts['limit'];
    $paged = (get_query_var('paged') > 1) ? get_query_var('paged') : 1;

    // Add some parameters for the JS.
    $current_id = str_replace('-', '_', $atts['html_id']);
    wp_localize_script(
        'cms-loadmore-js',
        'cms_more_obj' . $current_id,
        array(
            'startPage' => $paged,
            'maxPages' => $max,
            'total' => $wp_query->found_posts,
            'perpage' => $limit,
            'nextLink' => next_posts($max, false),
            'masonry' => $atts['layout']
        )
    );
    wp_enqueue_script('cms-loadmore-js');

?>
<div class="cms-projects-style cms-projects-style1 cms-grid-wraper style-white <?php echo esc_attr($atts['template']);?>" id="<?php echo esc_attr($atts['html_id']);?>">
    <?php if($atts['filter']=="true" and $atts['layout']=='masonry'):?>
        <div class="cms-grid-filter style1">
            <ul class="clearfix">
                <li><a class="active" href="#" data-group="all"><?php echo esc_html_e('All Projects','wp-yellow-hats'); ?></a></li>
                <?php foreach($atts['categories'] as $category):?>
                    <?php $term = get_term( $category, $taxo );?>
                    <li><a href="#" data-group="<?php echo esc_attr('category-'.$term->slug);?>">
                            <?php echo esc_html($term->name);?>
                        </a>
                    </li>
                <?php endforeach;?>
            </ul>
        </div>
    <?php endif;?>
    <div class="clearfix <?php echo esc_attr($atts['grid_class']);?>" style="margin: 0 -<?php echo esc_attr($gird_item_space); ?>">
        <?php
        $posts = $atts['posts'];
        $size = 'wp_yellow_hats_720X560';
        while($posts->have_posts()){
            $posts->the_post();
            $groups = array();
            $groups[] = '"all"';
            foreach(cmsGetCategoriesByPostID(get_the_ID(),$taxo) as $category){
                $groups[] = '"category-'.$category->slug.'"';
            }
            ?>
            <div class="cms-grid-item cms-projects-item <?php echo esc_attr($atts['item_class']);?>" data-groups='[<?php echo implode(',', $groups);?>]' style="padding: <?php echo esc_attr($gird_item_space); ?>">
                <div class="cms-grid-item-inner cms-projects-item-inner">
                    <div class="cms-projects-image">
                        <?php if($layout == 'basic' || $gird_crop_image == 'yes') { ?>
                            <?php 
                                if(has_post_thumbnail() && !post_password_required() && !is_attachment() &&  wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), $size, false)):
                                    $class = ' has-thumbnail';
                                    $thumbnail_url = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), $size, false);
                                    $thumbnail = get_the_post_thumbnail(get_the_ID(),'wp_yellow_hats_720X560');
                                else:
                                    $class = ' no-image';
                                    $thumbnail_url[0] = get_template_directory_uri(). '/assets/images/no-image.jpg';
                                    $thumbnail = '<img src="'.esc_url(get_template_directory_uri(). '/assets/images/no-image.jpg').'" alt="'.get_the_title().'" />';
                                endif;
                                echo '<div class="cms-grid-media media-zoom '.esc_attr($class).'">'.$thumbnail.'</div>';
                            ?>
                        <?php } else { ?>
                            <?php 
                                if(has_post_thumbnail() && !post_password_required() && !is_attachment() &&  wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'full', false)):
                                    $class = ' has-thumbnail';
                                    $thumbnail_url = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'full', false);
                                    $thumbnail = get_the_post_thumbnail(get_the_ID(),'full');
                                else:
                                    $class = ' no-image';
                                    $thumbnail_url[0] = get_template_directory_uri(). '/assets/images/no-image.jpg';
                                    $thumbnail = '<img src="'.esc_url(get_template_directory_uri(). '/assets/images/no-image.jpg').'" alt="'.get_the_title().'" />';
                                endif;
                                echo '<div class="cms-grid-media media-zoom '.esc_attr($class).'">'.$thumbnail.'</div>';
                            ?>
                        <?php } ?>
                    </div>
                    
                    <div class="cms-projects-hover">
                        <div class="cms-projects-category">
                            <?php echo get_the_term_list( get_the_ID(), 'projects-categories' ); ?>
                        </div>
                        <h3 class="cms-projects-title">
                            <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
                        </h3>
                        <div class="cms-projects-readmore">
                            <a href="<?php the_permalink(); ?>">+</a>
                        </div>
                    </div>
                </div>
            </div>
            <?php
        }
        ?>
    </div>
    <?php if(empty($hide_load_more)) { ?>
        <div class="cms_pagination text-center"></div>
    <?php } ?>
</div>