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

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

        {# Badge #}
        <h3 class="ds-subtitle">{{ 'app.design_system.components.tags'|trans }} <button class="ds-btn-code" rel=".example-tags"></button></h3>
        {% include '@DediSyliusTheme/DesignSystem/parts/_badges.html.twig' %}

        {# Collapse/Accordions #}
        <h3 class="ds-subtitle">{{ 'app.design_system.components.accordions'|trans }} <button class="ds-btn-code" rel=".example-accordions"></button></h3>
        {% include '@DediSyliusTheme/DesignSystem/parts/_accordions.html.twig' %}

        {# Fil ariane #}
        <h3 class="ds-subtitle">{{ 'app.design_system.components.breadcrumb'|trans }} <button class="ds-btn-code" rel=".example-breadcrumb"></button></h3>
        {% include '@DediSyliusTheme/DesignSystem/parts/_breadcrumbs.html.twig' %}

        {# Pagination #}
        <h3 class="ds-subtitle">{{ 'app.design_system.components.pagination.title'|trans }} <button class="ds-btn-code" rel=".example-pagination"></button></h3>
        {% include '@DediSyliusTheme/DesignSystem/parts/_paginations.html.twig' %}

        {# Back to top #}
        <h3 class="ds-subtitle">{{ 'app.design_system.components.back_to_top'|trans }} <button class="ds-btn-code" rel=".example-back-top"></button></h3>
        {% include '@DediSyliusTheme/DesignSystem/parts/_backToTop.html.twig' %}

        {# Tooltip #}
        <h3 class="ds-subtitle">{{ 'app.design_system.components.tooltips'|trans }} <button class="ds-btn-code" rel=".example-tooltips"></button></h3>
        {% include '@DediSyliusTheme/DesignSystem/parts/_tooltips.html.twig' %}

        {# Bar #}
        <h3 class="ds-subtitle">{{ 'app.design_system.components.bars'|trans }} <button class="ds-btn-code" rel=".example-bars"></button></h3>
        {% include '@DediSyliusTheme/DesignSystem/parts/_bars.html.twig' %}

        {# Show/Hide #}
        <h3 class="ds-subtitle">{{ 'app.design_system.components.show_hide'|trans }} <button class="ds-btn-code" rel=".example-show-hide"></button></h3>
        {% include '@DediSyliusTheme/DesignSystem/parts/_showHide.html.twig' %}

        {# Reviews #}
        <h3 class="ds-subtitle">{{ 'app.design_system.components.reviews'|trans }} <button class="ds-btn-code" rel=".example-reviews"></button></h3>
        {% include '@DediSyliusTheme/DesignSystem/parts/_reviews.html.twig' %}

        {% include '@DediSyliusTheme/DesignSystem/parts/_components.html.twig' %}
    </div>
{% endblock %}
