<?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;

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

	'uk-filter' => [
		'.js-filter' => $tags,
	],

]);

// Grid
$grid = $this->el('div', [

	'class' => [
		'uk-child-width-[1-{@!grid_default: auto}]{grid_default}',
		'uk-child-width-[1-{@!grid_small: auto}]{grid_small}@s',
		'uk-child-width-[1-{@!grid_medium: auto}]{grid_medium}@m',
		'uk-child-width-[1-{@!grid_large: auto}]{grid_large}@l',
		'uk-child-width-[1-{@!grid_xlarge: auto}]{grid_xlarge}@xl',
		'uk-flex-center {@grid_column_align}',
		'uk-flex-middle {@grid_row_align}',
		$props['grid_column_gap'] == $props['grid_row_gap'] ? 'uk-grid-{grid_column_gap}' : '[uk-grid-column-{grid_column_gap}] [uk-grid-row-{grid_row_gap}]',
		'uk-grid-divider {@grid_divider} {@!grid_column_gap:collapse} {@!grid_row_gap:collapse}',
		'uk-grid-match {@!grid_masonry}',
	],

	'uk-grid' => $this->expr([
		'masonry: {grid_masonry};',
		'parallax: {grid_parallax};',
	], $props) ?: true,
]);



?>

<?php if ($tags) : ?>
	<?= $el($props, $attrs) ?>



	<?= $this->render("{$__dir}/template-nav", compact('props')) ?>

	<?php if ($filter_horizontal) : ?>
        </div>
        <div>
	<?php endif ?>

	<?= $grid($props) ?>
	<?php foreach ($children as $child) : ?>
		<?= $this->el('div', ['data-tag' => $child->tags], $builder->render($child, ['element' => $props])) ?>
	<?php endforeach ?>
    </div>

	<?php if ($filter_horizontal) : ?>
        </div>
        </div>
	<?php endif ?>

    </div>
<?php else : ?>
	<?= $el($props, $attrs) ?>

	<?= $grid($props) ?>
	<?php foreach ($children as $child) : ?>
        <div><?= $builder->render($child, ['element' => $props]) ?></div>
	<?php endforeach ?>
    </div>

    </div>
<?php endif ?>
