{% extends '@DediSyliusTheme/DesignSystem/layout.html.twig' %}

{% set alignments=['', 'left', 'center', 'right', 'justify'] %}

{% block content %}
    <div class="ds-container cms-wrapper">
        <h2 class="ds-title">{{ 'app.design_system.cms.title'|trans }}</h2>
        <p class="ds-text">{{ 'app.design_system.cms.desc'|trans }}</p>

        {# LAME SEPARATEUR #}
        <h3 class="ds-subtitle" id="blockLameSeparator">{{ 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.title'|trans }} <button class="ds-btn-code" rel=".example-lame-separator"></button></h3>
        <section class="ds-example example-lame-separator">
            <div class="html">
                <section class="block-section block-separator">
                    <hr>
                </section>
            </div>
            <pre><code>&lt;section class="block-section block-separator">
    &lt;hr>
&lt;/section></code></pre>
        </section>
        <section class="ds-example example-lame-separator">
            <div class="html">
                <section class="block-section block-separator">
                    <hr class="invisible">
                </section>
            </div>
            <pre><code>&lt;section class="block-section block-separator">
    &lt;hr class="invisible">
&lt;/section></code></pre>
        </section>

        {# TITRE #}
        <h3 class="ds-subtitle" id="blockTitle">{{ 'dedi_cms.ui_element.title.info.title'|trans }} <button class="ds-btn-code" rel=".example-title"></button></h3>
        {% for align in alignments %}
            {% if align != 'justify' and align != '' %}
                <section class="ds-example example-title">
                    <div class="html">
                        <div class="row">
                            {% include '@DediSyliusCmsPlugin/Shop/UiElement/Bases/title.html.twig' with {
                                element: {
                                    align: align,
                                    title: 'Titre',
                                    htmlTag: 'h2',
                                    subtitle: 'Sous-titre',
                                    subtitleHtmlTag: 'h3',
                                }
                            } %}
                        </div>
                    </div>
                    <pre><code>&lt;section class="block-section block-title text-{{ align }}">
    &lt;h2 class="title-wrapper h2">...&lt;/h2>
    &lt;h3 class="subtitle-wrapper h3">...&lt;/h3>
&lt;/section></code></pre>
                </section>
            {% endif %}
        {% endfor %}

        {# LIEN #}
        <h3 class="ds-subtitle" id="blockLink">{{ 'dedi_cms.ui_element.link.info.title'|trans }} <button class="ds-btn-code" rel=".example-link"></button></h3>
        {% for align in alignments %}
            {% if align != 'justify' and align != '' %}
                <section class="ds-example example-link">
                    <div class="html">
                        <div class="row">
                            {% include '@DediSyliusCmsPlugin/Shop/UiElement/Bases/link.html.twig' with {
                                element: {
                                    align: align,
                                    label: 'Bouton',
                                    link: '#',
                                }
                            } %}
                        </div>
                    </div>
                    <pre><code>&lt;section class="block-section block-button text-{{ align }}">
    &lt;a href="" class="btn btn-secondary">...&lt;/a>
&lt;/section></code></pre>
                </section>
            {% endif %}
        {% endfor %}

        {# TEXTE #}
        <h3 class="ds-subtitle" id="blockText">{{ 'dedi_cms.ui_element.text.info.title'|trans }} <button class="ds-btn-code" rel=".example-text"></button></h3>
        {% for align in alignments %}
            {% if align != 'justify' and align != '' %}
            <section class="ds-example example-text">
                <div class="html">
                    <div class="row">
                        {% include '@DediSyliusCmsPlugin/Shop/UiElement/text.html.twig' with {
                            element: {
                                width: 100,
                                color: align == '' ? 'light' : 'dark',
                                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>
                </div>
                <pre><code>&lt;section class="block-section block-text text-{{ align|default('default') }}">
    &lt;div class="text-wrapper container">
        &lt;h2 class="title-wrapper">...&lt;/h2>
        &lt;h3 class="subtitle-wrapper">...&lt;/h3>
        &lt;p>...&lt;/p>
        &lt;a href="" class="btn btn-{% if align == '' %}light{% else %}secondary{% endif %}">...&lt;/a>
    &lt;/div>
&lt;/section></code></pre>
            </section>
            {% endif %}
        {% endfor %}

        {# CITATION #}
        <h3 class="ds-subtitle" id="blockLameCitation">{{ 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.quote.title'|trans }} <button class="ds-btn-code" rel=".example-quote"></button></h3>
        {% for align in alignments %}
            {% if align != 'justify' and align != '' %}
                <section class="ds-example example-quote">
                    <div class="row">
                        {% include '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/quote.html.twig' with {
                            element: {
                                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>
                    <pre><code>&lt;section class="block-section block-blockquote">
                &lt;blockquote class="blockquote">
                    &lt;p>...&lt;/p>
                    &lt;footer class="blockquote-footer">...&lt;/footer>
                &lt;/blockquote>
            &lt;/section></code></pre>
                </section>
            {% endif %}
        {% endfor %}

        {# ELEMENT MEDIA #}
        <h3 class="ds-subtitle" id="blockMedia">{{ 'dedi_cms.ui_element.media.info.title'|trans }} <button class="ds-btn-code" rel=".example-media"></button></h3>
        <section class="ds-example example-media">
            <div class="html">
                {% 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>
            <pre>
                <code>&lt;section class="block-section">
    &lt;embed src="" width="100%" height="500px">
&lt;/section></code>
            </pre>
        </section>
        <section class="ds-example example-media">
            <div class="html">
                {% 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"
                        }
                    }
                } %}
            </div>
            <pre>
                <code>&lt;section class="block-section fullwidth">
    &lt;a href="">
        &lt;picture class="media-object">...&lt;/picture>
    &lt;/a>
&lt;/section>

&lt;section class="block-section fullwidth">
    &lt;picture class="media-object">...&lt;/picture>
&lt;/section></code>
            </pre>
        </section>
        <section class="ds-example example-media">
            <div class="html">
                {% 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 fullwidth">
    &lt;div class="block-video-wrapper" id="block-youtube-..." data-youtube="...">
        &lt;div class="wrapper-img-youtube" id="wrapper-img-youtube-...">
            &lt;img class="w-100" src="" style="cursor:pointer">
            &lt;div class="icon-content">
                &lt;i class="fa fa-play">&lt;/i>
            &lt;/div>
        &lt;/div>
        &lt;div style="display:none" class="wrapper-iframe-youtube">&lt;/div>
    &lt;/div>
&lt;/section></code>
            </pre>
        </section>
        <section class="ds-example example-media">
            <div class="html">
                <div class="row">
                    {% include '@DediSyliusCmsPlugin/Shop/UiElement/Bases/media.html.twig' with {
                        element: {
                            width: 50,
                            type : "pdf",
                            pdf : "https://www.dedi-agency.com/wp-content/uploads/2020/06/info-leadnurturing.pdf"
                        }
                    } %}
                    {% include '@DediSyliusCmsPlugin/Shop/UiElement/Bases/media.html.twig' with {
                        element: {
                            width: 50,
                            type : "image",
                            image : {
                                image: "https://via.placeholder.com/520x500",
                                alt: "alt",
                                link: ""
                            }
                        }
                    } %}
                </div>
            </div>
            <pre>
                <code>&lt;div class="row">
    &lt;div class="col-md-6">
        &lt;section class="block-section">
            &lt;embed src="" width="100%" height="500px">
        &lt;/section>
    &lt;/div>
    &lt;div class="col-md-6">
        &lt;section class="block-section">
            &lt;picture class="media-object">...&lt;/picture>
        &lt;/section>
    &lt;/div>
&lt;/div></code>
            </pre>
        </section>

        {# MEDIA & TEXTE #}
        <h3 class="ds-subtitle" id="blockMediaText">{{ 'dedi_cms.ui_element.text_and_media.title'|trans }} <button class="ds-btn-code" rel=".example-media-text"></h3>
        <section class="ds-example example-media-text">
            <div class="html">
                {% include '@DediSyliusTheme/Blocks/_block-img-text.html.twig' with {
                    element: {
                        text : {
                            title: {
                                title: 'Lorem ipsum',
                                htmlTag: 'h2',
                                class: 'h2',
                                subtitle: 'Lorem ipsum',
                                subtitleHtmlTag: 'h2',
                                subtitleClass: 'h2'
                            },
                            link : {
                                link: 'http://www.dedi-agency.com',
                                label: 'Lorem ipsum'
                            },
                            text : {
                                align: 'left',
                                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>'
                            }
                        },
                        mediaBeforeText: true,
                        media: {
                            type : "image",
                            image : {
                                image: "https://via.placeholder.com/510x400",
                                alt: "alt",
                                link: "http://www.dedi-agency.com",
                                align: ""
                            }
                        }
                    }
                } %}
            </div>
            <pre><code>&lt;section class="block-section block-media-text left">
    &lt;div class="row">
        &lt;div class="col-md-6">
            &lt;section class="block-section block-media">
                ...
            &lt;/section>
        &lt;/div>
        &lt;div class="col-md-6">
            &lt;section class="block-section block-text">
                ...
            &lt;/section>
        &lt;/div>
    &lt;/div>
&lt;/section></code></pre>
        </section>
        <section class="ds-example example-media-text">
            <div class="html">
                {% include '@DediSyliusTheme/Blocks/_block-img-text.html.twig' with {
                    element: {
                        text : {
                            title: {
                                title: 'Lorem ipsum',
                                htmlTag: 'h2',
                                class: 'h2',
                                subtitle: 'Lorem ipsum',
                                subtitleHtmlTag: 'h2',
                                subtitleClass: 'h2'
                            },
                            link : {
                                link: 'http://www.dedi-agency.com',
                                label: 'Lorem ipsum'
                            },
                            text : {
                                align: 'right',
                                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>'
                            }
                        },
                        mediaBeforeText: false,
                        media: {
                            type : "image",
                            image : {
                                image: "https://via.placeholder.com/510x400",
                                alt: "alt",
                                link: "http://www.dedi-agency.com",
                                align: ""
                            }
                        }
                    }
                } %}
            </div>
            <pre><code>&lt;section class="block-section block-media-text right">
    &lt;div class="row">
        &lt;div class="col-md-6">
            &lt;section class="block-section block-media">
                ...
            &lt;/section>
        &lt;/div>
        &lt;div class="col-md-6">
            &lt;section class="block-section block-text">
                ...
            &lt;/section>
        &lt;/div>
    &lt;/div>
&lt;/section></code></pre>
        </section>

        {# BANNIERES #}
        <h3 class="ds-subtitle" id="blockBanners">{{ 'dedi_cms.ui_element.banner_collection.info.title'|trans }} <button class="ds-btn-code" rel=".example-banners"></button></h3>
        <section class="ds-example example-banners">
            <div class="html">
                <div class="row">
                    {% include '@DediSyliusCmsPlugin/Shop/UiElement/banner_collection.html.twig' with {
                        element: {
                            collection: [
                                {
                                    style: 'light',
                                    text: {
                                        align: '',
                                        content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque</strong> sed leo quis urna vehicula egestas. Vestibulum et dui dui.</p>'
                                    },
                                    title: {
                                        title: 'Lorem ipsum',
                                        htmlTag: 'h2',
                                        class: 'h2',
                                        subtitle: 'Dolor sit amet',
                                        subtitleHtmlTag: 'h3',
                                        subtitleClass: 'h3'
                                    },
                                    link: {
                                        link: 'http://www.dedi-agency.com',
                                        label: 'Lorem ipsum'
                                    },
                                    image: {
                                        image: 'https://via.placeholder.com/1170x785/666',
                                        alt: ''
                                    }
                                },
                                {
                                    style: 'dark',
                                    text: {
                                        align: '',
                                        content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque</strong> sed leo quis urna vehicula egestas. Vestibulum et dui dui.</p>'
                                    },
                                    title: {
                                        title: 'Lorem ipsum',
                                        htmlTag: 'h2',
                                        class: 'h2',
                                        subtitle: 'Dolor sit amet',
                                        subtitleHtmlTag: 'h3',
                                        subtitleClass: 'h3'
                                    },
                                    link: {
                                        link: 'http://www.dedi-agency.com',
                                        label: 'Lorem ipsum'
                                    },
                                    image: {
                                        image: 'https://via.placeholder.com/1170x785',
                                        alt: ''
                                    }
                                }
                            ]
                        }
                    } %}
                </div>
            </div>
            <pre><code>&lt;section class="block-section block-banner-collection">
    &lt;div class="banner-collection-slider default-slider">
        &lt;div class="item">
            &lt;section class="block-section block-banner light">
                &lt;div class="img-wrapper">...&lt;/div>
                &lt;div class="text-wrapper">
                    &lt;h2 class="title-wrapper">...&lt;/h2>
                    &lt;h3 class="subtitle-wrapper">...&lt;/h3>
                    ...
                    &lt;a href="" class="btn btn-dark">...&lt;/a>
                &lt;/div>
            &lt;/section>
        &lt;/div>
        &lt;div class="item">
            &lt;section class="block-section block-banner dark">...&lt;/section>
        &lt;/div>
    &lt;/div>
    &lt;div class="banner-collection-arrows">&lt;/div>
&lt;/section></code></pre>
        </section>

        {# ICONES & TEXTE #}
        <h3 class="ds-subtitle" id="blockIconText">{{ 'dedi_cms.ui_element.text_and_icon_collection.info.title'|trans }} <button class="ds-btn-code" rel=".example-icon-text"></button></h3>
        <section class="ds-example example-icon-text">
            <div class="html">
                <div class="row">
                    {% include '@DediSyliusCmsPlugin/Shop/UiElement/text_and_icon_collection.html.twig' with {
                        element: {
                            width: 100,
                            collection: [
                                {
                                    text: {
                                        content: '<p>Lorem ipsum dolor sit amet</p>',
                                    },
                                    link: {
                                        link: 'http://www.dedi-agency.com',
                                    },
                                    icon: {
                                        icon: 'add',
                                    }
                                },
                                {
                                    text: {
                                        content: '<p>Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>',
                                    },
                                        link: {
                                        link: 'http://www.dedi-agency.com',
                                    },
                                        icon: {
                                        icon: 'truck',
                                    }
                                },
                                {
                                    text: {
                                        content: '<p>Lorem ipsum dolor sit amet</p>',
                                    },
                                        link: {
                                        link: 'http://www.dedi-agency.com',
                                    },
                                        icon: {
                                        icon: 'twitter',
                                    }
                                }
                            ]
                        }
                    } %}
                </div>
            </div>
            <pre>
                <code>&lt;section class="block-section block-icon-text-row">
&lt;a href="" class="block-icon-text">
    &lt;span class="icon-pattern-wrapper pattern-2">
        &lt;i class="fa-icon">&lt;/i>
    &lt;/span>
    &lt;div class="text-wrapper">...&lt;/div>
&lt;/a>

&lt;div class="block-icon-text">
    &lt;span class="icon-pattern-wrapper pattern-2">
        &lt;svg />
    &lt;/span>
    &lt;div class="text-wrapper">...&lt;/div>
&lt;/div>
&lt;/section></code>
            </pre>
        </section>

        {# CARROUSEL - PRODUITS #}
        <h3 class="ds-subtitle" id="blockSliderProducts">{{ 'dedi_cms.ui_element.product_auto.title'|trans }} <button class="ds-btn-code" rel=".example-slider-products"></button></h3>
        <section class="ds-example example-slider-products">
            <div class="html">
                <div class="row">
                    {% include '@DediSyliusCmsPlugin/Shop/UiElement/product_auto.html.twig' with {
                        element: {
                            title: {
                                title: 'Lorem ipsum',
                                htmlTag: 'h2',
                                class: 'h2',
                                subtitle: 'Lorem ipsum',
                                subtitleHtmlTag: 'h2',
                                subtitleClass: 'h2'
                            },
                            rule : 'latest_by_channel',
                            numberOfProducts : 8,
                            link : {
                                link: 'http://www.dedi-agency.com',
                                label: 'Lorem ipsum'
                            }
                        },
                    } %}
                </div>
            </div>
            <pre>
                <code>&lt;section class="block-section block-product-collection">
    &lt;section class="block-section block-title">
        ...
    &lt;/section>

    &lt;div class="cross-slider slick-arrow-btn">
        &lt;div class="item">
            &lt;div class="col-12">
                &lt;section class="block-section block-product">...&lt;/section>
            &lt;/div>
        &lt;/div>
        &lt;div class="item">
            ...
        &lt;/div>
    &lt;/div>

    &lt;section class="block-section block-button">
        ...
    &lt;/section>
&lt;/section></code>
            </pre>
        </section>

        {# CARROUSEL - BLOCS #}
        <h3 class="ds-subtitle" id="blockCarouselBlocks">{{ 'dedi_cms.ui_element.block_collection.info.title'|trans }} <button class="ds-btn-code" rel=".example-carousel-blocks"></button></h3>
        <section class="ds-example example-carousel-blocks">
            <div class="html">
                <section class="block-section block-blocks-collection default-slider">
                    <div class="item">
                        {% 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"
                                }
                            }
                        } %}
                    </div>
                    <div class="item">
                        {% include '@DediSyliusCmsPlugin/Shop/UiElement/Bases/media.html.twig' with {
                            element: {
                                type : "image",
                                image : {
                                    image: "https://via.placeholder.com/1110x400/666",
                                    alt: "alt",
                                    link: "http://www.dedi-agency.com"
                                }
                            }
                        } %}
                    </div>
                    <div class="item">
                        {% include '@DediSyliusCmsPlugin/Shop/UiElement/Bases/media.html.twig' with {
                            element: {
                                type : "youtube",
                                youtubeId: "aBxLgW9lE64",
                                youtubeImage: "https://via.placeholder.com/1110x507",
                            }
                        } %}
                    </div>
                </section>
            </div>
            <pre><code>&lt;section class="block-section block-blocks-collection default-slider">
    &lt;div class="item">
        &lt;section class="block-section block-media fullwidth">
            &lt;picture>...&lt;/picture>
        &lt;/section>
    &lt;/div>
    &lt;div class="item">
        &lt;section class="block-section block-media fullwidth">
            &lt;picture>...&lt;/picture>
        &lt;/section>
    &lt;/div>
&lt;/section></code></pre>
        </section>
        <section class="ds-example example-carousel-blocks">
            <div class="html">
                <section class="block-section block-blocks-collection default-slider">
                    {% for i in 1..3 %}
                    <div class="item">
                        {% include '@DediSyliusCmsPlugin/Shop/UiElement/text.html.twig' with {
                            element: {
                                width: 100,
                                color: i == 1 ? 'light' : 'dark',
                                title: {
                                    title: 'Titre',
                                    htmlTag: 'h2',
                                    subtitle: 'Sous-titre',
                                    subtitleHtmlTag: 'h3'
                                },
                                text: {
                                    align: i == 1 ? '' : i == 3 ? 'left' : 'center',
                                    content: i == 1 ? '<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>' : '<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. </p>',
                                },
                                link: {
                                    link: 'http://www.dedi-agency.com',
                                    label: 'Bouton'
                                }
                            }
                        } %}
                    </div>
                    {% endfor %}
                </section>
            </div>
            <pre><code>&lt;section class="block-section block-blocks-collection default-slider">
    &lt;div class="item">
        &lt;section class="block-section block-text text-default light fullwidth">
            &lt;div class="text-wrapper container">...&lt;/div>
        &lt;/section>
    &lt;/div>
    &lt;div class="item">
        &lt;section class="block-section block-text text-default dark fullwidth">
            &lt;div class="text-wrapper container">...&lt;/div>
        &lt;/section>
    &lt;/div>
&lt;/section></code></pre>
        </section>
        <section class="ds-example example-carousel-blocks">
            <div class="html">
                <section class="block-section block-blocks-collection default-slider">
                    {% for i in 1..3 %}
                    <div class="item">
                        {% include '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/quote.html.twig' with {
                            element: {
                                text: {
                                    align: 'center'
                                },
                                content: i == 1 ? '<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>' : '<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. </p>',
                                author: 'Auteur'
                            }
                        } %}
                    </div>
                    {% endfor %}
                </section>
            </div>
            <pre><code>&lt;section class="block-section block-blocks-collection default-slider">
    &lt;div class="item">
        &lt;section class="block-section block-blockquote">
            &lt;blockquote class="blockquote container">...&lt;/blockquote>
        &lt;/section>
    &lt;/div>
    &lt;div class="item">
        &lt;section class="block-section block-blockquote">
            &lt;blockquote class="blockquote container">...&lt;/blockquote>
        &lt;/section>
    &lt;/div>
&lt;/section></code></pre>
        </section>
    </div>
{% endblock %}
