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

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

        {# Primary #}
        <h3 class="ds-subtitle">{{ 'app.design_system.buttons.primary'|trans }} <button class="ds-btn-code" rel=".example-primary"></button></h3>
        <div class="row">
            <section class="col-md ds-example example-primary">
                <div class="html">
                    <button class="btn btn-primary">bouton primary</button><br>
                    <button class="btn btn-primary btn-reverse">bouton primary</button><br>
                    <button class="btn btn-primary" disabled>bouton primary</button><br>
                    <button class="btn btn-primary btn-sm">bouton primary small</button><br>
                    <button class="btn btn-primary btn-lg">bouton primary large</button><br>
                    <button class="btn btn-primary btn-block">bouton primary block</button>
                </div>
                <pre>
                    <code>&lt;button class="btn btn-primary">&lt;/button>
&lt;button class="btn btn-primary btn-reverse" disabled>&lt;/button>
&lt;button class="btn btn-primary" disabled>&lt;/button>
&lt;button class="btn btn-primary btn-sm">&lt;/button>
&lt;button class="btn btn-primary btn-lg">&lt;/button>
&lt;button class="btn btn-primary btn-block">&lt;/button></code>
            </pre>
            </section>
            <section class="col-md ds-example example-primary">
                <div class="html">
                    <button class="btn btn-outline-primary">bouton primary outline</button><br>
                    <button class="btn btn-outline-primary btn-reverse">bouton primary outline</button><br>
                    <button class="btn btn-outline-primary" disabled>bouton primary outline</button><br>
                    <button class="btn btn-outline-primary btn-sm">bouton primary outline small</button><br>
                    <button class="btn btn-outline-primary btn-lg">bouton primary outline large</button><br>
                    <button class="btn btn-outline-primary btn-block">bouton primary outline block</button>
                </div>
                <pre>
                    <code>&lt;button class="btn btn-outline-primary">&lt;/button>
&lt;button class="btn btn-outline-primary btn-reverse">&lt;/button>
&lt;button class="btn btn-outline-primary" disabled>&lt;/button>
&lt;button class="btn btn-outline-primary btn-sm">&lt;/button>
&lt;button class="btn btn-outline-primary btn-lg">&lt;/button>
&lt;button class="btn btn-outline-primary btn-block">&lt;/button></code>
                </pre>
            </section>
        </div>

        {# Secondary #}
        <h3 class="ds-subtitle">{{ 'app.design_system.buttons.secondary'|trans }} <button class="ds-btn-code" rel=".example-secondary"></button></h3>
        <div class="row">
            <section class="col-md ds-example example-secondary">
                <div class="html">
                    <button class="btn btn-secondary">bouton secondary</button><br>
                    <button class="btn btn-secondary btn-reverse">bouton secondary</button><br>
                    <button class="btn btn-secondary" disabled>bouton secondary</button><br>
                    <button class="btn btn-secondary btn-sm">bouton secondary small</button><br>
                    <button class="btn btn-secondary btn-lg">bouton secondary large</button><br>
                    <button class="btn btn-secondary btn-block">bouton secondary block</button>
                </div>
                <pre>
                    <code>&lt;button class="btn btn-secondary">&lt;/button>
&lt;button class="btn btn-secondary btn-reverse" disabled>&lt;/button>
&lt;button class="btn btn-secondary" disabled>&lt;/button>
&lt;button class="btn btn-secondary btn-sm">&lt;/button>
&lt;button class="btn btn-secondary btn-lg">&lt;/button>
&lt;button class="btn btn-secondary btn-block">&lt;/button></code>
                </pre>
            </section>
            <section class="col-md ds-example example-secondary">
                <div class="html">
                    <button class="btn btn-outline-secondary">bouton secondary outline</button><br>
                    <button class="btn btn-outline-secondary btn-reverse">bouton secondary outline</button><br>
                    <button class="btn btn-outline-secondary" disabled>bouton secondary outline</button><br>
                    <button class="btn btn-outline-secondary btn-sm">bouton secondary outline small</button><br>
                    <button class="btn btn-outline-secondary btn-lg">bouton secondary outline large</button><br>
                    <button class="btn btn-outline-secondary btn-block">bouton secondary outline block</button>
                </div>
                <pre>
                    <code>&lt;button class="btn btn-outline-secondary">&lt;/button>
&lt;button class="btn btn-outline-secondary btn-reverse">&lt;/button>
&lt;button class="btn btn-outline-secondary" disabled>&lt;/button>
&lt;button class="btn btn-outline-secondary btn-sm">&lt;/button>
&lt;button class="btn btn-outline-secondary btn-lg">&lt;/button>
&lt;button class="btn btn-outline-secondary btn-block">&lt;/button></code>
                </pre>
            </section>
        </div>


        {# Dark #}
        <h3 class="ds-subtitle">{{ 'app.design_system.buttons.dark'|trans }} <button class="ds-btn-code" rel=".example-dark"></button></h3>
        <div class="row">
            <section class="col-md ds-example example-dark">
                <div class="html">
                    <button class="btn btn-dark">bouton dark</button><br>
                    <button class="btn btn-dark btn-reverse">bouton dark</button><br>
                    <button class="btn btn-dark" disabled>bouton dark</button><br>
                    <button class="btn btn-dark btn-sm">bouton dark small</button><br>
                    <button class="btn btn-dark btn-lg">bouton dark large</button><br>
                    <button class="btn btn-dark btn-block">bouton dark block</button>
                </div>
                <pre>
                    <code>&lt;button class="btn btn-dark">&lt;/button>
&lt;button class="btn btn-dark btn-reverse">&lt;/button>
&lt;button class="btn btn-dark" disabled>&lt;/button>
&lt;button class="btn btn-dark btn-sm">&lt;/button>
&lt;button class="btn btn-dark btn-lg">&lt;/button>
&lt;button class="btn btn-dark btn-block">&lt;/button></code>
                </pre>
            </section>
            <section class="col-md ds-example example-dark">
                <div class="html">
                    <button class="btn btn-outline-dark">bouton dark outline</button><br>
                    <button class="btn btn-outline-dark btn-reverse">bouton dark outline</button><br>
                    <button class="btn btn-outline-dark" disabled>bouton dark outline</button><br>
                    <button class="btn btn-outline-dark btn-sm">bouton dark outline small</button><br>
                    <button class="btn btn-outline-dark btn-lg">bouton dark outline large</button><br>
                    <button class="btn btn-outline-dark btn-block">bouton dark outline block</button>
                </div>
                <pre>
                    <code>&lt;button class="btn btn-outline-dark">&lt;/button>
&lt;button class="btn btn-outline-dark btn-reverse">&lt;/button>
&lt;button class="btn btn-outline-dark" disabled>&lt;/button>
&lt;button class="btn btn-outline-dark btn-sm">&lt;/button>
&lt;button class="btn btn-outline-dark btn-lg">&lt;/button>
&lt;button class="btn btn-outline-dark btn-block">&lt;/button></code>
                </pre>
            </section>
        </div>

        {# Light #}
        <h3 class="ds-subtitle">{{ 'app.design_system.buttons.light'|trans }} <button class="ds-btn-code" rel=".example-light"></button></h3>
        <div class="row bg-gray-700">
            <section class="col-md ds-example example-light">
                <div class="html">
                    <button class="btn btn-light">bouton light</button><br>
                    <button class="btn btn-light btn-reverse">bouton light</button><br>
                    <button class="btn btn-light" disabled>bouton light</button><br>
                    <button class="btn btn-light btn-sm">bouton light small</button><br>
                    <button class="btn btn-light btn-lg">bouton light large</button><br>
                    <button class="btn btn-light btn-block">bouton light block</button>
                </div>
                <pre>
                    <code>&lt;button class="btn btn-light">&lt;/button>
&lt;button class="btn btn-light btn-reverse">&lt;/button>
&lt;button class="btn btn-light" disabled>&lt;/button>
&lt;button class="btn btn-light btn-sm">&lt;/button>
&lt;button class="btn btn-light btn-lg">&lt;/button>
&lt;button class="btn btn-light btn-block">&lt;/button></code>
                </pre>
            </section>
            <section class="col-md ds-example example-light">
                <div class="html">
                    <button class="btn btn-outline-light">bouton light outline</button><br>
                    <button class="btn btn-outline-light btn-reverse">bouton light outline</button><br>
                    <button class="btn btn-outline-light" disabled>bouton light outline</button><br>
                    <button class="btn btn-outline-light btn-sm">bouton light outline small</button><br>
                    <button class="btn btn-outline-light btn-lg">bouton light outline large</button><br>
                    <button class="btn btn-outline-light btn-block">bouton light outline block</button>
                </div>

                <pre>
                    <code>&lt;button class="btn btn-outline-light">&lt;/button>
&lt;button class="btn btn-outline-light btn-reverse">&lt;/button>
&lt;button class="btn btn-outline-light" disabled>&lt;/button>
&lt;button class="btn btn-outline-light btn-sm">&lt;/button>
&lt;button class="btn btn-outline-light btn-lg">&lt;/button>
&lt;button class="btn btn-outline-light btn-block">&lt;/button></code>
                </pre>
            </section>
        </div>

        {# Special #}
        <h3 class="ds-subtitle">{{ 'app.design_system.buttons.special.title'|trans }} <button class="ds-btn-code" rel=".example-special"></button></h3>
        <div class="row">
            <section class="col-md ds-example example-special">
                <div class="html">
                    <button class="btn btn-square btn-primary">Ok</button><br>
                    <button class="btn btn-square btn-primary">{% include '@SyliusShop/Icons/search.html.twig' %}</button>
                </div>
                <pre>
                    <code>&lt;button class="btn btn-square btn-primary">&lt;/button>

&lt;button class="btn btn-square btn-primary">
    {&#37; include '@SyliusShop/Icons/icon_name.html.twig' &#37;}
&lt;/button></code>
                </pre>
            </section>
            <section class="col-md ds-example example-special">
                <div class="html">
                    <button class="btn btn-round btn-primary">Ok</button><br>
                    <button class="btn btn-round btn-primary">{% include '@SyliusShop/Icons/search.html.twig' %}</button>
                </div>
                <pre>
                    <code>&lt;button class="btn btn-round btn-primary">&lt;/button>

&lt;button class="btn btn-round btn-primary">
    {&#37; include '@SyliusShop/Icons/search.html.twig' &#37;}
&lt;/button></code>
                </pre>
            </section>
        </div>
        <section class="ds-example example-special">
            <div class="html">
                <button class="btn btn-primary btn-no-chevron">{{ 'app.design_system.buttons.special.no_icon'|trans }}</button>
            </div>
            <pre>
                <code>&lt;button class="btn btn-primary btn-no-chevron">&lt;/button></code>
            </pre>
        </section>

        <div class="row">
            <section class="col-md ds-example example-special">
                <div class="html">
                    <button class="btn btn-primary btn-add-cart">
                        <span class="btn-icon-text">{{ 'app.design_system.buttons.special.add_cart'|trans }}</span>
                        <span class="btn-icon-svg"><span class="icon-wrapper"></span></span>
                    </button><br>
                    <button class="btn btn-primary btn-add-cart load">
                        <span class="btn-icon-text">{{ 'app.design_system.buttons.special.add_cart'|trans }}</span>
                        <span class="btn-icon-svg"><span class="icon-wrapper"></span></span>
                    </button><br>
                    <button class="btn btn-primary btn-add-cart valid">
                        <span class="btn-icon-text">{{ 'app.design_system.buttons.special.add_cart'|trans }}</span>
                        <span class="btn-icon-svg"><span class="icon-wrapper"></span></span>
                    </button>
                </div>
                <pre>
                <code>&lt;button class="btn btn-primary btn-add-cart">
    &lt;span class="btn-icon-text">...&lt;/span>
    &lt;span class="btn-icon-svg">&lt;span class="icon-wrapper">&lt;/span>&lt;/span>
&lt;/button>

&lt;button class="btn btn-primary btn-add-cart load">
    &lt;span class="btn-icon-text">...&lt;/span>
    &lt;span class="btn-icon-svg">&lt;span class="icon-wrapper">&lt;/span>&lt;/span>
&lt;/button>

&lt;button class="btn btn-primary btn-add-cart valid">
    &lt;span class="btn-icon-text">...&lt;/span>
    &lt;span class="btn-icon-svg">&lt;span class="icon-wrapper">&lt;/span>&lt;/span>
&lt;/button></code>
            </pre>
            </section>
            <section class="col-md ds-example example-special">
                <div class="html">
                    <button class="btn btn-round btn-primary btn-add-cart"><span class="icon-wrapper"></span></button><br>
                    <button class="btn btn-round btn-primary btn-add-cart load"><span class="icon-wrapper"></span></button><br>
                    <button class="btn btn-round btn-primary btn-add-cart valid"><span class="icon-wrapper"></span></button>
                </div>
                <pre>
                <code>&lt;button class="btn btn-round btn-primary btn-add-cart">
    &lt;span class="icon-wrapper">&lt;/span>
&lt;/button>

&lt;button class="btn btn-round btn-primary btn-add-cart load">
    &lt;span class="icon-wrapper">&lt;/span>
&lt;/button>

&lt;button class="btn btn-round btn-primary btn-add-cart valid">
    &lt;span class="icon-wrapper">&lt;/span>
&lt;/button></code>
            </pre>
            </section>
        </div>

    </div>
{% endblock %}
