WordPress

<div class="httplug-stack-header httplug-toggle" data-toggle="#httplug-{{ stack.clientSlug }}-{{ id }}-details">
    <div>
        {% if stack.failed %}
            <span class="httplug-stack-failed">✘</span>
        {% else %}
            <span class="httplug-stack-success">✔</span>
        {% endif %}
        <span class="label httplug-method httplug-method-{{ stack.requestMethod|lower }}">{{ stack.requestMethod }}</span>
    </div>
    {% apply spaceless %}
        <div class="label httplug-stack-header-target">
            <span class="httplug-scheme">{{ stack.requestScheme }}://</span>
            <span class="httplug-host">{{ stack.requestHost }}</span>
            {% if stack.requestPort not in [null, 80, 443] %}
                <span class="httplug-port">:{{ stack.requestPort }}</span>
            {% endif %}
            <span class="httplug-target">{{ (stack.requestTarget|default('/') starts with '/' ? '' : '/')  ~ stack.requestTarget }}</span>
        </div>
    {% endapply %}
    <div>
        <span class="label httplug-duration">{{ stack.duration|number_format }} ms</span>
        {% if stack.responseCode >= 400 and stack.responseCode <= 599 %}
            <span class="label status-error">{{ stack.responseCode }}</span>
        {% elseif stack.responseCode >= 300 and stack.responseCode <= 399 %}
            <span class="label status-warning">{{ stack.responseCode }}</span>
        {% else %}
            <span class="label status-success">{{ stack.responseCode }}</span>
        {% endif %}
    </div>
</div>
<div id="httplug-{{ stack.clientSlug }}-{{ id }}-details" class="httplug-hidden">
    <div class="httplug-toolbar">
        <div class="httplug-copy-as-curl">
            <input readonly="readonly" type="text" value="{{ stack.curlCommand }}" />
            <button class="btn tooltip-toggle" aria-label="Copy to clipboard">Copy to clipboard</button>
        </div>
        <button data-toggle="#httplug-{{ stack.clientSlug }}-{{ id }}-stack" class="httplug-toggle btn" >Toggle plugin stack</button>
        <button data-toggle="#httplug-{{ stack.clientSlug }}-{{ id }}-details .httplug-http-body" class="httplug-toggle btn">Toggle body</button>
    </div>
    <div class="httplug-messages">
        <div class="httplug-message card">
            {{ include('@Httplug/http_message.html.twig', { data: stack.clientRequest, capturedBodyLength: collector.capturedBodyLength, header: 'Request' }, with_context=false) }}
        </div>
        <div class="httplug-message card">
            {{ include('@Httplug/http_message.html.twig', { data: stack.clientResponse, capturedBodyLength: collector.capturedBodyLength, header: 'Response' }, with_context=false) }}
        </div>
    </div>
    {% if stack.profiles %}
        <div id="httplug-{{ stack.clientSlug }}-{{ id }}-stack" class="httplug-hidden card">
            {% for profile in stack.profiles %}
                <h3 class="httplug-plugin-name">{{ profile.plugin }}</h3>
                <div class="httplug-messages">
                    <div class="httplug-message">
                        {{ include('@Httplug/http_message.html.twig', { data: profile.request, capturedBodyLength: collector.capturedBodyLength, header: 'Request' }, with_context=false) }}
                    </div>
                    <div class="httplug-message">
                        {{ include('@Httplug/http_message.html.twig', { data: profile.response, capturedBodyLength: collector.capturedBodyLength, header: 'Response' }, with_context=false) }}
                    </div>
                </div>
                {% if not loop.last %}
                    <hr />
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}
</div>
{% for child in collector.childrenStacks(stack) %}
    <div class="httplug-stack">
        {{ include('@Httplug/stack.html.twig', {
            'collector': collector,
            'client': client,
            'stack': child,
            'id': id ~ '-' ~ loop.index
        }, with_context=false) }}
    </div>
{% endfor %}