{% 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',
            initPane: 2,
            disposition: 'horizontal',
            fade: true
        },
        {
            id : 'test2',
            type: 'pill',
            initPane: 5,
            disposition: 'vertical',
            fade: false
        }
        ];

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

{% import '@ChillMain/Tabs/macro.html.twig' as tabsPanel %}

{% block content %}


    <i class="fa fa-user fa-2x"></i>
    <i class="fa fa-bootstrap fa-2x"></i>
    <i class="fa fa-fork-awesome fa-2x"></i>
    <i class="fa fa-peertube fa-2x"></i>

    <style>
        span.test::before {
            font-family: 'ForkAwesome';
            content: '\f0f9';
            margin: 0 0.5em;
        }
    </style>
    <span class="test">coucou</span>



    {# Display one tabsPanel
    {{ tabsPanel.displayOne(tabs, 'test1') }}
    #}

    {# Display all tabPanels   #}
    {{ tabsPanel.display(tabs) }}

{% endblock %}
