<div class="flex">    
 <template x-for="item in items">
 <template x-if="item">
 <div class="item" :id="'list-item-' + item.id">
 <a :href="item.langUrl + location.search + '#' + item.id" class="item-link">
 <img :src="item.img_thumb" :alt="item.pagetitle">
 </a>

 <div class="name" x-text="item.pagetitle"></div>

 <div class="price">
 <template x-if="item.oldPrice > 0">
 <div>
 <span class="old">
 <span x-text="item.oldPrice"></span> <?php echo \htmlentities(__('site.currency')??'', ENT_QUOTES, 'UTF-8', false); ?>

 </span>

 <div class="new">
 <span x-text="item.price"></span> <?php echo \htmlentities(__('site.currency')??'', ENT_QUOTES, 'UTF-8', false); ?>

 </div>
 </div>
 </template>

 <template x-if="! item.oldPrice && item.price">
 <div>
 <span x-text="item.price"></span> <?php echo \htmlentities(__('site.currency')??'', ENT_QUOTES, 'UTF-8', false); ?>

 </div>
 </template>
 </div>

 <div class="colors">
 <template x-for="(colorItem, colorKey) in item.productColor">
 <template x-if="colorItem.options !== undefined">
 <div class="color-item">
 <span
 :style="{ background: colorItem.options.background }"></span>
 </div>
 </template>
 </template>
 </div>
 </div>
 </template>
 </template>
</div>

<div class="catalog-page flex" x-show="!count" style="display: none">
 <?php echo $this->runChild('category.empty'); ?>
</div>
