{% block toolbar %}
    {% set icon %}
    <a href="{{ url("webprofiler.dashboard", {profile: token}, {fragment: 'http'}) }}" title="{{ 'Http'|t }}">
        <img width="20" height="28" alt="{{ 'Http'|t }}"
             src="data:image/png;base64,{{ collector.icon }}"/>
        <span class="sf-toolbar-info-piece-additional sf-toolbar-status">{{ collector.completedRequestsCount }}</span>
    </a>
    {% endset %}
    {% set text %}
    <div class="sf-toolbar-info-piece">
        <b>{{ 'Completed'|t }}</b>
        <span>{{ collector.completedRequestsCount }}</span>
    </div>
    <div class="sf-toolbar-info-piece">
      <b>{{ 'Failed'|t }}</b>
      <span>{{ collector.failedRequestsCount }}</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="http" type="text/template">
        <h2 class="panel__title">{{ 'Http'|t }}</h2>

        <% if( data.completed.length != 0 || data.failed.length != 0){ %>
        <% _.each( data.completed, function( item ) { %>
        <div class="panel__container">
            <div class="panel__expand-header">
                <ul class="list--inline">
                    <li>
                        <b>{{ 'Host'|t }}</b>: <%- item.request.uri.host %>
                    </li>
                    <li>
                        <b>{{ 'Path'|t }}</b>: <%- item.request.uri.path %>
                    </li>
                    <li>
                        <b>{{ 'Status'|t }}</b>: <%- item.response.status %> <%- item.response.phrase %>
                    </li>
                </ul>
                <div class="button--flat l-right js--panel-toggle">{{ 'Info'|t }}</div>
            </div>

            <div class="panel__expand-content">
                <table class="table--duo">
                    <% _.each( item.request, function( message, key ) { %>

                    <% if(key == 'stats') { key = 'stats (time in milliseconds and data in bytes)' } %>

                    <tr>
                        <th><%- key %></th>
                        <td><%= Drupal.webprofiler.helpers.frm(message) %></td>
                    </tr>
                    <% }); %>
                </table>
                <table class="table--duo">
                    <% _.each( item.response, function( header, key ) { %>
                    <tr>
                        <th><%- key %></th>
                        <td><%= Drupal.webprofiler.helpers.frm(header) %></td>
                    </tr>
                    <% }); %>
                </table>
            </div>
        </div>
        <% }); %>
        <% } else { %>
        <div class="panel__container">
            <p>{{ 'No external http calls'|t }}</p>
        </div>
        <% } %>
    </script>
{% endblock %}