{%- extends '@WebProfiler/Profiler/layout.html.twig' -%}
{%- import _self as helper -%}
{%- block toolbar -%}

    {%- set icon -%}
        {{- include('@JMSSerializer/icon.svg') }}
        <span class="sf-toolbar-label">S:</span>
        <span class="sf-toolbar-value">{{- collector.runs(1)|length }}</span>
        <span class="sf-toolbar-label">D:</span>
        <span class="sf-toolbar-value">{{- collector.runs(2)|length }}</span>
        {% if collector.instance != 'default' %}
            <span class="sf-toolbar-label">{{- collector.instance -}}</span>
        {% endif %}
    {%- endset -%}

    {%- set text -%}
        <div class="sf-toolbar-info-piece">
            <b>Serializations</b>
            <span class="sf-toolbar-status">{{ collector.runs(1)|length }}</span>
        </div>
        <div class="sf-toolbar-info-piece">
            <b>Deserializations</b>
            <span class="sf-toolbar-status">{{ collector.runs(2)|length }}</span>
        </div>
        <div class="sf-toolbar-info-piece">
            <b>Listeners</b>
            <span class="sf-toolbar-status">{{ collector.getNumListeners('called') }}</span>
        </div>
        <div class="sf-toolbar-info-piece">
            <b>Handlers</b>
            <span class="sf-toolbar-status">{{ collector.getNumHandlers('called') }}</span>
        </div>
        <div class="sf-toolbar-info-piece">
            <b>Metadata</b>
            <span class="sf-toolbar-status {{ collector.loadedMetadata|length > 0 ? 'sf-toolbar-status-none' : '' }}">{{ collector.loadedMetadata|length }}</span>
        </div>
    {%- endset -%}

    {%- include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': profiler_url } -%}
{%- endblock -%}

{%- block head -%}
    <style>
        {{ include('@JMSSerializer/Collector/style/jms.css.twig') }}
    </style>
    <style>
        .margin-left {
            margin-left: 10px;
        }

        .margin-top {
            margin-top: 10px;
        }

        .margin-bottom {
            margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript">
        {{ include('@JMSSerializer/Collector/script/jms.js.twig') }}
    </script>
    {{ parent() }}
{%- endblock -%}

{%- block menu -%}
    {# This left-hand menu appears when using the full-screen profiler. #}
    {% set total = (collector.runs(1)|length) + (collector.runs(2)|length) %}
    <span class="label {{ total == 0 ? 'disabled' : '' }}">
        <span class="icon">
            {{ include('@JMSSerializer/icon.svg') }}
        </span>
        <strong>
            JMS Serializer
            {% if collector.instance != 'default' %}
                <small><br>({{- collector.instance -}})</small>
            {% endif %}
        </strong>

        <span class="count">
            <span>{{ (collector.runs(1)|length) }} + {{ (collector.runs(2)|length) }}</span>
        </span>

    </span>
{%- endblock -%}

{%- block panel -%}
    <h2>
        JMS Serializer
        {% if collector.instance != 'default' %}
            ({{- collector.instance -}})
        {% endif %}
    </h2>

    <div class="metrics">
        <div class="metric">
            <span class="value">{{- collector.runs(1)|length }}</span>
            <span class="label">Serializations</span>
        </div>
        <div class="metric">
            <span class="value">{{- collector.runs(2)|length }}</span>
            <span class="label">Deserializations</span>
        </div>
        <div class="metric-divider"></div>
        <div class="metric">
            <span class="value">{{- collector.triggeredEvents.count }}</span>
            <span class="label">Triggered event listeners</span>
        </div>
        <div class="metric">
            <span class="value">{{- collector.triggeredEvents.duration|round(2) }} <span class="unit">ms</span></span>
            <span class="label">Triggered event listeners (time)</span>
        </div>
    </div>

    {{ helper.render_table_runs(collector.runs(1), 'Serializations') }}
    {{ helper.render_table_runs(collector.runs(2), 'Deserializations') }}

    <div class="sf-tabs">
        <div class="tab">
            <h3 class="tab-title jms-toggle" data-toggle="#jms-events">
                Events
                <span class="badge">
                    {{ collector.triggeredListeners|length }}
                    ({{ collector.getNumListeners('called') }} listeners)
                </span>


            </h3>

            <div class="tab-content">
                <p class="help">Triggered event listeners</p>

                <div id="jms-events">
                    {%- include '@JMSSerializer/Collector/events.html.twig' -%}
                </div>
            </div>
        </div>

        <div class="tab">
            <h3 class="tab-title jms-toggle" data-toggle="#jms-handlers">
                Handlers
                <span class="badge">
                    {{ collector.triggeredHandlers|length }}
                    ({{ collector.getNumHandlers('called') }} types)
                </span>
            </h3>

            <div class="tab-content">
                <p class="help">Triggered event handlers</p>

                <div id="jms-handlers">
                    {%- include '@JMSSerializer/Collector/handlers.html.twig' -%}
                </div>
            </div>
        </div>

        <div class="tab">
            <h3 class="tab-title">
                Metadata
                <span class="badge {{ collector.loadedMetadata|length > 0 ? 'status-info' : '' }}">
                    {{- collector.loadedMetadata|length -}}
                </span>
            </h3>

            <div class="tab-content">
                <p class="help">Loaded metadata</p>

                <div id="jms-metadata">
                    {%- include '@JMSSerializer/Collector/metadata.html.twig' -%}
                </div>
            </div>
        </div>
    </div>
{%- endblock -%}

{%- macro render_table_runs(runs, mode) -%}

    {%- if (runs|length)>0 -%}
        <h3>{{ mode }}</h3>
        <table>
            <thead>
            <tr>
                <th>Type</th>
            </tr>
            </thead>
            {%- for run in runs -%}
                <tr>
                    <th class="colored font-normal">{{ dump(run.type) }}</th>
                </tr>
            {%- endfor -%}
        </table>
    {%- endif -%}
{%- endmacro -%}