<?php

$imageVersionUpdate = 3;

$products = [
    [
        'name' => 'Impress Straight',
        'img'  => 'impress-straight.jpg',
        'link' => '/impress-straight/'
    ],
    [
        'name' => 'Impress Curved',
        'img'  => 'impress-curved.jpg',
        'link' => '/impress-curved/'
    ],
    [
        'name' => 'Impress Connectors',
        'img'  => 'impress_connectors.jpg',
        'link' => '/impress-connectors/'
    ],
    [
        'name' => 'Impress Options',
        'img'  => 'impress_options.jpg',
        'link' => '/impress-options/'
    ],
    [
        'name' => 'Fabric',
        'img'  => 'fabric.jpg',
        'link' => '/fabric/'
    ],
    [
        'name' => 'Fabric \'Premium\' Straight',
        'img'  => 'fabric_premium_straight.jpg',
        'link' => '/fabric-premium-straight/'
    ],
    [
        'name' => 'Fabric \'Premium\' Curved',
        'img'  => 'fabric_premium_curved.jpg',
        'link' => '/fabric-premium-curved/'
    ],
    [
        'name' => 'Magnetic',
        'img'  => 'magnetic.jpg',
        'link' => '/magnetic/'
    ],
    [
        'name' => 'Tower',
        'img'  => 'tower.jpg',
        'link' => '/tower/'
    ],
    [
        'name' => 'Magnetic New Visuals',
        'img'  => 'new_visuals.jpg',
        'link' => '/magnetic-new-visuals/'
    ],
    [
        'name' => 'Tower New Visuals',
        'img'  => 'tower_visuals.jpg',
        'link' => '/tower-new-visuals/'
    ],
    [
        'name' => 'Bag for Visuals',
        'img'  => 'bag.jpg',
        'link' => '/magnetic-bag-for-visuals/'
    ],
    [
        'name' => 'Magnetic Table Top',
        'img'  => 'table_top.jpg',
        'link' => '/magnetic-table-top/'
    ],
    [
        'name' => 'Magnetic Backside',
        'img'  => 'backside.jpg',
        'link' => '/magnetic-backside/'
    ],


];
?>

<ul id="producten" class="productCategorie">
    <?php
    foreach ($products as $key => $product)
    {
        ?>
        <li <?php if($key % 4 == 0)
        { ?> class="leftSide" <?php } ?> >
            <?php if($key % 4 == 0)
            { ?>
                <div class="shadow"></div> <?php } ?>

            <div class="content">
                <img src="/img/product_overzicht/pop_ups/<?php echo $product['img']; ?>?v=<?php echo($imageVersionUpdate); ?>"/>
                <div class="button">
                    <a class="ctaButton buttonDown">
                        <span class="left"><span
                                    class="text"><?php echo($_SESSION['taal_table']['text']['productdetails']); ?></span><span
                                    class="up"></span><span class="hover"></span></span>
                        <span class="right"><span class="icon arrowRight"></span><span class="up"></span><span
                                    class="hover"></span></span>
                    </a>
                </div>
                <div class="subitemList">
                    <ul>
                        <li class="title target productDetail"><a class="saveViewportProductOverview"
                                                                  href="<?php echo('/' . $_SESSION['taal_table']['language'] . '/' . $_SESSION['taal_table']['url']['producten']); ?>/pop-ups<?php echo $product['link']; ?>"><?php echo $product['name']; ?></a><span
                                    class="icon"></span></li>
                    </ul>
                </div>
            </div>
        </li>
        <?php
    }
    ?>
</ul>