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

{% set helperSides = ['', 't', 'b', 'l', 'r', 'y', 'x'] %}
{% set helperBreakpoint = ['sm', 'md', 'lg', 'xl'] %}
{% set helperAlignment = ['left', 'center', 'right', 'justify'] %}

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

        <h3 class="ds-subtitle">{{ 'app.design_system.helpers.spacing'|trans }}</h3>

        <p class="alert alert-info mb-3">{{ 'app.design_system.helpers.spacing_desc'|trans|raw }}</p>

        <div class="table-responsive">
            <table class="table">
                <tr>
                    <th></th>
                    <th>all</th>
                    <th>top : t</th>
                    <th class="text-nowrap">bottom : b</th>
                    <th>left : l</th>
                    <th class="text-nowrap">right : r</th>
                    <th class="text-nowrap">top + bottom : y</th>
                    <th class="text-nowrap">left + right : x</th>
                </tr>
                <tr>
                    <th class="text-nowrap">
                        auto<br>
                        {% for i in 0..5 %}
                            {{ i*10 }} px<br>
                        {% endfor %}
                    </th>
                    {% for side in helperSides %}
                        <td class="text-nowrap">
                            .m{{ side }}-auto<br>
                            {% for i in 0..5 %}
                                .m{{ side }}-{{ i }}<br>
                            {% endfor %}
                        </td>
                    {% endfor %}
                </tr>
                <tr>
                    <th>
                        {% for i in 0..5 %}
                            {{ i*10 }} px<br>
                        {% endfor %}
                    </th>
                    {% for side in helperSides %}
                        <td>
                            {% for i in 0..5 %}
                                .p{{ side }}-{{ i }}<br>
                            {% endfor %}
                        </td>
                    {% endfor %}
                </tr>
                <tr>
                    <th>
                        {% for breakpoint in helperBreakpoint %}
                            {{ breakpoint}}<br>
                        {% endfor %}
                    </th>
                    {% for side in helperSides %}
                        <td>
                            {% for breakpoint in helperBreakpoint %}
                                .p{{ side }}-{{ breakpoint }}-1<br>
                            {% endfor %}
                        </td>
                    {% endfor %}
                </tr>
            </table>
        </div>

        <h3 class="ds-subtitle">{{ 'app.design_system.helpers.alignment'|trans }}</h3>
        <div class="table-responsive">
            <table class="table">
                <tr>
                    <th></th>
                    {% for align in helperAlignment %}
                        <th>{{ align }}</th>
                    {% endfor %}
                </tr>
                <tr>
                    <th>
                        all<br>
                        {% for breakpoint in helperBreakpoint %}
                            {{ breakpoint}}<br>
                        {% endfor %}
                    </th>
                    {% for align in helperAlignment %}
                        <td>
                            .text-{{ align }}<br>
                            {% for breakpoint in helperBreakpoint %}
                                .text-{{ breakpoint }}-{{ align }}<br>
                            {% endfor %}
                        </td>
                    {% endfor %}
                </tr>
            </table>
        </div>
    </div>
{% endblock %}
