{% if not collector.logs %}
    <p>
        <em>No calls</em>
    </p>
{% else %}
    <div id="gb_profiler">
        <h2>Overview</h2>
        <div class="gb_overview">
            <div class="gb_content">
                <table>
                    <tr>
                        <th>Total time</th>
                        <td>
                            {% if collector.totalTime > 1.0 %}
                                <span>{{ '%0.2f'|format(collector.totalTime) }} s</span>
                            {% else %}
                                <span>{{ '%0.0f'|format(collector.totalTime * 1000) }} ms</span>
                            {% endif %}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        {% for group in collector.logs %}
            <h2>Group {{ group.requestName }}</h2>

            {% for message in group.messages %}
                <div class="gb_request gb_request--{{ message.request.method | lower }}">
                    <h3>
                        <a href="javascript: void(0);">
                            <span class="gb_request__method">{{ message.request.method }}</span>
                            <span class="gb_request__url">{{ message.request.url }}</span>

                            <span class="gb_request__response">
                                {% if message.response %}
                                    {{ message.response.statusPhrase }} ({{ message.response.statusCode }})
                                {% else %}
                                    N/A
                                {% endif %}
                            </span>

                            <span class="gb_request__request_time">
                                {% if message.transferTime %}
                                    {{ message.transferTime * 1000 }} ms
                                {% else %}
                                    N/A
                                {% endif %}
                            </span>
                        </a>
                    </h3>

                    <div class="gb_content {{ loop.index0 ? 'gb_content--hide': '' }}">
                        <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 class="gb_request_request">
                            <h4>
                                <a href="javascript: void(0);">
                                    Request
                                </a>
                            </h4>

                            <table class="gb_content">
                                <tr>
                                    <th>Protocol Version</th>
                                    <td>{{ message.request.protocolVersion }}</td>
                                </tr>

                                <tr>
                                    <th>Headers</th>
                                    <td>{{ eight_points_guzzle_dump(message.request.headers) }}</td>
                                </tr>

                                <tr>
                                    <th>Body</th>
                                    <td>
                                        <textarea readonly class="format-json">{{ message.request.body }}</textarea>
                                    </td>
                                </tr>

                                {% if message.curlCommand %}
                                <tr>
                                    <th>Curl command</th>
                                    <td>
                                        <pre>{{ message.curlCommand }}</pre>
                                    </td>
                                </tr>
                                {%  endif %}
                            </table>
                        </div>

                        <div class="gb_request_response">
                            <h4>
                                <a href="javascript: void(0);">
                                    Response
                                </a>
                            </h4>

                            {% if message.response %}
                                <table class="gb_content">
                                    <tr>
                                        <th>Protocol Version</th>
                                        <td>{{ message.response.protocolVersion }}</td>
                                    </tr>

                                    <tr>
                                        <th>Headers</th>
                                        <td>{{ eight_points_guzzle_dump(message.response.headers) }}</td>
                                    </tr>

                                    <tr>
                                        <th>Body</th>
                                        <td>
                                            <textarea readonly class="format-json">{{ message.response.body }}</textarea>
                                        </td>
                                    </tr>
                                </table>
                            {% else %}
                                No response available.
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% else %}
                <p>No Calls</p>
            {% endfor %}
        {% endfor %}
    </div>

    <script>
        // Function to collapse elements
        var collapseFn = function(el, parentClass) {
            var parent = findParentByClass(el.target, parentClass);
            var content = parent.querySelector('.gb_content');

            if (content) {
                content.classList.toggle('gb_content--hide');
            }
        };

        var collapsibleElements = {
            'gb_request': '.gb_request h3 a',
            'gb_request_request': '.gb_request_request h4 a',
            'gb_request_response': '.gb_request_response h4 a'
        };

        for (var parentClass in collapsibleElements) {
            var elements = document.querySelectorAll(collapsibleElements[parentClass]);
            elements.forEach(function(element) {
                element.onclick = (function(parent) {
                    return function(el) {
                        collapseFn(el, parent);
                    };
                }(parentClass))
            });
        }

        function findParentByClass(el, cls) {
            while ((el = el.parentNode) && el.classList.contains(cls) === false) {}

            return el;
        }

        // Format json field
        var formatJsonTextareas = document.querySelectorAll('textarea.format-json');
        formatJsonTextareas.forEach(function(formatJsonTextarea) {
            var value = formatJsonTextarea.value;

            if (value) {
                try {
                    formatJsonTextarea.value = JSON.stringify(JSON.parse(value), null, 2);
                } catch (error) {
                    //different formats json ex: xml
                }
            }
        });
    </script>
{% endif %}