<?php
/**
 * Template part for displaying products in archive
 *
 * @package Navier_Instruments
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class('product-card animate animate-fade-up'); ?>>
    <div class="product-image">
        <?php if (has_post_thumbnail()) : ?>
            <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail('navier-product'); ?>
            </a>
        <?php else : ?>
            <a href="<?php the_permalink(); ?>">
                <img src="<?php echo esc_url(NAVIER_URI . '/assets/images/product-placeholder.jpg'); ?>" alt="<?php the_title_attribute(); ?>">
            </a>
        <?php endif; ?>

        <?php
        $categories = get_the_terms(get_the_ID(), 'product_category');
        if ($categories && !is_wp_error($categories)) :
        ?>
            <span class="product-tag"><?php echo esc_html($categories[0]->name); ?></span>
        <?php endif; ?>
    </div>

    <div class="product-content">
        <h4 class="product-title">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h4>
        <p class="product-description"><?php echo esc_html(get_the_excerpt()); ?></p>
        <a href="<?php the_permalink(); ?>" class="product-link">
            <?php esc_html_e('Learn More', 'navier-instruments'); ?>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="5" y1="12" x2="19" y2="12"></line>
                <polyline points="12 5 19 12 12 19"></polyline>
            </svg>
        </a>
    </div>
</article>
