services.html.twig in Devel 8.3

{% block toolbar %}
    {% set icon %}
    <a href="{{ url("webprofiler.dashboard", {profile: token}, {fragment: 'services'}) }}" title="{{ 'Services'|t }}">
        <img width="20" height="28" alt="{{ 'Services'|t }}"
             src="data:image/png;base64,{{ collector.icon }}"/>
        <span class="sf-toolbar-info-piece-additional sf-toolbar-status">{{ collector.getInitializedServicesCount }}</span>
    </a>
    {% endset %}
    {% set text %}
    <div class="sf-toolbar-info-piece">
        <b>{{ 'Initialized'|t }}</b>
        <span>{{ collector.getInitializedServicesCount }} ({{ collector.getInitializedServicesWithoutWebprofilerCount }}
            )</span>
    </div>
    <div class="sf-toolbar-info-piece">
        <b>{{ 'Available'|t }}</b>
        <span>{{ collector.getServicesCount }}</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="services" type="text/template">
        <h2 class="panel__title">{{ 'Services'|t }}</h2>
        <div class="tabs">
            <input class="tabs__radio" type="radio" id="services" name="tabs" checked/>
            <input class="tabs__radio" type="radio" id="http_middleware" name="tabs"/>
            <ul class="tabs__tabs list--inline">
                <li><label class="tabs__label" for="services">services</label></li>
                <li><label class="tabs__label" for="http_middleware">middleware</label></li>
            </ul>

            <div class="tabs__panels">
                <div class="tabs__panel">
                    <form class="panel__toolbar">
                        <div class="panel__filter--text">
                            <input id="edit-sid" class="js--live-filter" placeholder="{{ 'ID'|t }}" type="text"/>
                            <label for="edit-sid" class="panel__filter-label">{{ 'ID'|t }}</label>
                        </div>
                        <div class="panel__filter--text">
                            <input id="edit-class" class="js--live-filter" placeholder="{{ 'Class'|t }}" type="text"/>
                            <label for="edit-class" class="panel__filter-label">{{ 'Class'|t }}</label>
                        </div>
                        <div class="panel__filter--text">
                            <input id="edit-tags" class="js--live-filter" placeholder="{{ 'Tags'|t }}" type="text"/>
                            <label for="edit-tags" class="panel__filter-label">{{ 'Tags'|t }}</label>
                        </div>
                        <div class="panel__filter--select">
                            <select id="edit-initialized" class="js--live-filter">
                                <option value="">{{ 'Any'|t }}</option>
                                <option value="1">{{ 'Yes'|t }}</option>
                                <option value="0">{{ 'No'|t }}</option>
                            </select>
                            <label for="edit-initialized" class="panel__filter-label">{{ 'Initialized'|t }}</label>
                        </div>
                    </form>

                    <% _.each( data.services, function( item, key ){ %>

                    <% clazz = Drupal.webprofiler.helpers.classLink({"file" : item.value.file, "class" :
                    item.value.class}) %>
                    <% depends = _.map(item.outEdges, function(el) { return el.id; }).join(', ') %>
                    <% tags = _.map(item.value.tags, function(el, key) { return key; }).join(', ') %>

                    <div class="panel__container"
                         data-wp-sid="<%- key %>"
                         data-wp-class="<%- item.value.class %>"
                         data-wp-tags="<%- tags %>"
                         data-wp-initialized="<%- (item.initialized) ? '1' : '0' %>">

                        <div class="panel__expand-header">
                            <ul class="list--inline">
                                <li>
                                    <b>{{ 'ID'|t }}</b> <%- key %>
                                </li>
                                <% if (clazz) { %>
                                <li>
                                    <b>{{ 'Class'|t }}</b> <%= clazz %>
                                </li>
                                <% } %>
                                <li>
                                    <b>{{ 'Initialized'|t }}</b> <%- (item.initialized) ? '{{ 'Yes'|t }}' : '{{ 'No'|t }}' %>
                                </li>
                                <% if ( item.time ) { %>
                                    <li>
                                        <b>{{ 'Count'|t }}</b> <%- item.time.count %>
                                    </li>
                                    <li>
                                        <b>{{ 'Time'|t }}</b> <%- Drupal.webprofiler.helpers.printTime(item.time.time) %>
                                    </li>
                                <% } %>
                            </ul>
                            <% if ( tags.length > 0 || depends.length > 0 ) { %>
                            <div class="button--flat l-right js--panel-toggle">{{ 'Info'|t }}</div>
                            <% } %>
                        </div>

                        <% if ( tags.length > 0 || depends.length > 0 ) { %>
                        <div class="panel__expand-content">
                            <div class="wp-query-arguments">
                                <table class="table--duo">
                                    <tr>
                                        <th>{{ 'Tags'|t }}</th>
                                        <td><%- (tags) ? tags : '-' %></td>
                                    </tr>
                                    <tr>
                                        <th>{{ 'Depends'|t }}</th>
                                        <td><%- (depends) ? depends : '-' %></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <% } %>
                    </div>
                    <% }); %>
                </div>

                <div class="tabs__panel">
                    <div class="panel__container">
                        <table>
                            <thead>
                            <tr>
                                <th>{{ 'id'|t }}</th>
                                <th>{{ 'class'|t }}</th>
                                <th>{{ 'priority'|t }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <% _.each( data.http_middleware, function( item, key ){ %>
                            <% clazz = Drupal.webprofiler.helpers.classLink(item.value.handle_method) %>
                            <tr>
                                <td><%- key %></td>
                                <td><%= clazz %></td>
                                <td><%- item.value.tags.http_middleware[0].priority %></td>
                            </tr>
                            <% }); %>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </script>
{% endblock %}