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

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

        <h3 class="ds-subtitle">{{ 'app.design_system.tables.light'|trans }} <button class="ds-btn-code" rel=".example-light"></button></h3>
        <section class="ds-example example-light">
            <div class="html">
                <table class="table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First</th>
                            <th>Last</th>
                            <th>Handle</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@markotto</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@jacobthronton</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@larrythebidouhyeah</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <pre>
                <code>&lt;table class="table">
    &lt;thead>
        &lt;tr>
            &lt;th>&lt;/th>
            &lt;th>&lt;/th>
            &lt;th>&lt;/th>
        &lt;/tr>
    &lt;/thead>
    &lt;tbody>
        &lt;tr>
            &lt;td>&lt;/td>
            &lt;td>&lt;/td>
            &lt;td>&lt;/td>
        &lt;/tr>
    &lt;/tbody>
&lt;/table></code>
            </pre>
        </section>
        <section class="ds-example example-light">
            <div class="html">
                <table class="table">
                    <tbody>
                    <tr>
                        <th>Caractéristique&nbsp;1</th>
                        <td>Nulla et orci erat</td>
                    </tr>
                    <tr>
                        <th>Caractéristique&nbsp;2</th>
                        <td>Nulla et orci erat</td>
                    </tr>
                    <tr>
                        <th>Caractéristique&nbsp;3</th>
                        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies feugiat purus nec lobortis. Donec vitae venenatis enim. Aliquam porta libero risus, eget euismod sem eleifend vel.</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <pre>
                <code>&lt;table class="table">
    &lt;tbody>
        &lt;tr>
            &lt;th>&lt;/th>
            &lt;td>&lt;/td>
        &lt;/tr>
        &lt;tr>
            &lt;th>&lt;/th>
            &lt;td>&lt;/td>
        &lt;/tr>
    &lt;/tbody>
&lt;/table></code>
            </pre>
        </section>

        <h3 class="ds-subtitle">{{ 'app.design_system.tables.dark'|trans }} <button class="ds-btn-code" rel=".example-dark"></button></h3>
        <div class="row bg-gray-700">
            <div class="col">
                <section class="ds-example example-dark">
                    <div class="html">
                        <table class="table table-dark">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>First</th>
                                    <th>Last</th>
                                    <th>Handle</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@markotto</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@jacobthronton</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@larrythebidouhyeah</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <pre>
                        <code>&lt;table class="table table-dark">
    &lt;thead>
        &lt;tr>
            &lt;th>&lt;/th>
            &lt;th>&lt;/th>
            &lt;th>&lt;/th>
        &lt;/tr>
    &lt;/thead>
    &lt;tbody>
        &lt;tr>
            &lt;td>&lt;/td>
            &lt;td>&lt;/td>
            &lt;td>&lt;/td>
        &lt;/tr>
    &lt;/tbody>
&lt;/table></code>
                    </pre>
                </section>
                <section class="ds-example example-dark bg-gray-700">
            <div class="html">
                <table class="table table-dark">
                    <tbody>
                    <tr>
                        <th>Caractéristique&nbsp;1</th>
                        <td>Nulla et orci erat</td>
                    </tr>
                    <tr>
                        <th>Caractéristique&nbsp;2</th>
                        <td>Nulla et orci erat</td>
                    </tr>
                    <tr>
                        <th>Caractéristique&nbsp;3</th>
                        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies feugiat purus nec lobortis. Donec vitae venenatis enim. Aliquam porta libero risus, eget euismod sem eleifend vel.</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <pre>
                <code>&lt;table class="table table-dark">
    &lt;tbody>
        &lt;tr>
            &lt;th>&lt;/th>
            &lt;td>&lt;/td>
        &lt;/tr>
        &lt;tr>
            &lt;th>&lt;/th>
            &lt;td>&lt;/td>
        &lt;/tr>
    &lt;/tbody>
&lt;/table></code>
            </pre>
        </section>
            </div>
        </div>
    </div>
{% endblock %}
