{$style = $instance->getProperty('listStyle')}

{if $isPreview}
  <div class="opc-ProductStream{if $portlet->showLicenceAlert()} alert alert-danger" role="alert{/if}"
    style="{$instance->getStyleString()}">
    {if $portlet->showLicenceAlert()}
      <p>{$portlet->showLicenceInfo()}</p>
      {assign var=dHintLink value="<a href='{$portlet->cinUrl()}'>{$portlet->cinUrlText()}</a>"}
      {assign var=hintText value=__("po_visit_cin")}
      {$dHint = sprintf($hintText, $dHintLink)}
      <p>{$dHint}</p>
    {else}
      {image class="img-responsive" alt='ProductStream' src=$portlet->getBaseUrl()|cat:'preview.'|cat:$style|cat:'.png'}
    {/if}
  </div>
{else}
  {$categorylist = $portlet->getCategories($instance)}

  {if $style === 'list' || $style === 'gallery'}
    {if $style === 'list'}
      {$grid = '12'}
      {$eqHeightClasses = ''}
    {else}
      {$grid   = '6'}
      {$gridmd = '4'}
      {$gridxl = '3'}
      {$eqHeightClasses = 'row-eq-height row-eq-img-height'}
    {/if}
    {if $inContainer === false}<div class="container-fluid">{/if}
      {assign var="classList" value="{$style|cat:' '|cat:$eqHeightClasses|cat:' product-list opc-ProductStream opc-ProductStream-'|cat:$style|cat:' '|cat:$instance->getStyleClasses()}"}
      {row class="{$classList}"
      style="{$instance->getStyleString()}"}
      {foreach $categorylist as $category}
        {col cols={$grid} md="{if isset($gridmd)}{$gridmd}{/if}" xl="{if isset($gridxl)}{$gridxl}{/if}"
        class="product-wrapper {if !($style === 'list' && $category@last)}mb-4{/if}"}
        {if $style === 'list'}
          {include file='./res/portlet_item_list.tpl' tplscope=$style isOPC=true class='thumbnail'}
        {elseif $style === 'gallery'}
          {include file='./res/portlet_item_box.tpl' tplscope=$style class='thumbnail'}
        {/if}
        {/col}
      {/foreach}
      {/row}
      {if $inContainer === false}</div>{/if}
  {elseif $style === 'simpleSlider'}
    <div id="{$instance->getUid()}"
      class="carousel carousel-arrows-inside evo-slider slick-lazy opc-ProductStream opc-ProductStream-{$style} slick-type-product"
      data-slick-type="product-slider" style="{$instance->getStyleString()}">
      {foreach $categorylist as $category}
        <div class="product-wrapper">
          {link href=$category['C']->getURL()}
          {$imgAlt = $category['C']->getImageAlt()}
          <div class="subcategories-image d-none d-md-flex justify-content-center">
            {if empty($imgAlt->cWert)}
              {assign var="altValue" value="{$category['C']->getName()}"}
            {else}{$imgAlt->cWert}
              {assign var="altValue" value="{$imgAlt->cWert}"}
            {/if}
            {image fluid=true lazy=true webp=false src=$category['C']->getKategorieBild() alt="{$altValue}"}
          </div>
          {/link}
        </div>
      {/foreach}
    </div>
  {elseif $style === 'slider'}
    <div id="{$instance->getUid()}"
      class="carousel carousel-arrows-inside evo-slider slick-lazy opc-ProductStream opc-ProductStream-{$style} slick-type-product"
      data-slick-type="product-slider" style="{$instance->getStyleString()}">
      {foreach $categorylist as $category}
        <div class="product-wrapper">
          {link href=$category['C']->getURL()}
          {$imgAlt = $category['C']->getImageAlt()}
          <div class="subcategories-image d-none d-md-flex justify-content-center">
            {if empty($imgAlt->cWert)}
              {assign var="altValue" value="{$category['C']->getName()}"}
            {else}{$imgAlt->cWert}
              {assign var="altValue" value="{$imgAlt->cWert}"}
            {/if}
            {image fluid=true lazy=true webp=false src=$category['C']->getKategorieBild() alt="{$altValue}"}
          </div>
          {/link}
          <div>
            <div class="caption text-center">
              {link href=$category['C']->getURL()}
              {$category['C']->getName()}
              {/link}
            </div>
          </div>
        </div>
      {/foreach}
    </div>
  {/if}
{/if}
