{% block toolbar %}
    {% set negotiator %}
    <a href="{{ idelink(collector.themeNegotiator.class.file, collector.themeNegotiator.class.line)|raw }}">{{ abbr(collector.themeNegotiator.class.class)|raw }}
        ::{{ collector.themeNegotiator.class.method }}</a>
    {% endset %}
    {% set time = collector.templatecount ? '%0.0f ms'|format(collector.time) : 'n/a' %}
    {% set icon %}
    <a href="{{ url("webprofiler.dashboard", {profile: token}, {fragment: 'theme'}) }}" title="{{ 'Theme'|t }}">
        <img width="20" height="28" alt="{{ 'Theme'|t }}"
             src="data:image/png;base64,{{ collector.icon }}"/>
        <span class="sf-toolbar-info-piece-additional sf-toolbar-status">{{ collector.activeTheme.name }}</span>
    </a>
    {% endset %}
    {% set text %}

    <div class="sf-toolbar-info-piece">
        <b>{{ 'Name'|t }}</b>
        <span>{{ collector.activeTheme.name }}</span>
    </div>
    <div class="sf-toolbar-info-piece">
        <b>{{ 'Engine'|t }}</b>
        <span>{{ collector.activeTheme.engine }}</span>
    </div>
    <div class="sf-toolbar-info-piece">
        <b>{{ 'Negotiator'|t }}</b>
        <span>{{ negotiator }}</span>
    </div>
    <div class="sf-toolbar-info-piece">
        <b>{{ 'Render Time'|t }}</b>
        <span>{{ time }}</span>
    </div>
    <div class="sf-toolbar-info-piece">
        <b>{{ 'Template Calls'|t }}</b>
        <span>{{ collector.templatecount }}</span>
    </div>
    <div class="sf-toolbar-info-piece">
        <b>{{ 'Block Calls'|t }}</b>
        <span>{{ collector.blockcount }}</span>
    </div>
    <div class="sf-toolbar-info-piece">
        <b>{{ 'Macro Calls'|t }}</b>
        <span>{{ collector.macrocount }}</span>
    </div>
    {% endset %}

    <div class="sf-toolbar-block">
        <div class="sf-toolbar-icon">{{ icon|default('') }}</div>
        <div class="sf-toolbar-info">{{ text|default('') }}</div>
    </div>
{% endblock %}

{% block panel %}
    <script id="theme" type="text/template">
        <h2 class="panel__title">{{ 'Theme'|t }}</h2>
        <div class="panel__container">
            <table class="table--fixed">
                <tr>
                    <th>{{ 'Name'|t }}</th>
                    <td><%- data.activeTheme.name %> (<a href="/admin/appearance/settings/bartik">{{ 'Edit'|t }})</a>
                    </td>
                </tr>
                <tr>
                    <th>{{ 'Engine'|t }}</th>
                    <td><%- data.activeTheme.engine %></td>
                </tr>
                <tr>
                    <th>{{ 'Base theme'|t }}</th>
                    <td><%- data.activeTheme.extension.base_theme %></td>
                </tr>
                <tr>
                    <th>{{ 'Regions'|t }}</th>
                    <td><%= Drupal.webprofiler.helpers.frm(data.activeTheme.regions) %></td>
                </tr>
                <tr>
                    <th>{{ 'Libraries'|t }}</th>
                    <td><%= Drupal.webprofiler.helpers.frm(data.activeTheme.libraries) %></td>
                </tr>
                <tr>
                    <th>{{ 'Style sheets removed'|t }}</th>
                    <td><%= Drupal.webprofiler.helpers.frm(data.activeTheme.styleSheetsRemove) %></td>
                </tr>
                <tr>
                    <th>{{ 'Path'|t }}</th>
                    <td><%- data.activeTheme.path %></td>
                </tr>
                <tr>
                    <th>{{ 'Negotiator'|t }}</th>
                    <td><%= Drupal.webprofiler.helpers.classLink(data.negotiator.class) %></td>
                </tr>
            </table>
        </div>

        <div class="panel__container">
            <ul class="list--inline">
                <li><b>{{ 'Twig statistics'|t }}</b></li>
            </ul>

            <table class="table--fixed">
                <tr>
                    <th>{{ 'Total Render Time'|t }}</th>
                    <td><%- Drupal.webprofiler.helpers.printTime(data.twig.render_time) %></td>
                </tr>
                <tr>
                    <th>{{ 'Template Calls'|t }}</th>
                    <td><%- data.twig.template_count %></td>
                </tr>
                <tr>
                    <th>{{ 'Block Calls'|t }}</th>
                    <td><%- data.twig.block_count %></td>
                </tr>
                <tr>
                    <th>{{ 'Macro Calls'|t }}</th>
                    <td><%- data.twig.macro_count %></td>
                </tr>
            </table>
        </div>

        <div class="panel__container">
            <ul class="list--inline">
                <li><b>{{ 'Twig rendered templates'|t }}</b></li>
            </ul>

            <table class="table--fixed">
                <thead>
                <tr>
                    <th>{{ 'template'|t }}</th>
                    <th>{{ 'count'|t }}</th>
                </tr>
                </thead>
                <% _.each( data.twig.templates, function( item, key ){ %>
                <tr>
                    <th><%- key %></th>
                    <td><%- item %></td>
                </tr>
                <% }); %>
            </table>
        </div>

        <div class="panel__container">
            <ul class="list--inline">
                <li><b>{{ 'Twig callgraph'|t }}</b></li>
            </ul>

            <%= data.twig.callgraph %>
        </div>
    </script>
{% endblock %}