{% set sections = __SELF__.sections_with_docs %}

{% for section in sections %}
<div class="term_row">
    <h6 class="term_row-title accord">{{ section.section_name }}</h6>
    <div class="term_sub-item"
        {% if loop.index == 1 %}
            style="max-height: 100%;"
        {% endif %}
    >
        {% for doc in section.section_docs %}
        <!-- output all the elements from 0 to 4 with loop indexes from 1 to 5 -->
        {% if loop.index < 6 %}
        <a class="term_download-link" href="{{ doc.birzha_file|media }}">{{ doc.file_name }} </a>
        {% endif %}
        {% endfor %}
        
        <!-- if there is 5th element in the array (counting from 0, loop counts from 1)
            then we can show the button -->
        {% if section.section_docs[5] %}
        <div class="term_additional">
            <button class="term_more accord" type="button">
                <span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"
                        viewBox="0 0 10 6">
                        <path id="Union_1" data-name="Union 1"
                            d="M-10288.26-97.869l-4.048-4.076a.968.968,0,0,1,0-1.36.949.949,0,0,1,1.349,0l3.373,3.4,3.371-3.4a.949.949,0,0,1,1.349,0,.968.968,0,0,1,0,1.36l-4.045,4.076a.946.946,0,0,1-.675.283A.945.945,0,0,1-10288.26-97.869Z"
                            transform="translate(10292.587 103.586)" fill="#fff" />
                    </svg>
                </span> 
                
                {{ 'site.terms_docs_more'|_ }}
            </button>
            <div class="term_all">
                {% for doc in section.section_docs %}
                <!-- output all the elements from 0 to 5 with loop indexes from 6 to inf -->
                {% if loop.index > 5 %}
                <a class="term_download-link" href="{{ doc.birzha_file|media }}">{{ doc.file_name }}</a>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endfor %}