{% if ajax_render == false %}
    {% set template= "base.html.twig" %}
{% else %}
    {% set template= "blank.html.twig" %}
{% endif %}

    {% extends template %}

{% block body %}
<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-100'>
    <div id='mainContent'>
        <div class="container-fluid">

            {% include "modules/common/components/info-block.twig" with {
                text_translation_string   : 'achievements.infoBlock.text.mainDescription',
                header_translation_string : 'achievements.infoBlock.header'
            } %}

            </div>
            {# DataTable achievements #}
            <div class="row">
                {% for achievement_type in achievement_types %}
                <div class="col-md-3">
                    <div class="bgc-white bd bdrs-3 p-10 mB-10">
                        <h5 class="c-grey-900 mB-20 text-center">{{ achievement_type | capitalize }}</h5>
                        {% include 'modules/my-achievements/components/table.html.twig' with {'achievement_type' : achievement_type} %}
                    </div>
                </div>
                {% endfor %}
            </div>
            {# Form #}
            <div class="row">
                <div class="col-md-12">
                    <div class="bgc-white bd bdrs-3 p-20 mB-20 d-flex flex-column">
                        <h4 class="c-grey-900 mB-20 align-self-center">{{ 'achievements.headers.addAchievement' | trans }}</h4>
                        <div class="col-md-6 align-self-center add-record-form">
                            {{ form_start(achievement_form,{'attr':{'data-entity':"Achievements"}}) }}
                            {{ form_end(achievement_form) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

{% endblock body %}