<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Safe defaults
 */
$gridpress_card_data = $gridpress_card_data ?? [];

/**
 * Safe variables
 */
$gridpress_counter = absint( $gridpress_card_counter ?? 0 );

$gridpress_url       = $gridpress_card_data['url'] ?? '';
$gridpress_image     = $gridpress_card_data['imag_url'] ?? '';
$gridpress_title     = $gridpress_card_data['title'] ?? '';
$gridpress_short     = $gridpress_card_data['short_title'] ?? '';

$gridpress_bg_color  = $gridpress_card_data['bg_color'] ?? '';

$gridpress_bg    = sanitize_hex_color( $gridpress_card_data['bg_color'] ?? '' );

$gridpress_class_attr = sprintf(
    /* translators: 1: Grid item number used in CSS class, 2: optional 'large' class for featured items */
    'jc-cards jc-cards-shape gridpress-item-%d%s',
    $gridpress_counter,
    ( in_array( $gridpress_counter, [4, 5], true ) ? ' large' : '' )
);

$gridpress_style_attr = $gridpress_bg ? 'background-color:' . $gridpress_bg : '';
?>
<div class="<?php echo esc_attr( $gridpress_class_attr ); ?>"
        <?php if ( $gridpress_style_attr ) : ?>
            style="<?php echo esc_attr( $gridpress_style_attr ); ?>"
        <?php endif; ?>
    >
    <div class="jc-cards-image">
        <a class="jc-cards-image-wrap" href="<?php echo esc_url( $gridpress_url ); ?>">
            <img
                src="<?php echo esc_url( $gridpress_image ); ?>"
                alt="<?php echo esc_attr( $gridpress_title ); ?>"
            >

        </a>
    </div>
    <strong class="jc-cards-title">
        <a href="<?php echo esc_url( $gridpress_url ); ?>">
            <?php echo esc_html( $gridpress_short ); ?>
        </a>
    </strong>
</div>