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

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

        {# Titles #}
        <h3 class="ds-subtitle">{{ 'app.design_system.typo.titles'|trans }} <button class="ds-btn-code" rel=".example-title"></button></h3>
        <section class="ds-example example-title">
            <div class="html">
                <h1 class="h1">h1. Exemple de titre</h1>
                <h2 class="h2">h2. Exemple de titre</h2>
                <h3 class="h3">h3. Exemple de titre</h3>
                <h4 class="h4">h4. Exemple de titre</h4>
                <h5 class="h5">h5. Exemple de titre</h5>
                <h6 class="h6">h6. Exemple de titre</h6>
            </div>
            <pre>
                <code>&lt;h1 class="h1">&lt;/h1>
&lt;h2 class="h2">&lt;/h2>
&lt;h3 class="h3">&lt;/h3>
&lt;h4 class="h4">&lt;/h4>
&lt;h5 class="h5">&lt;/h5>
&lt;h6 class="h6">&lt;/h6></code>
            </pre>
        </section>
        <section class="ds-example example-title">
            <div class="html">
                <h1 class="display-1">Display 1</h1>
                <h2 class="display-2">Display 2</h2>
                <h3 class="display-3">Display 3</h3>
                <h4 class="display-4">Display 4</h4>
            </div>
            <pre>
                <code>&lt;h1 class="display-1">&lt;/h1>
&lt;h2 class="display-2">&lt;/h2>
&lt;h3 class="display-3">&lt;/h3>
&lt;h4 class="display-4">&lt;/h4></code>
            </pre>
        </section>


        {# Text #}
        <h3 class="ds-subtitle">{{ 'app.design_system.typo.paragraphs'|trans }} <button class="ds-btn-code" rel=".example-text"></button></h3>
        <section class="ds-example example-text">
            <div class="html">
                <p class="lead">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum. Sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium doloremque eopsloi laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunot explicabo. Nemo ernim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sedopk quia consequuntur magni dolores eos qui rationesopl voluptatem sequi nesciunt. Neque porro quisquameo est, qui dolorem ipsum quia dolor sit amet, eopsmiep consectetur, adipisci velit, seisud quia non numquam eius modi tempora incidunt ut labore et dolore wopeir magnam aliquam quaerat voluptatem eoplmuriquisqu</p>
            </div>
            <pre>
                <code>&lt;p class="lead"&gt;&lt;/p&gt;</code>
            </pre>
        </section>
        <section class="ds-example example-text">
            <div class="html">
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum. Sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium doloremque eopsloi laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunot explicabo. Nemo ernim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sedopk quia consequuntur magni dolores eos qui rationesopl voluptatem sequi nesciunt. Neque porro quisquameo est, qui dolorem ipsum quia dolor sit amet, eopsmiep consectetur, adipisci velit, seisud quia non numquam eius modi tempora incidunt ut labore et dolore wopeir magnam aliquam quaerat voluptatem eoplmuriquisqu</p>
            </div>
            <pre>
                <code>&lt;p&gt;&lt;/p&gt;</code>
            </pre>
        </section>
        <section class="ds-example example-text">
            <div class="html">
                <p class="small">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum. Sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium doloremque eopsloi laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunot explicabo. Nemo ernim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sedopk quia consequuntur magni dolores eos qui rationesopl voluptatem sequi nesciunt. Neque porro quisquameo est, qui dolorem ipsum quia dolor sit amet, eopsmiep consectetur, adipisci velit, seisud quia non numquam eius modi tempora incidunt ut labore et dolore wopeir magnam aliquam quaerat voluptatem eoplmuriquisqu</p>
            </div>
            <pre>
                <code>&lt;p class="small"&gt;&lt;/p&gt;</code>
            </pre>
        </section>

        {# Lists #}
        <h3 class="ds-subtitle">{{ 'app.design_system.typo.lists'|trans }} <button class="ds-btn-code" rel=".example-list"></button></h3>
        <section class="ds-example example-list">
            <div class="html">
                <ul>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Consectetur adipiscing elit</li>
                    <li>Integer molestie lorem at massa</li>
                    <li>Nulla volutpat aliquam velit
                        <ul>
                            <li>Phasellus iaculis neque</li>
                            <li>Purus sodales ultricies</li>
                            <li>Vestibulum laoreet porttitor sem</li>
                        </ul>
                    </li>
                    <li>Faucibus porta lacus fringilla vel</li>
                    <li>Aenean sit amet erat nunc</li>
                    <li>Eget porttitor lorem</li>
                </ul>
            </div>
            <pre>
                <code>&lt;ul>
    &lt;li>&lt;/li>
    &lt;li>
        &lt;ul>
            &lt;li>&lt;/li>
        &lt;/ul>
    &lt;/li>
    &lt;li>&lt;/li>
&lt;/ul></code>
            </pre>
        </section>
        <section class="ds-example example-list">
            <div class="html">
                <ol>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Consectetur adipiscing elit</li>
                    <li>Integer molestie lorem at massa</li>
                    <li>Nulla volutpat aliquam velit
                        <ol>
                            <li>Phasellus iaculis neque</li>
                            <li>Purus sodales ultricies</li>
                            <li>Vestibulum laoreet porttitor sem</li>
                        </ol>
                    </li>
                    <li>Faucibus porta lacus fringilla vel</li>
                    <li>Aenean sit amet erat nunc</li>
                    <li>Eget porttitor lorem</li>
                </ol>
            </div>
            <pre>
                <code>&lt;ol&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;
        &lt;ol&gt;
            &lt;li&gt;&lt;/li&gt;
        &lt;/ol&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
&lt;/ol&gt;</code>
            </pre>
        </section>
        <section class="ds-example example-list">
            <div class="html">
                <ul class="list-links">
                    {% for i in 1..3 %}
                        <li class="list-item">
                            <a href="">
                                Lien {{ i }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <pre>
                <code>&lt;ul class="list-links"&gt;
    &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code>
            </pre>
        </section>

        {# Links and others #}
        <h3 class="ds-subtitle">{{ 'app.design_system.typo.links.title'|trans }} <button class="ds-btn-code" rel=".example-link"></button></h3>
        <section class="ds-example example-link">
            <div class="html">
                <a href="">{{ 'app.design_system.typo.links.cms'|trans }}</a>
            </div>
            <pre>
                <code>&lt;a href=""&gt;&lt;/a&gt;</code>
            </pre>
        </section>
        <section class="ds-example example-link">
            <div class="html">
                <a href="" class="link-secondary">{{ 'app.design_system.typo.links.simple'|trans }}</a>
            </div>
            <pre>
                <code>&lt;a href="" class="link-secondary"&gt;&lt;/a&gt;</code>
            </pre>
        </section>
        <section class="ds-example example-link">
            <div class="html">
                <p class="title-label">{{ 'app.design_system.typo.links.big_label'|trans }}</p>
            </div>
            <pre>
                <code>&lt;p class="title-label"&gt;&lt;/p&gt;</code>
            </pre>
        </section>
        <section class="ds-example example-link">
            <div class="html">
                <label>{{ 'app.design_system.typo.links.label'|trans }}</label>
            </div>
            <pre>
                <code>&lt;label&gt;&lt;/label&gt;</code>
            </pre>
        </section>
        <section class="ds-example example-link">
            <div class="html">
                <small class="form-text">{{ 'app.design_system.typo.links.help'|trans }}</small>
            </div>
            <pre>
                <code>&lt;small class="form-text"&gt;&lt;/small&gt;</code>
            </pre>
        </section>

        {# Price #}
        <h3 class="ds-subtitle">{{ 'app.design_system.typo.price.title'|trans }} <button class="ds-btn-code" rel=".example-price"></button></h3>
        <section class="ds-example example-price">
            <div class="html">
                <div class="row align-items-center">
                    <div class="col-12 col-lg-4">
                        {{ 'app.design_system.typo.price.default'|trans }}
                        <small class="form-text mt-0">{{ 'app.design_system.typo.price.default_desc'|trans }}</small>
                    </div>
                    <div class="col"><span class="price"><span>15</span>,70 €</span></div>
                    <div class="col"><span class="price promo"><span>15</span>,70 €</span></div>
                    <div class="col"><span class="price-old"><span>19</span>,99 €</span></div>
                </div>
            </div>
            <pre>
                <code>&lt;span class="price">&lt;span>15&lt;/span>,70 €&lt;/span>
&lt;span class="price promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
&lt;span class="price-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;</code>
            </pre>
        </section>
        <section class="ds-example example-price">
            <div class="html">
                <div class="row align-items-center">
                    <div class="col-12 col-lg-4">
                        {{ 'app.design_system.typo.price.lg'|trans }}
                        <small class="form-text mt-0">{{ 'app.design_system.typo.price.lg_desc'|trans }}</small>
                    </div>
                    <div class="col col-md"><span class="price-lg"><span>15</span>,70 €</span></div>
                    <div class="col col-md"><span class="price-lg promo"><span>15</span>,70 €</span></div>
                    <div class="col"><span class="price-lg-old"><span>19</span>,99 €</span></div>
                </div>
            </div>
            <pre>
                <code>&lt;span class="price-lg">&lt;span>15&lt;/span>,70 €&lt;/span>
&lt;span class="price-lg promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
&lt;span class="price-lg-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;</code>
            </pre>
        </section>
        <section class="ds-example example-price">
            <div class="html">
                <div class="row align-items-center">
                    <div class="col-12 col-lg-4">
                        {{ 'app.design_system.typo.price.md'|trans }}
                        <small class="form-text mt-0">{{ 'app.design_system.typo.price.md_desc'|trans }}</small>
                    </div>
                    <div class="col"><span class="price-md"><span>15</span>,70 €</span></div>
                    <div class="col"><span class="price-md promo"><span>15</span>,70 €</span></div>
                    <div class="col"><span class="price-md-old"><span>19</span>,99 €</span></div>
                </div>
            </div>
            <pre>
                <code>&lt;span class="price-md">&lt;span>15&lt;/span>,70 €&lt;/span>
&lt;span class="price-md promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
&lt;span class="price-md-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;</code>
            </pre>
        </section>
        <section class="ds-example example-price">
            <div class="html">
                <div class="row align-items-center">
                    <div class="col-12 col-lg-4">
                        {{ 'app.design_system.typo.price.sm'|trans }}
                        <small class="form-text mt-0">{{ 'app.design_system.typo.price.sm_desc'|trans }}</small>
                    </div>
                    <div class="col"><span class="price-sm"><span>15</span>,70 €</span></div>
                    <div class="col"><span class="price-sm promo"><span>15</span>,70 €</span></div>
                    <div class="col"><span class="price-sm-old"><span>19</span>,99 €</span></div>
                </div>
            </div>
            <pre>
                <code>&lt;span class="price-sm">&lt;span>15&lt;/span>,70 €&lt;/span>
&lt;span class="price-sm promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
&lt;span class="price-sm-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;</code>
            </pre>
        </section>
        <section class="ds-example example-price">
            <div class="html">
                <div class="row">
                    <div class="col-12 col-lg-4">
                        {{ 'app.design_system.typo.price.align_vertical'|trans }}
                    </div>
                    <div class="col">
                        <div class="price-wrapper">
                            <span class="price-old"><span>19</span>,99 €</span>
                            <span class="price promo"><span>15</span>,70 €</span>
                        </div>
                    </div>
                    <div class="col">
                        <div class="price-wrapper right">
                            <span class="price-old"><span>19</span>,99 €</span>
                            <span class="price promo"><span>15</span>,70 €</span>
                        </div>
                    </div>
                </div>
            </div>
            <pre>
                <code>&lt;div class="price-wrapper">
    &lt;span class="price-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;
    &lt;span class="price promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
&lt;/div>
&lt;div class="price-wrapper right">
    &lt;span class="price-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;
    &lt;span class="price promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
&lt;/div></code>
            </pre>
        </section>
        <section class="ds-example example-price">
            <div class="html">
                <div class="row">
                    <div class="col-12 col-lg-4">
                        {{ 'app.design_system.typo.price.align_horizontal'|trans }}
                    </div>
                    <div class="col">
                        <div class="price-wrapper-vertical">
                            <span class="price-old"><span>19</span>,99 €</span>
                            <span class="price promo"><span>15</span>,70 €</span>
                        </div>
                    </div>
                    <div class="col">
                        <div class="price-wrapper-vertical down">
                            <span class="price-old"><span>19</span>,99 €</span>
                            <span class="price promo"><span>15</span>,70 €</span>
                        </div>
                    </div>
                </div>
            </div>
            <pre>
                <code>&lt;div class="price-wrapper-vertical">
    &lt;span class="price-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;
    &lt;span class="price promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
&lt;/div>
&lt;div class="price-wrapper-vertical down">
    &lt;span class="price-old">&lt;span>19&lt;/span>,99 €&lt;/span&gt;
    &lt;span class="price promo">&lt;span>15&lt;/span>,70 €&lt;/span&gt;
&lt;/div></code>
            </pre>
        </section>

        {# Notification #}
        <h3 class="ds-subtitle">{{ 'app.design_system.typo.notifications'|trans }} <button class="ds-btn-code" rel=".example-notification"></button></h3>
        <section class="ds-example example-notification">
            <div class="html">
                <p class="alert alert-success">Success - exemple de message</p>
            </div>
            <pre>
                <code>&lt;p class="alert alert-success">&lt;/p></code>
            </pre>
        </section>
        <section class="ds-example example-notification">
            <div class="html">
                <p class="alert alert-danger">Error - exemple de message</p>
            </div>
            <pre>
                <code>&lt;p class="alert alert-danger">&lt;/p></code>
            </pre>
        </section>
        <section class="ds-example example-notification">
            <div class="html">
                <p class="alert alert-warning">Warning - exemple de message</p>
            </div>
            <pre>
                <code>&lt;p class="alert alert-warning">&lt;/p></code>
            </pre>
        </section>
        <section class="ds-example example-notification">
            <div class="html">
                <p class="alert alert-info">Information - exemple de message</p>
            </div>
            <pre>
                <code>&lt;p class="alert alert-info">&lt;/p></code>
            </pre>
        </section>
    </div>
{% endblock %}
