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

{% block toolbar %}
    {% set icon %}
        {{ include('@WebProfiler/Icon/event.svg') }}
        <span class="sf-toolbar-value">{{ collector.scriptCount }} in {{ collector.took }} ms</span>
    {% endset %}

    {% set status = collector.deprecationCount > 0 ? 'yellow' %}

    {% set text %}
        <div class="sf-toolbar-info-piece">
            <b>Hooks</b>
            {# @var collector \Shopware\Core\Framework\Script\Debugging\ScriptTraces #}
            <span>{{ collector.hookCount }}</span>
        </div>

        <div class="sf-toolbar-info-piece">
            <b>Scripts</b>
            <span>{{ collector.scriptCount }}</span>
        </div>

        <div class="sf-toolbar-info-piece">
            <b>Script time</b>
            <span>{{ collector.took }}</span>
        </div>

        {% if collector.deprecationCount > 0 %}
            <div class="sf-toolbar-info-piece">
                <b>Deprecations</b>
                <span class="sf-toolbar-status sf-toolbar-status-yellow">{{ collector.deprecationCount }}</span>
            </div>
        {% endif %}
    {% endset %}

    {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { link: true }) }}
{% endblock %}


{% block menu %}
    {# This left-hand menu appears when using the full-screen profiler. #}
    <span class="label">
        <span class="icon">{{ include('@WebProfiler/Icon/event.svg') }}</span>
        <strong>Scripts</strong>
    </span>
{% endblock %}

{% block panel %}
    {# Optional, for showing the most details. #}
    <h2>Scripts</h2>

    {% if collector.hookCount > 0 %}
        <div class="sf-tabs" data-proccessed="true">
            {% for hook, scripts in collector.data %}
                <div class="tab">
                    {% set deprecationCount = scripts|reduce((count, script) => count + script.deprecations|length) %}
                    <h3 class="tab-title">{{ hook }} <span class="badge {{ deprecationCount > 0 ? 'status-warning' }}">{{ scripts|length }}</span></h3>

                    <div class="tab-content">
                        {% if deprecationCount > 0 %}
                            <h2>Deprecations</h2>
                            <table class="deprecations" data-filters>
                                <thead>
                                <tr>
                                    <th>Script</th>
                                    <th>Count</th>
                                    <th class="full-width">Deprecation Message</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for script in scripts %}
                                    {% for deprecation, count in script.deprecations %}
                                        <tr class="log-status-warning">
                                            <td class="font-normal text-small text-bold nowrap">{{ script.name }}</td>
                                            <td class="text-normal nowrap">{{ count }}</td>
                                            <td>{{ deprecation }}</td>
                                        </tr>
                                    {% endfor %}
                                {% endfor %}
                                </tbody>
                            </table>
                        {% endif %}
                        {% if scripts|length > 0 %}
                            <h2>Debug</h2>
                            <table class="scripts" data-filters>
                                <thead>
                                    <tr>
                                        <th>Script</th>
                                        <th>Took</th>
                                        <th class="full-width">Output</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for script in scripts %}
                                        <tr>
                                            <td class="font-normal text-small text-bold nowrap">{{ script.name }}</td>
                                            <td class="text-normal nowrap">{{ script.took }}</td>
                                            <td>{{ dump(script.output) }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        {% else %}
                            <div class="empty">
                                <p>No scripts called for this hook.</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="empty">
            <p>No hooks called.</p>
        </div>
    {% endif %}
{% endblock %}
