{% extends '@SyliusShop/layout.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('styleguide', null, 'dedi') }}
{% endblock %}

{% block bodyClass %}styleguide{% endblock %}

{% set tab='&nbsp;&nbsp;&nbsp;&nbsp;' %}
{% set alignments=['default', 'left', 'center', 'right', 'justify'] %}

{% block content %}
    <div class="container">
        <h1 class="title-styleguide">Bloc CMS</h1>

        {# //MENU #}
        <nav class="nav-side menu-Styleguide d-xs-none d-sm-none d-xl-block">
            <ul class="list-unstyled">
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockLameText">Lame Text</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockLameCitation">Lame Citation</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockLameSeparateur">Lame Séparateur</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockLameCollectionImages">Lame Collection d'images</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockElementTitre">Elément Titre</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockElementLien">Elément Lien</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockElementMedia">Elément Média</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockBlocText">Bloc Text</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockBlocImageContenu">Bloc Image & Contenu</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockBlocBanniere">Bloc Bannière</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockBlocCollectionBannieres">Bloc Collection de bannières</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockBlocCollectionIcones">Bloc Collection d'icones</a></li>
                <li class="nav-lvl-2"><a class="nav-item smoothscroll" href="#blockBlocCollectionProduits">Bloc Collection de produits</a></li>
            </ul>
        </nav>
        {# MENU// #}

        {# LAME TEXT #}
        <section id="blockLameText">
            <h2 class="h2 title-styleguide">Lame Text</h2>

            {% for align in alignments %}
                <div class="row">
                    {% include '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/text.html.twig' with {
                        element: {
                            text: {
                                align: align
                            },
                            content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque</strong> sed leo quis urna vehicula egestas. Vestibulum et dui dui. Donec orci lorem, euismod vitae massa et, dapibus aliquam justo. Curabitur eget vestibulum justo, ut lobortis ante. In sit amet dui metus. Vestibulum accumsan ac massa id interdum. <a href="http://dedi-agency.com">Nam elementum tincidunt nulla</a> nec pellentesque. Suspendisse potenti. Etiam sollicitudin tempor neque in lobortis. <em>Sed at lacus ullamcorper mauris</em> volutpat ornare. In bibendum varius metus ut fringilla. Nulla tincidunt ante id elit efficitur condimentum. Curabitur sit amet lacus vehicula, elementum justo in, efficitur velit. Vestibulum iaculis nulla non nibh sodales, sed hendrerit tellus volutpat.</p>'
                        }
                    } %}
                </div>
            {% endfor %}
            <pre><code>&lt;section class="block-section block-text-default text-<strong>default/left/center/right/justify</strong>">
                {{ (tab)|raw }}&lt;p>...&lt;/p>
            &lt;/section></code></pre>
        </section>

        {# LAME CITATION #}
        <section id="blockLameCitation">
            <h2 class="h2 title-styleguide">Lame Citation</h2>

            {% for align in alignments %}
                <div class="row">
                    {% include '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/quote.html.twig' with {
                        element: {
                            text: {
                                align: align
                            },
                            content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque</strong> sed leo quis urna vehicula egestas. Vestibulum et dui dui. Donec orci lorem, euismod vitae massa et, dapibus aliquam justo. Curabitur eget vestibulum justo, ut lobortis ante. In sit amet dui metus. Vestibulum accumsan ac massa id interdum. <a href="http://dedi-agency.com">Nam elementum tincidunt nulla</a> nec pellentesque. Suspendisse potenti. Etiam sollicitudin tempor neque in lobortis. <em>Sed at lacus ullamcorper mauris</em> volutpat ornare. In bibendum varius metus ut fringilla. Nulla tincidunt ante id elit efficitur condimentum. Curabitur sit amet lacus vehicula, elementum justo in, efficitur velit. Vestibulum iaculis nulla non nibh sodales, sed hendrerit tellus volutpat.</p>',
                            author: 'Auteur'
                        }
                    } %}
                </div>
            {% endfor %}
            <pre><code>&lt;section class="block-section block-blockquote text-<strong>default/left/center/right/justify</strong>">
                {{ (tab)|raw }}&lt;blockquote class="blockquote">
                    {{ (tab ~ tab)|raw }}&lt;p>...&lt;/p>
                    {{ (tab ~ tab)|raw }}&lt;footer class="blockquote-footer">...&lt;/footer>
                {{ (tab)|raw }}&lt;/blockquote>
            &lt;/section></code></pre>
        </section>

        {# LAME SEPARATEUR #}
        <section id="blockLameSeparateur">
            <h2 class="h2 title-styleguide">Lame Séparateur</h2>

            <div class="row">
                {% include '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/separator.html.twig' with {
                    element: {
                        hidden: false
                    }
                } %}
            </div>
            <div class="row">
                {% include '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/separator.html.twig' with {
                    element: {
                        hidden: true
                    }
                } %}
            </div>
            <pre><code>&lt;section class="block-section block-separator">
                {{ (tab)|raw }}&lt;blockquote class="blockquote">
                {{ (tab~tab)|raw }}&lt;hr <strong>class="invisible"</strong>>
                {{ (tab)|raw }}&lt;/blockquote>
            &lt;/section></code></pre>
        </section>

        {# LAME COLLECTION IMAGES #}
        <section id="blockLameCollectionImages">
            <h2 class="h2 title-styleguide">Lame Collection d'images</h2>

            <div class="row">
                {% include '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/image_collection.html.twig' with {
                    element: {
                        images: [
                            {
                                link: 'http://www.dedi-agency.com',
                                image: 'https://via.placeholder.com/1110x350',
                                alt: 'Image',
                                title: ''
                            },
                            {
                                link: '',
                                image: 'https://via.placeholder.com/1110x450',
                                alt: 'Image',
                                title: ''
                            }
                        ]
                    }
                } %}
            </div>
            <pre><code>&lt;section class="block-section block-slider">
                {{ (tab)|raw }}&lt;div class="default-slider">
                    {{ (tab~tab)|raw }}&lt;div>
                        {{ (tab~tab~tab)|raw }}&lt;a href="">
                            {{ (tab~tab~tab~tab)|raw }}&lt;picture>...&lt;/picture>
                        {{ (tab~tab~tab)|raw }}&lt;/a>
                    {{ (tab~tab)|raw }}&lt;/div>
                    {{ (tab~tab)|raw }}&lt;div>
                        {{ (tab~tab~tab)|raw }}&lt;picture>...&lt;/picture>
                    {{ (tab~tab)|raw }}&lt;/div>
                {{ (tab)|raw }}&lt;/div>
            &lt;/section></code></pre>
        </section>

        {# ELEMENT TITLE #}
        <section id="blockElementTitre">
            <h2 class="h2 title-styleguide">Elément Titre</h2>

            <div class="row">
                {% include '@DediSyliusCmsPlugin/Shop/UiElement/Bases/title.html.twig' with {
                    element: {
                        title: 'Titre',
                        htmlTag: 'h2',
                        subtitle: 'Sous-titre',
                        subtitleHtmlTag: 'h3',
                    }
                } %}
            </div>
            <pre><code>&lt;section class="block-section block-title">
                {{ (tab)|raw }}&lt;h2 class="title-wrapper h2">...&lt;/h2>
                {{ (tab)|raw }}&lt;h3 class="subtitle-wrapper h3">...&lt;/h3>
            &lt;/section></code></pre>
        </section>

        {# ELEMENT LIEN #}
        <section id="blockElementLien">
            <h2 class="h2 title-styleguide">Elément Lien</h2>

            <div class="row">
                {% include '@DediSyliusCmsPlugin/Shop/UiElement/Bases/link.html.twig' with {
                    element: {
                        link: 'http://www.dedi-agency.com',
                        label: 'Bouton'
                    }
                } %}
            </div>
            <pre><code>&lt;section class="block-section block-button">
                {{ (tab)|raw }}&lt;a href="" class="btn btn-primary">...&lt;/a>
            &lt;/section></code></pre>
        </section>

        {# ELEMENT LIEN #}
        <section id="blockElementMedia">
            <h2 class="h2 title-styleguide">Elément Média</h2>

            <div class="row">
                {% include '@DediSyliusCmsPlugin/Shop/UiElement/Bases/media.html.twig' with {
                    element: {
                        type : "pdf",
                        pdf : "https://www.dedi-agency.com/wp-content/uploads/2020/06/info-leadnurturing.pdf"
                    }
                } %}
            </div>
            <div class="row">
                {% include '@DediSyliusCmsPlugin/Shop/UiElement/Bases/media.html.twig' with {
                    element: {
                        type : "image",
                        image : {
                            image: "https://via.placeholder.com/1110x400",
                            alt: "alt",
                            link: "http://www.dedi-agency.com",
                            align: ""
                        }
                    }
                } %}
            </div>
            <div class="row">
                {% include '@DediSyliusCmsPlugin/Shop/UiElement/Bases/media.html.twig' with {
                    element: {
                        type : "youtube",
                        youtubeId: "DK5gAGyclO8",
                        youtubeImage: "https://via.placeholder.com/1110x507",
                    }
                } %}
            </div>
            <pre><code>&lt;section class="block-section">
                {{ (tab)|raw }}&lt;embed src="" width="100%" height="500px">
            &lt;/section>

            &lt;section class="block-section">
                {{ (tab)|raw }}&lt;div>
                    {{ (tab ~ tab)|raw }}&lt;a href="">
                        {{ (tab ~ tab ~ tab)|raw }}&lt;picture>...&lt;/picture>
                    {{ (tab ~ tab)|raw }}&lt;/a>
                {{ (tab)|raw }}&lt;/div>
            &lt;/section>

            &lt;section class="block-section">
                {{ (tab)|raw }}&lt;div class="block-video-wrapper" id="" data-youtube="">
                    {{ (tab ~ tab)|raw }}&lt;div class="wrapper-img-youtube" id="">
                        {{ (tab ~ tab ~ tab)|raw }}&lt;img class="w-100" src="" style="cursor:pointer">
                        {{ (tab ~ tab ~ tab)|raw }}&lt;div class="icon-content">
                            {{ (tab ~ tab ~ tab ~ tab)|raw }}{&#37; include ['@SyliusShop/Icons/play.html.twig', '@SyliusShop/Icons/fontawesome.html.twig'] with { 'icon': 'play' } &#37;}
                        {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                    {{ (tab ~ tab)|raw }}&lt;/div>
                {{ (tab)|raw }}&lt;/div>
            &lt;/section></code></pre>
        </section>

        {# BLOC TEXT #}
        <section id="blockBlocText">
            <h2 class="h2 title-styleguide">Bloc Text</h2>

            {% for align in alignments %}
                <div class="row">
                    {% include '@DediSyliusCmsPlugin/Shop/UiElement/text.html.twig' with {
                        element: {
                            title: {
                                title: 'Titre',
                                htmlTag: 'h2',
                                subtitle: 'Sous-titre',
                                subtitleHtmlTag: 'h3'
                            },
                            text: {
                                align: align,
                                content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque</strong> sed leo quis urna vehicula egestas. Vestibulum et dui dui. Donec orci lorem, euismod vitae massa et, dapibus aliquam justo. Curabitur eget vestibulum justo, ut lobortis ante. In sit amet dui metus. Vestibulum accumsan ac massa id interdum. <a href="http://dedi-agency.com">Nam elementum tincidunt nulla</a> nec pellentesque. Suspendisse potenti. Etiam sollicitudin tempor neque in lobortis. <em>Sed at lacus ullamcorper mauris</em> volutpat ornare. In bibendum varius metus ut fringilla. Nulla tincidunt ante id elit efficitur condimentum. Curabitur sit amet lacus vehicula, elementum justo in, efficitur velit. Vestibulum iaculis nulla non nibh sodales, sed hendrerit tellus volutpat.</p>',
                            },
                            link: {
                                link: 'http://www.dedi-agency.com',
                                label: 'Bouton'
                            }
                        }
                    } %}
                </div>
            {% endfor %}

            <pre><code>&lt;section class="block-section block-text text-<strong>default/left/center/right/justify</strong>">
                {{ (tab)|raw }}&lt;div class="text-wrapper">
                    {{ (tab ~ tab)|raw }}&lt;h2 class="title-wrapper h2">...&lt;/h2>
                    {{ (tab ~ tab)|raw }}&lt;h3 class="subtitle-wrapper display-4">...&lt;/h3>
                    {{ (tab ~ tab)|raw }}&lt;p>...&lt;/p>
                    {{ (tab ~ tab)|raw }}&lt;a href="" class="btn btn-dark">...&lt;/a>
                {{ (tab)|raw }}&lt;/div>
            &lt;/section></code></pre>
        </section>

        {# BLOC IMAGE & CONTENU #}
        <section id="blockBlocImageContenu">
            <h2 class="h2 title-styleguide">Bloc Image & Contenu</h2>

            <div class="row">
                {% include '@DediSyliusCmsPlugin/Shop/UiElement/text_and_image.html.twig' with {
                    element: {
                        imageBeforeText: false,
                        title: {
                            title: 'Titre',
                            htmlTag: 'h2',
                            subtitle: 'Sous-titre',
                            subtitleHtmlTag: 'h3'
                        },
                        text: {
                            content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque</strong> sed leo quis urna vehicula egestas. Vestibulum et dui dui. Donec orci lorem, euismod vitae massa et, dapibus aliquam justo. Curabitur eget vestibulum justo, ut lobortis ante. In sit amet dui metus. Vestibulum accumsan ac massa id interdum. <a href="http://dedi-agency.com">Nam elementum tincidunt nulla</a> nec pellentesque. Suspendisse potenti. Etiam sollicitudin tempor neque in lobortis. <em>Sed at lacus ullamcorper mauris</em> volutpat ornare. In bibendum varius metus ut fringilla. Nulla tincidunt ante id elit efficitur condimentum. Curabitur sit amet lacus vehicula, elementum justo in, efficitur velit. Vestibulum iaculis nulla non nibh sodales, sed hendrerit tellus volutpat.</p>',
                        },
                        image: {
                            image: 'https://via.placeholder.com/540x450',
                            alt: 'Image',
                            title: ''
                        },
                        link: {
                            link: 'http://www.dedi-agency.com',
                            label: 'Bouton'
                        }
                    }
                } %}
            </div>
            <div class="row">
                {% include '@DediSyliusCmsPlugin/Shop/UiElement/text_and_image.html.twig' with {
                    element: {
                        imageBeforeText: true,
                        title: {
                            title: 'Titre',
                            htmlTag: 'h2',
                            subtitle: 'Sous-titre',
                            subtitleHtmlTag: 'h3'
                        },
                        text: {
                            content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque</strong> sed leo quis urna vehicula egestas. Vestibulum et dui dui. Donec orci lorem, euismod vitae massa et, dapibus aliquam justo. Curabitur eget vestibulum justo, ut lobortis ante. In sit amet dui metus. Vestibulum accumsan ac massa id interdum. <a href="http://dedi-agency.com">Nam elementum tincidunt nulla</a> nec pellentesque. Suspendisse potenti. Etiam sollicitudin tempor neque in lobortis. <em>Sed at lacus ullamcorper mauris</em> volutpat ornare. In bibendum varius metus ut fringilla. Nulla tincidunt ante id elit efficitur condimentum. Curabitur sit amet lacus vehicula, elementum justo in, efficitur velit. Vestibulum iaculis nulla non nibh sodales, sed hendrerit tellus volutpat.</p>',
                        },
                        image: {
                            image: 'https://via.placeholder.com/540x450',
                            alt: 'Image',
                            title: ''
                        },
                        link: {
                            link: 'http://www.dedi-agency.com',
                            label: 'Bouton'
                        }
                    }
                } %}
            </div>

            <pre><code>&lt;section class="block-section block-img-text <strong>left/right</strong>">
                {{ (tab)|raw }}&lt;div class="row">
                    {{ (tab ~ tab)|raw }}&lt;div class="col-md-6">
                        {{ (tab ~ tab ~ tab)|raw }}&lt;div class="img-wrapper">
                            {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;picture>...&lt;/div>
                        {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                    {{ (tab ~ tab)|raw }}&lt;/div>
                    {{ (tab ~ tab)|raw }}&lt;div class="col-md-6">
                        {{ (tab ~ tab ~ tab)|raw }}&lt;div class="text-wrapper">
                            {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;h2 class="title-wrapper h2">...&lt;/h2>
                            {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;h3 class="subtitle-wrapper h3">...&lt;/h3>
                            {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;p>...&lt;/p>
                            {{ (tab ~ tab ~ tab ~ tab)|raw }}&lt;a href="" class="btn btn-outline-primary">...&lt;/a>
                        {{ (tab ~ tab ~ tab)|raw }}&lt;/div>
                    {{ (tab ~ tab)|raw }}&lt;/div>
                {{ (tab)|raw }}&lt;/div>
            &lt;/section></code></pre>
        </section>

        {# BLOC BANNIERE #}
        <section id="blockBlocBanniere">
            <h2 class="h2 title-styleguide">Bloc Bannière</h2>

            <div class="row">
                {% include '@DediSyliusCmsPlugin/Shop/UiElement/banner.html.twig' with {
                    element: {
                        style: 'dark',
                        title: {
                            title: 'Titre',
                            htmlTag: 'h2',
                            subtitle: 'Sous-titre',
                            subtitleHtmlTag: 'h3'
                        },
                        text: {
                            content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque</strong> sed leo quis urna vehicula egestas. Vestibulum et dui dui.</p>',
                        },
                        image: {
                            image: 'https://via.placeholder.com/1110x470',
                            alt: 'Image',
                            title: ''
                        },
                        link: {
                            link: 'http://www.dedi-agency.com',
                            label: 'Bouton'
                        }
                    }
                } %}
            </div>
            <div class="row">
                {% include '@DediSyliusCmsPlugin/Shop/UiElement/banner.html.twig' with {
                    element: {
                        style: 'light',
                        title: {
                            title: 'Titre',
                            htmlTag: 'h2',
                            subtitle: 'Sous-titre',
                            subtitleHtmlTag: 'h3'
                        },
                        text: {
                            content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque</strong> sed leo quis urna vehicula egestas. Vestibulum et dui dui.</p>',
                        },
                        image: {
                            image: 'https://via.placeholder.com/1110x470/333',
                            alt: 'Image',
                            title: ''
                        },
                        link: {
                            link: 'http://www.dedi-agency.com',
                            label: 'Bouton'
                        }
                    }
                } %}
            </div>
            <pre><code>&lt;section class="block-banner <b>dark/light</b>">
                    {{ (tab)|raw }}&lt;div class="img-wrapper">
                        {{ (tab ~ tab)|raw }}&lt;picture>...&lt;/picture>
                    {{ (tab)|raw }}&lt;/div>
                    {{ (tab)|raw }}&lt;div class="text-wrapper">
                        {{ (tab ~ tab)|raw }}&lt;h2 class="title-wrapper display-1">...&lt;/h2>
                        {{ (tab ~ tab)|raw }}&lt;h3 class="subtitle-wrapper subtitle">...&lt;/h3>
                        {{ (tab ~ tab)|raw }}&lt;p>...&lt;/p>
                        {{ (tab ~ tab)|raw }}&lt;a href="" class="btn btn-dark">...&lt;/a>
                    {{ (tab)|raw }}&lt;/div>
                &lt;/section></code></pre>
        </section>

        {# BLOC COLLECTION BANNIERES #}
        <section id="blockBlocCollectionBannieres">
            <h2 class="h2 title-styleguide">Bloc Collection de bannières</h2>

            <div class="row">
                {% include '@DediSyliusCmsPlugin/Shop/UiElement/banner_collection.html.twig' with {
                    element: {
                        collection: [
                            {
                                style: 'dark',
                                title: {
                                title: 'Titre',
                                htmlTag: 'h2',
                                subtitle: 'Sous-titre',
                                subtitleHtmlTag: 'h3'
                            },
                                text: {
                                content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque</strong> sed leo quis urna vehicula egestas. Vestibulum et dui dui.</p>',
                            },
                                image: {
                                image: 'https://via.placeholder.com/1110x470',
                                alt: 'Image',
                                title: ''
                            },
                                link: {
                                link: 'http://www.dedi-agency.com',
                                label: 'Bouton'
                            }
                            },
                            {
                                style: 'light',
                                title: {
                                title: 'Titre',
                                htmlTag: 'h2',
                                subtitle: 'Sous-titre',
                                subtitleHtmlTag: 'h3'
                            },
                                text: {
                                content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque</strong> sed leo quis urna vehicula egestas. Vestibulum et dui dui.</p>',
                            },
                                image: {
                                image: 'https://via.placeholder.com/1110x470/333',
                                alt: 'Image',
                                title: ''
                            },
                                link: {
                                link: 'http://www.dedi-agency.com',
                                label: 'Bouton'
                            }
                            },
                        ]
                    }
                } %}
            </div>
            <pre><code>&lt;section class="block-banner <b>dark/light</b>">
                    {{ (tab)|raw }}&lt;div class="img-wrapper">
                        {{ (tab ~ tab)|raw }}&lt;picture>...&lt;/picture>
                    {{ (tab)|raw }}&lt;/div>
                    {{ (tab)|raw }}&lt;div class="text-wrapper">
                        {{ (tab ~ tab)|raw }}&lt;h2 class="title-wrapper display-1">...&lt;/h2>
                        {{ (tab ~ tab)|raw }}&lt;h3 class="subtitle-wrapper subtitle">...&lt;/h3>
                        {{ (tab ~ tab)|raw }}&lt;p>...&lt;/p>
                        {{ (tab ~ tab)|raw }}&lt;a href="" class="btn btn-dark">...&lt;/a>
                    {{ (tab)|raw }}&lt;/div>
                &lt;/section></code></pre>
        </section>

        {# BLOC COLLECTION ICONES #}
        <section id="blockBlocCollectionIcones">
            <h2 class="h2 title-styleguide">Bloc Collection d'icones</h2>

            <div class="row">
                {% include '@DediSyliusCmsPlugin/Shop/UiElement/text_and_icon_collection.html.twig' with {
                    element: {
                        collection: [
                            {
                                link: {
                                link: 'http://www.dedi-agency.com'
                            },
                                icon: {
                                icon: 'truck'
                            },
                                text: {
                                content: 'Lorem ipsum dolor sit amet'
                            }
                            },
                            {
                                icon: {
                                icon: 'lock'
                            },
                                text: {
                                content: 'Lorem ipsum dolor sit amet'
                            }
                            },
                            {
                                icon: {
                                icon: 'thumbs-up'
                            },
                                text: {
                                content: 'Lorem ipsum dolor sit amet'
                            }
                            },
                            {
                                icon: {
                                icon: 'headset'
                            },
                                text: {
                                content: 'Lorem ipsum dolor sit amet'
                            }
                            }
                        ]
                    }
                } %}
            </div>
            <pre><code>&lt;section class="block-section block-icon-text-row">
                    {{ (tab)|raw }}&lt;a href="" class="block-icon-text">
                        {{ (tab ~ tab)|raw }}&lt;span class="icon-pattern-wrapper pattern-2">...&lt;/span>
                        {{ (tab ~ tab ~ tab)|raw }}&lt;i class="fa-icon">&lt;/i>
                        {{ (tab ~ tab)|raw }}&lt;/span>
                    {{ (tab)|raw }}&lt;/a>
                    {{ (tab)|raw }}&lt;div class="block-icon-text">
                        {{ (tab ~ tab)|raw }}&lt;span class="icon-pattern-wrapper pattern-2">...&lt;/span>
                        {{ (tab ~ tab ~ tab)|raw }}&lt;svg />
                        {{ (tab ~ tab)|raw }}&lt;/span>
                    {{ (tab)|raw }}&lt;/div>
                &lt;/section></code></pre>
        </section>

        {# BLOC COLLECTION PRODUITS #}
        <section id="blockBlocCollectionProduits">
            <h2 class="h2 title-styleguide">Bloc Collection de produits</h2>

            <div class="row">
                <div class="col-12">
                    <section class="block-section block-product-collection">
                        <div class="title-wrapper">
                            <h2 class="h2">Liste manuelle de produits</h2>
                        </div>

                        <div class="cross-slider slick-arrow-btn">
                            {% for i in 1..8 %}
                            <div class="item">
                                <div class="col-12">
                                    <section class="block-section block-product">
                                        <div class="product-box-container">
                                            {% if i%2==0 %}
                                                <div class="product-box-tag">
                                                    <span class="badge badge-secondary">{{ 'app.ui.product.tag.promo'|trans }}</span>
                                                </div>
                                            {% endif %}

                                            <a href="/fr_FR/bonnet-vert" class="product-box-image-wrapper">
                                                <picture class="media-object">
                                                    <img src="//via.placeholder.com/280" alt="T-shirt bull" class="w-100">
                                                </picture>
                                            </a>

                                            <div class="product-box-text-wrapper">
                                                <a href="/fr_FR/bonnet-vert" class="product-box-name">
                                                    <h2 class="product-box-title">
                                                        {% if i==3 %}
                                                            Nom court
                                                        {% elseif i==4 %}
                                                            Nom de produit un peu plus long qui passe sur plusieurs lignes
                                                        {% else %}
                                                            Nom qui peut prendre plusieurs ligne
                                                        {% endif %}
                                                    </h2>

                                                    <p class="product-box-complementary-name">
                                                        {% if i==1 %}
                                                            Marque
                                                        {% else %}
                                                            Nom complémentaire
                                                        {% endif %}
                                                    </p>
                                                </a>

                                                {% if i>2 %}
                                                    <a href="/fr_FR/bonnet-vert#product-reviews" class="product-box-review review-rating">
                                                        {% include '@SyliusShop/Product/_starRating.html.twig' with {product: {averageRating:4}} %}
                                                        <span class="product-box-review-nb">(2)</span>
                                                    </a>
                                                {% endif %}

                                                <div class="product-box-price-wrapper price-wrapper right">
                                                    {% if i%2==0 %}
                                                        <span class="price promo"><span>3</span>,54 €</span>
                                                        <span class="price-old"><span>5</span>,00 €</span>
                                                    {% else %}
                                                        <span class="price"><span>3</span>,54 €</span>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="cross-slider-dots"></div>

                        <div class="btn-wrapper">
                            <a class="btn btn-primary" href="http://www.dedi-agency.com" target="_blank">
                                Bouton
                            </a>
                        </div>
                    </section>
                </div>
            </div>
            <div class="row">
                {% include '@DediSyliusCmsPlugin/Shop/UiElement/product_auto.html.twig' with {
                    element: {
                        title: {
                            title: 'Liste automatique de produits',
                            htmlTag: 'h2',
                            subtitle: 'Derniers articles de la boutique',
                            subtitleHtmlTag: 'h3',
                        },
                        numberOfProducts: 8,
                        latest_by_taxon_configuration: {
                            taxon: null
                        },
                        rule: 'latest_by_channel'
                    }
                } %}
            </div>

            <pre><code>&lt;section class="block-section block-product-collection">
                    {{ (tab)|raw }}&lt;div class="title-wrapper">
                        {{ (tab ~ tab)|raw }}&lt;h2 class="h2">...&lt;/h2>
                    {{ (tab)|raw }}&lt;/div>
                    {{ (tab)|raw }}&lt;div class="subtitle-wrapper">
                        {{ (tab ~ tab)|raw }}&lt;h3 class="h3">...&lt;/h3>
                    {{ (tab)|raw }}&lt;/div>
                    {{ (tab)|raw }}&lt;div class="cross-slider slick-arrow-btn">
                        {{ (tab ~ tab)|raw }}&lt;div class="item">
                            {{ (tab ~ tab ~ tab)|raw }}...
                        {{ (tab ~ tab)|raw }}&lt;/div>
                        {{ (tab ~ tab)|raw }}&lt;div class="item">
                            {{ (tab ~ tab ~ tab)|raw }}...
                        {{ (tab ~ tab)|raw }}&lt;/div>
                    {{ (tab)|raw }}&lt;/div>
                    {{ (tab)|raw }}&lt;div class="btn-wrapper">
                        {{ (tab ~ tab)|raw }}&lt;a class="btn btn-primary" href="">...&lt;/a>
                    {{ (tab)|raw }}&lt;/div>
                &lt;/section></code></pre>
        </section>
    </div>
{% endblock %}
