{% if not collector.logs %}
    <p>
        <em>No calls</em>
    </p>
{% else %}

    <div id="guzzle_profiler">

        {% set firstRequest = false %}

        {% for group in collector.logs %}

            <h2>Group {{ group.requestName }}</h2>

        {% for i, message in group.messages %}

            <div id="request_{{ i }}" class="request method_{{ message.request.method | lower }}">
                <h3>
                    <a href="javascript:;">
                        <span class="method">{{ message.request.method }}</span>
                        <span class="url">{{ message.request.url }}</span>
                        <span class="response">{{ message.response.statusPhrase }} ({{ message.response.statusCode }})</span>
                    </a>
                </h3>
                <div class="content" {{ firstRequest ? 'style="display: none;"': '' }}>
                    <h4>Basic</h4>
                    <table>
                        <tr>
                            <th>Log Level</th>
                            <td>{{ message.level }}</td>
                        </tr>
                        <tr>
                            <th>Message</th>
                            <td>{{ message.message }}</td>
                        </tr>
                    </table>

                    <div>
                        <h4>Request</h4>

                        <table>
                            <tr>
                                <th>Protocol Version</th>
                                <td>{{ message.request.protocolVersion }}</td>
                            </tr>
                            <tr>
                                <th>Headers</th>
                                <td>{{ dump(message.request.headers) }}</td>
                            </tr>
                            <tr>
                                <th>Body</th>
                                <td>
                                    <textarea readonly id="requestBody">{{ message.request.body }}</textarea>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div>
                        <h4>Response</h4>

                        <table>
                            <tr>
                                <th>Protocol Version</th>
                                <td>{{ message.response.protocolVersion }}</td>
                            </tr>
                            <tr>
                                <th>Headers</th>
                                <td>{{ dump(message.response.headers) }}</td>
                            </tr>
                            <tr>
                                <th>Body</th>
                                <td>
                                    <textarea readonly id="responseBody">{{ message.response.body }}</textarea>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <script>
                $("#request_{{ i }} h3 a").click(function () {
                    $("#request_{{ i }} .content").toggle("fast");
                });

                var requestBody = $('#requestBody');
                requestBody.val(formatJson(requestBody.val()));

                var responseBody = $('#responseBody');
                responseBody.val(formatJson(responseBody.val()));

                function formatJson(json) {
                    if (json) {
                        try{
                            return JSON.stringify(JSON.parse(json), null, 2);
                        }catch(error){
                            //different formats json ex: xml
                        }
                    }
                }
            </script>

            {% set firstRequest = true %}
            {% else %}

            <p>No Calls</p>
        {% endfor %}
        {% endfor %}

    </div>

{% endif %}