<?php
$html_id = pxl_get_element_id($settings);
$source    = $widget->get_setting('source_'.$settings['post_type']);
$orderby = $widget->get_setting('orderby', 'date');
$order = $widget->get_setting('order', 'desc');
$limit = $widget->get_setting('limit', 6);
$post_ids = $widget->get_setting('post_ids', '');
$settings['layout']    = $settings['layout_'.$settings['post_type']];
extract(pxl_get_posts_of_grid('portfolio', [
    'source' => $source,
    'orderby' => $orderby,
    'order' => $order,
    'limit' => $limit,
    'post_ids' => $post_ids,
]));

$img_size = $widget->get_setting('img_size');
$show_excerpt = $widget->get_setting('show_excerpt');
$num_words = $widget->get_setting('num_words');
$show_button = $widget->get_setting('show_button');
$show_info = $widget->get_setting('show_info');
$show_category = $widget->get_setting('show_category');
$button_text = $widget->get_setting('button_text');

?>

<?php if (is_array($posts)): ?>
    <div class="pxl-post-slip pxl-post-slip1">
        <div class="pxl-post-image-slip">
            <div class="pxl-post-image--track">
                <?php $image_size = !empty($img_size) ? $img_size : '870x614';
                    foreach ($posts as $key => $post):
                    $location = get_post_meta($post->ID, 'location', true);
                    $date_finish = get_post_meta($post->ID, 'date_finish', true);
                    $materials = get_post_meta($post->ID, 'materials', true);
                    $portfolio_excerpt = get_post_meta($post->ID, 'portfolio_excerpt', true);
                    $img_id       = get_post_thumbnail_id( $post->ID );
                    if (has_post_thumbnail($post->ID) && wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), false)): 
                        $img          = pxl_get_image_by_size( array(
                            'attach_id'  => $img_id,
                            'thumb_size' => $image_size
                        ) );
                        $thumbnail    = $img['thumbnail'];
                        ?>
                        <div class="pxl-post-image--block pxl-post-block_<?php echo esc_attr($key+1); ?>">
                            <div class="pxl-content-meta">
                                <div class="pxl-post--image">
                                    <a href="<?php echo esc_url(get_permalink( $post->ID )); ?>"></a>
                                    <?php echo wp_kses_post($thumbnail); ?>
                                </div>
                                <div class="pxl-post-block--min pxl-post-min_<?php echo esc_attr($key+1); ?>">
                                    <div class="pxl-meta-top">
                                        <?php if($show_category == 'true'): ?>
                                            <div class="pxl-post--category">
                                                <?php the_terms( $post->ID, 'portfolio-category', '', ' ' ); ?>
                                            </div>
                                        <?php endif; ?>
                                        <h5 class="pxl-post--title">
                                            <a href="<?php echo esc_url(get_permalink( $post->ID )); ?>"><?php echo pxl_print_html(get_the_title($post->ID)); ?></a>
                                        </h5>
                                        <?php if($show_excerpt == 'true' && !empty($portfolio_excerpt)): ?>
                                            <div class="pxl-post--content">
                                                <?php echo wp_trim_words( $portfolio_excerpt, $num_words, $more = null ); ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                    <div class="pxl-content-list <?php if ($show_info !='true'){ echo esc_attr('opacity-0');} ?>">
                                        <div class="pxl-item-list date">
                                            <span class="pxl-item-name"><?php echo esc_html__('Completion Date: ','hubsteel'); ?></span>
                                            <?php echo pxl_print_html($date_finish); ?>
                                        </div>
                                        <div class="pxl-item-list location">
                                            <span class="pxl-item-name"><?php echo esc_html__('Location: ','hubsteel'); ?></span>
                                            <?php echo pxl_print_html($location); ?>
                                        </div>
                                        <div class="pxl-item-list materials">
                                            <span class="pxl-item-name"><?php echo esc_html__('Materials: ','hubsteel'); ?></span>
                                            <?php echo pxl_print_html($materials); ?>
                                        </div>
                                    </div>
                                    <?php if($show_button == 'true') : ?>
                                        <div class="pxl-btn-portfolio">
                                            <a class="btn pxl-icon-active  btn-outline  pxl-icon--right" href="<?php echo esc_url(get_permalink( $post->ID )); ?>">
                                                <span class="pxl-btn-icon pxl-ml-6">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="#000" height="512" viewBox="0 0 24 24" width="512"><path d="m16.0039 9.414-8.60699 8.607-1.414-1.414 8.60599-8.607h-7.58499v-2h10.99999v11h-2z" fill="rgb(0,0,0)"></path></svg>
                                                </span>
                                                <span class="pxl--btn-text"><?php if(!empty($button_text)) {
                                                    echo esc_attr($button_text);
                                                } else {
                                                    echo esc_html__('Read more', 'hubsteel');
                                                } ?></span>
                                            </a>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    <?php endif;
                endforeach; ?>
            </div>
        </div>
    </div>
<?php endif; ?>