<section id="resources" class="project__resources">
    <!--<h1 class="text-center" >{{t.project_risorse}}</h1>-->
    <div class="container pb-md-4">

        <nav>
            <div class="nav nav-tabs nav-fill project__resources-header" id="project-resources" role="tablist">
                {% for resourcegroup in page.resources %}
                {% assign resourceitem = resourcegroup | first %}
                <a class="nav-item nav-link {% if forloop.first %}active{%endif%}" id="resourcegroup-{{forloop.index}}"
                    data-toggle="tab" href="#resourcecontent-{{forloop.index}}" role="tab"
                    aria-controls="resourcecontent-{{forloop.index}}"
                    aria-selected="{% if forloop.first %}true{%else%}false{%endif%}">{{resourceitem[0]}}</a>
                {% endfor %}
            </div>
        </nav>


        <div class="tab-content project__resources-contents" id="project-resources-contents">
            {% for resourcecontent in page.resources %}
            {% assign resourceitem = resourcecontent | first %}
            <div class="tab-pane fade show {% if forloop.first %}active{%endif%}" id="resourcecontent-{{forloop.index}}"
                role="tabpanel" aria-labelledby="resourcegroup-{{forloop.index}}">
                <ul class="list-unstyled project__resources-list">
                    {% assign resourceslist = resourceitem[1]%}
                    {% for item in resourceslist %}
                    <li>
                        {% if item.icon %}
                        <span class="project__resources-icon">
                           <svg class="icon icon-white bg-primary rounded-circle d-inline p-1 align-top">
                             <use xlink:href="{{ '/assets/svg/sprite.svg#it-' | relative_url }}{{item.icon}}"></use>
                           </svg>
                        </span>
                        {% endif %}
                        <a href="{{item.url}}" target="_blank" class="d-block project__resources-itemtitle">{{item.title}}</a>
                        <p>{{item.desc}}</p>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
        </div>

    </div>
</section>
