<?php
$price = get_field_object('price');
$sale_price = get_field_object('crossed_price');
$authorName = get_the_author(); 
?>
<div class="swiper-slide h-auto pb-3">
    <article class="card h-100 border-0 shadow-sm mx-2">
        <div class="position-relative">
        <a href="<?= esc_url( get_permalink() )?>" class="d-block position-absolute w-100 h-100 top-0 start-0"></a>
        <?php if ($sale_price['value'] != ""):?>
            <span class="badge bg-danger position-absolute top-0 start-0 zindex-2 mt-3 ms-3"><?php echo __( 'Sale!', 'felicityhealth' );?></span>  
        <?php endif ?>
        <!-- <span class="badge bg-success position-absolute top-0 start-0 zindex-2 mt-3 ms-3">Best Seller</span> -->
        <!-- <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-2 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Save to Favorites">
            <i class="bx bx-bookmark"></i>
        </a> -->
        <img src="<?php if ( has_post_thumbnail() ) {the_post_thumbnail_url(); }?>" class="card-img-top" alt="<?php the_title(); ?>">
        </div>
        <div class="card-body pb-3">
        <h3 class="h5 mb-2">
            <a href="<?= esc_url( get_permalink() )?>"><?php the_title(); ?></a>
        </h3>
        <p class="fs-sm mb-2">By <?php echo $authorName ?></p>
        <?php if ($sale_price['value'] === ""):?>
                <p class="fs-lg fw-semibold text-primary mb-0"><?php echo $price['value'] ?></p>
            <?php else:?>
                <p class="text-muted mb-0"><span class="fs-lg fw-semibold text-danger me-2"><?php echo $price['value'] ?></span><del><?php echo $sale_price['value'] ?></del></p>
        <?php endif ?>
        </div>
        <!-- <div class="card-footer d-flex align-items-center fs-sm text-muted py-4">
            <div class="d-flex align-items-center me-4">
                <i class="bx bx-time fs-xl me-1"></i>
                220 hours
            </div>
            <div class="d-flex align-items-center">
                <i class="bx bx-like fs-xl me-1"></i>
                94% (4.2K)
            </div>
        </div> -->
    </article>
</div>