{% extends '@WebProfiler/Profiler/base.html.twig' %}

{% block body %}

    {{ render(path('_wdt', { 'token': token, 'position': 'normal' })) }}

    <div id="content">
        {% include '@WebProfiler/Profiler/header.html.twig' only %}

        <div id="main">

            <div class="clear-fix">
                <div id="collector-wrapper">
                    {% if profile %}
                        <div id="resume">
                            <a id="resume-view-all" href="{{ path('_profiler_search', {limit: 10}) }}">View last 10</a>
                            <strong>Profile for:</strong>
                            {{ profile.method|upper }}
                            {% if profile.method|upper in ['GET', 'HEAD'] %}
                                <a href="{{ profile.url }}" id="resume-url">{{ profile.url }}</a>
                            {% else %}
                                <span id="resume-url">{{ profile.url }}</span>
                            {% endif %}
                            <span class="date">
                                <em>by {{ profile.ip }}</em> at <em>{{ profile.time|date('r') }}</em>
                            </span>
                        </div>
                    {% endif %}

                    <div id="collector-content">
                        {% include '@WebProfiler/Profiler/base_js.html.twig' %}
                        {% block panel '' %}
                    </div>
                </div>
                <div id="navigation">
                    {% if templates is defined %}
                        <ul id="menu-profiler">
                            {% for name, template in templates %}
                                {% set menu %}{{ template.renderBlock('menu', { 'collector': profile.getcollector(name)}) }}{% endset %}
                                {% if menu != '' %}
                                    <li class="{{ name }}{% if name == panel %} selected{% endif %}">
                                        <a href="{{ path('_profiler', { 'token': token, 'panel': name }) }}">{{ menu|raw }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                            <li class="minimize">
                                <a href="javascript:void(0);" title="Minimize toolbar" onclick="return toggleMenuPanels();">
                                    <span class="label">
                                        <span class="icon"><svg id="minimizePanelIcon" width="30" height="33" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 30 33" enable-background="new 0 0 30 33" xml:space="preserve"><path fill="#3F3F3F" d="M15 5C8.4 5 3 10.4 3 17c0 6.6 5.4 12 12 12s12-5.4 12-12C27 10.4 21.6 5 15 5z M19.1 21.5l-1.8 1.8L10.9 17 l6.3-6.3l1.8 1.8L14.6 17L19.1 21.5z"/></svg></span>
                                        <strong>Minimize</strong>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    {% endif %}
                    {{ render(path('_profiler_search_bar')) }}
                    {% include '@WebProfiler/Profiler/admin.html.twig' with { 'token': token } only %}
                </div>
            </div>
        </div>
    </div>

    <script>//<![CDATA[

        function toggleMenuPanels(state, doSave) {
            var menu = document.getElementById('navigation'), savedState = Sfjs.getPreference('menu/displayState'),
                displayState, elem, className;

            if (null === savedState) {
                savedState = 'block';
            }

            displayState = state || ('block' === savedState ? 'none' : 'block');

            if ('undefined' === typeof doSave) {
                doSave = true;
            }

            document.getElementById('searchBar').style.display = displayState;
            document.getElementById('adminBar').style.display = displayState;

            if ('block' === displayState) {
                Sfjs.removeClass(menu, 'collapsed-menu');
                Sfjs.removeClass(menu.parentNode.parentNode, 'collapsed-menu-parents');
            } else {
                Sfjs.addClass(menu, 'collapsed-menu');
                Sfjs.addClass(menu.parentNode.parentNode, 'collapsed-menu-parents');
            }

            if (doSave) {
                Sfjs.setPreference('menu/displayState', displayState);
            }

            try {
                canvasAutoUpdateOnThresholdChange(null);
            } catch (err) {

            }

            return false;
        }

        window.setTimeout(function() {
            if (null === document.getElementById('menu-profiler')) {
                return;
            }

            var menuItems = document.getElementById('menu-profiler').getElementsByTagName('LI'),
                elem, value, child, displayState = Sfjs.getPreference('menu/displayState');

            if (displayState == 'none') {
                toggleMenuPanels('none', false);
            }

            for (elem in menuItems) {
                if (typeof(menuItems[elem].children) !== 'undefined' &&
                    menuItems[elem].children.length > 0) {
                    child = menuItems[elem].children[0];

                    if ('' === child.getAttribute('title') ||
                        null === child.getAttribute('title')) {
                        value = child.text.replace(/^\s+/g, '').split('\n')[0].replace(/\s+$/g, '');
                        child.setAttribute('title', value);
                    }
                }
            }
        }, 25);

    //]]></script>
{% endblock %}
