{% extends 'html.html.twig' %}

{% import 'macros/elements.html.twig' as elements %}
{% import 'macros/blocks.html.twig' as blocks %}

{% block meta %}
    {{ blocks.meta(
    name,
    app.request.uri,
    'meta.description' | trans | striptags('sup'),
    app.request.schemeAndHttpHost~asset('resources/images/meta-logo.png'),
    256,
    256
    )}}
{% endblock %}

{% block body %}
    <div class="ui vertical inverted sidebar menu right">
        <div class="ui search item category center aligned">
            <div class="ui icon input transparent inverted">
                <input class="prompt" type="text" placeholder="Search..." >
                <i class="search icon"></i>
            </div>
            <div class="results transition"></div>
        </div>
        {{ knp_menu_render('mainMenu') }}
    </div>

    <div class="pusher">
        <div class="ui fixed inverted menu main">
            <div class="ui container">
                <a class="item header" href="{{ path('homepage') }}">
                    <img class="ui logo" src="{{ asset('resources/images/logo.svg') }}">
                    {{ name }}
                </a>

                <div class="left menu">
                    {{ knp_menu_render('mainMenu') }}
                </div>

                <div class="right menu">
                    <div class="ui search item category right aligned">
                        <div class="ui icon input transparent inverted">
                            <input class="prompt" type="text" placeholder="Search..." >
                            <i class="search icon"></i>
                        </div>
                        <div class="results transition"></div>
                    </div>
                </div>

                <a class="toc right floated item">
                    <i class="sidebar icon"></i>
                </a>
            </div>
        </div>

        <main class="ui full height segment vertical unpadded">
            {% block page %}
                <header class="ui head vertical segment">
                    <div class="ui container">
                        <div class="ui breadcrumb">
                            {% for breadcrumb_item in knp_menu_get_breadcrumbs_array(knp_menu_get_current_item('mainMenu')) %}
                                {% set icon -%}
                                    {% if breadcrumb_item.item.extras.icon is defined %}
                                        <i class="icon {{ breadcrumb_item.item.extras.icon }}"></i>
                                    {% endif %}
                                {%- endset %}


                                {% set value = breadcrumb_item.item.extras.value is defined ? breadcrumb_item.item.extras.value : 0 %}


                                {% if not loop.last and breadcrumb_item.uri %}
                                    <a class="section" href="{{ breadcrumb_item.uri }}">{{ icon }}{{ breadcrumb_item.label | trans({},'menu')}}</a>
                                    <div class="divider"> / </div>
                                {% else %}
                                    <div class="active section">{{ icon }}{{ breadcrumb_item.label | trans({'%value%':value},'menu')}}</div>
                                    {% if not loop.last %}
                                        <div class="divider"> / </div>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                        </div>

                        <h1 class="ui header">{% block header %}{% endblock %}</h1>

                        {% for label, flashes in app.session.flashbag.all %}
                            {% for flash in flashes %}
                                {{ elements.flash(label,flash) }}
                            {% endfor %}
                        {% endfor %}
                    </div>
                </header>

                {% block content %}

                {% endblock %}
            {% endblock page %}
        </main>
        {% include 'footer.html.twig' %}
    </div>
{% endblock %}