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

{% 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">{{ 'app.design_system.helpers.spacing_desc'|trans|raw }}</p>

        <div class="row">
            <div class="col-lg"><strong>auto</strong></div>
            <div class="col-md">.margin-auto</div>
            <div class="col-md">.margin-top-auto</div>
            <div class="col-md">.margin-right-auto</div>
            <div class="col-md">.margin-bottom-auto</div>
            <div class="col-md">.margin-left-auto</div>
        </div>

        {% for i in 1..5 %}
            <div class="row">
                <div class="col-lg"><strong>{{ i*10 }} px</strong></div>
                <div class="col-md">.margin-{{ i }}</div>
                <div class="col-md">.margin-top-{{ i }}</div>
                <div class="col-md">.margin-right-{{ i }}</div>
                <div class="col-md">.margin-bottom-{{ i }}</div>
                <div class="col-md">.margin-left-{{ i }}</div>
            </div>
        {% endfor %}

        <hr class="mt-0 mb-5">

        {% for i in 1..5 %}
            <div class="row">
                <div class="col-lg"><strong>{{ i*10 }} px</strong></div>
                <div class="col-md">.padding-{{ i }}</div>
                <div class="col-md">.padding-top-{{ i }}</div>
                <div class="col-md">.padding-right-{{ i }}</div>
                <div class="col-md">.padding-bottom-{{ i }}</div>
                <div class="col-md">.padding-left-{{ i }}</div>
            </div>
        {% endfor %}
    </div>
{% endblock %}
