<?php
/**
 * @package DJ-Catalog2-Yootheme
 * @copyright Copyright (C) DJ-Extensions.com, All rights reserved.
 * @license http://www.gnu.org/licenses GNU/GPL
 * @author url: http://dj-extensions.com
 * @author email contact@dj-extensions.com
 */
defined('_JEXEC') or die;
// Image
if ($props['image']) {

	$image = $this->el('image', [

		'class' => [
			'djc_product_image',
			'el-image',
			'uk-border-{product_image_border} {@!product_image_transition}' => !$element['panel_style'] || ($element['panel_style'] ),
			'uk-box-shadow-{product_image_box_shadow} {@!panel_style} {@!product_image_transition}',
			'uk-box-shadow-hover-{product_image_hover_box_shadow} {@!panel_style} {@!product_image_transition}' => $props['product_image_link'],
			'uk-transition-{product_image_transition} uk-transition-opaque' => $props['product_image_link'],
			'uk-text-{product_image_svg_color} {@product_image_svg_inline}' => $this->isImage($props['product_image_link']) == 'svg',
			'uk-margin[-{product_image_margin}]-top {@!product_image_margin: remove} {@!product_image_box_decoration} {@!product_image_transition}' =>  !$element['panel_style'] ,
			'uk-margin[-{product_margin}]-top {@!product_margin: remove}',
			'uk-margin-remove-top {@product_margin: remove}',
			'uk-margin-remove-bottom',
			'uk-inline {@position_inline_product_image}' => ['position_inline_product_image' => $element['position_inline_product_image']],
			'uk-display-block ${@ifnotinline}' => ['ifnotinline' => !$element['position_inline_product_image']]
		],

		'src' => $props['image'],
		'alt' => $props['image_alt'],
		'width' => $element['product_image_width'],
		'height' => $element['product_image_height'],
		'uk-cover' => $element['panel_style'] && $element['panel_card_image'] ,
		'thumbnail' => true,
	]);

	//Style position && size of an element
	$image->attr('style', [
		'width:{product_image_width};' => ['product_image_width' => $element['product_image_width']],
		'height:{product_image_height};' => ['product_image_height' => $element['product_image_height']],
		'position:{position_image};' => ['position_image' => $element['position_image']],
		'left: {position_left_image}px;' => ['position_left_image' => $element['position_left_image']],
		'right: {position_right_image}px;' => ['position_right_image' => $element['position_right_image']],
		'top: {position_top_image}px;' => ['position_top_image' => $element['position_top_image']],
		'bottom: {position_bottom_image}px;' => ['position_bottom_image' => $element['position_bottom_image']],
		'z-index:{position_z_index_image};' => ['position_z_index_image' => $element['position_z_index_image']],


	], $element);

	echo $image($element, []);

	// Placeholder image if card and layout left or right
	if ($image->attrs['uk-cover']) {
		echo $image($element, [
			'class' => ['uk-invisible'],
			'uk-cover' => false,
		]);
	}

}



