{% extends '@ChillMain/layout.html.twig' %}

{% block title %}Page de test{% endblock %}

{% block css%}
    <link rel="stylesheet" href="{{ asset('build/tabs.css') }}"/>
{% endblock %}

{% block js%}
    <script type="text/javascript">

        let tabParams = [{
            id : 'test1',
            type: 'tab',
            startPanel: 2,
            disposition: 'horizontal',
            fade: true
        },
        {
            id : 'test2',
            type: 'pill',
            startPanel: 5,
            disposition: 'vertical',
            fade: false
        }
        ];

    </script>
    <script type="text/javascript" src="{{ asset('build/tabs.js') }}"></script>
{% endblock %}

{% block content %}

    {% for key,tabsPanel in tabs %}
    <div class="tabs" id="{{ key }}">
        <nav>
            <ul class="nav-tabs" role="tablist">
                {% for tab in tabsPanel %}
                    <li class="nav-item">
                        {% set ref = (tab.link is defined )? tab.link : '#' %}
                        <a class="nav-link" href="{{ ref }}">{{ tab.name }}</a>
                    </li>
                {% endfor %}
            </ul>
        </nav>
        <div class="tab-content">
            {% for tab in tabsPanel %}
                <div class="tab-pane fade" role="tabpanel">
                    {% if tab.content is defined %}
                        <p>{{ tab.content }}</p>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}

</div>
{% endblock %}