<?php
defined( 'ABSPATH' ) || exit;

/**
 * Post Recommencation View.
 *
 * @package    Fab
 * @subpackage Fab/View
 */
$display_count = $atts['display_count'];
$related_posts = apply_filters( 'fab_list_of_related_posts', array(), $atts );
?>

<div class="fab-container">
    <div class="flex flex-col gap-y-2 divide-y divide-gray-200">
        <h2 class="text-xl">
            <?php echo esc_html__( 'Related Posts', 'floating-awesome-button' ); ?>
        </h2>

        <?php
        foreach ( $related_posts as $related_post ) :
            $related_post_id = url_to_postid( $related_post['url'] );
            if ( ! $related_post_id ) {
                continue;
            }

            $thumbnail  = get_the_post_thumbnail( $related_post_id, 'thumbnail', array( 'class' => 'w-20 h-20 object-cover rounded' ) );
            $excerpt    = get_the_excerpt( $related_post_id );
            $categories = get_the_category( $related_post_id );
            $tags       = get_the_tags( $related_post_id );
        ?>
            <div class="grid grid-cols-8 divide-x divide-gray-200">
                <div class="col-span-8 flex gap-4 items-start p-3 hover:bg-gray-50 transition">
                    
                    <!-- Thumbnail -->
                    <?php if ( $thumbnail ) : ?>
                        <a href="<?php echo esc_url( $related_post['url'] ); ?>" target="_blank" rel="noopener noreferrer" class="flex-shrink-0 no-underline">
                            <?php echo wp_kses_post( $thumbnail ); ?>
                        </a>
                    <?php endif; ?>

                    <!-- Content -->
                    <div class="flex-1">
                        <!-- Title -->
                        <a href="<?php echo esc_url( $related_post['url'] ); ?>" target="_blank" rel="noopener noreferrer" class="text-base font-semibold mb-2 no-underline">
                            <?php echo esc_html( $related_post['title'] ); ?>
                        </a>

                        <!-- Excerpt -->
                        <?php if ( $excerpt ) : ?>
                            <p class="text-xs text-gray-600 mb-2 line-clamp-2">
                                <?php echo esc_html( wp_trim_words( $excerpt, 20 ) ); ?>
                            </p>
                        <?php endif; ?>

                        <!-- Categories -->
                        <?php if ( $categories ) : ?>
                            <div class="flex flex-col md:flex-row md:items-center gap-2 mb-2 md:mb-0">
                                <span class="text-xs font-bold">Categories:</span>
                                <div class="text-xs text-gray-500 flex flex-wrap gap-2">
                                    <?php foreach ( $categories as $category ) : ?>
                                        <a href="<?php echo esc_url( get_term_link( $category ) ); ?>" target="_blank" rel="noopener noreferrer" class="no-underline">
                                            <?php echo esc_html( $category->name ); ?>
                                        </a>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        <?php endif; ?>

                        <!-- Tags -->
                        <?php if ( $tags ) : ?>
                            <div class="flex flex-col md:flex-row md:items-center gap-2">
                                <span class="text-xs font-bold">Tags:</span>
                                <div class="text-xs text-gray-500 flex flex-wrap gap-2">
                                    <?php foreach ( $tags as $tag_data ) : ?>
                                        <a href="<?php echo esc_url( get_term_link( $tag_data ) ); ?>" target="_blank" rel="noopener noreferrer" class="no-underline">
                                            <?php echo '#' . esc_html( $tag_data->name ); ?>
                                        </a>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>
