{* ============================
   VARIABLES
============================ *}

{assign var="nbCategories" value=$categories|@count}
{assign var="number" value=1}
{assign var="style" value=$group->style|default:'categorie1'}

{* ============================
   COLONNES SELON LE STYLE
============================ *}

{if $style == "categorie3"}
    {assign var="nbCol" value=12}
{else}
    {assign var="nbCol" value=12 / $nbCategories}
{/if}

{if $style == "categorie2"}
    {assign var="nbColReaX2" value=$nbCol * 2}
{else}
    {assign var="nbColReaX2" value=12}
{/if}

{* ============================
   BLOCK CATEGORY
============================ *}

<div class="container category total-{$nbCategories} {$style}">
    <div class="row">
    

        {foreach from=$categories item=categorie}

            {if $categorie['isVisible']}

                <div class="col-xs-12 col-sm-{$nbColReaX2} col-md-{$nbCol} box{$number} category-container-{$style}">

                    <div class="category-card">

                        {if !empty($categorie['image'])}
                            <img
                                src="{$categorie['image']}"
                                alt="{$categorie['title']|escape:'html'}"
                            />
                        {/if}

                        <div class="category-overlay">
                            {if !empty($categorie['subTitle'])}
                                <span>{$categorie['subTitle']}</span>
                            {/if}

                            <h2>{$categorie['title']}</h2>

                            {if !empty($categorie['url'])}
                                <a href="{$categorie['url']}" class="btn">
                                    Découvrir
                                </a>
                            {/if}
                        </div>

                    </div>
                </div>

                {assign var="number" value=$number+1}

            {/if}

        {/foreach}

    </div>
</div>
