{% block content %}
<section class="container">
    <div class="js-tabs">
        <div class="row">
            <div class="col-12 col-lg-8 offset-lg-2">
                <div class="js-tabs-buttons tab-buttons mb-4">
                    {% for key, array in get_projects_with_categories(category) | reverse %}
                        <button class="js-tab-button tab-buttons__button" type="button" data-target="{{ key }}">{{ key|trans() }}</button>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% for key, array in get_projects_with_categories(category) %}
            <div class="js-tab-content" id="{{ key }}">
                {% for key, projectsCategory in array %}
                    {% set toPrint = false %}
                    {% for projectArr in projectsCategory %}
                        {% if projectArr|length > 0 %}
                            {% set toPrint = true %}
                        {% endif %}
                    {% endfor %}
                    {% if toPrint %}
                        <h2 class="text-center mt-100 mb-7">{{ key }}</h2>
                        {% for key, projects in projectsCategory %}
                            {% if projects|length > 0 %}
                                <h3 class="mb-5">{{ key }}</h3>
                                <div class="row">
                                    {% for project in projects %}
                                        {{ include('/web/projects/_project_list_element.html.twig', {project: project}) }}
                                    {% endfor %}
                                </div>
                                <hr class="line line--gray mb-7">
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            </div>
        {% endfor %}
    </div>
</section>
{% endblock %}