{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block toolbar %}
    {% set queryLabel = collector.queries|length == 1 ? 'query' : 'queries' %}
    {% if collector.queries|length > 0 %}
        {% set icon %}
            {{ include('@BazingaGeocoder/Collector/icon.svg') }}
            <span class="sf-toolbar-value">{{ collector.queries|length }}</span>
            <span class="sf-toolbar-label">{{ queryLabel }} in</span>
            <span class="sf-toolbar-value">{{ collector.totalDuration|number_format }}</span>
            <span class="sf-toolbar-label">ms</span>
        {% endset %}
        {% set text %}
            <div class="sf-toolbar-info-piece">
                <b>{{ collector.queries|length }} {{ queryLabel }}</b>
            </div>
            <div class="sf-toolbar-info-piece">
                <table class="sf-toolbar-ajax-requests">
                    <thead>
                    <tr>
                        <th>Provider</th>
                        <th>Query</th>
                        <th>Time</th>
                    </tr>
                    </thead>
                    <tbody class="sf-toolbar-ajax-request-list">
                    {% for query in collector.queries %}
                        <tr>
                            <td>{{ query.providerName }}</td>
                            <td>{{ query.queryString }}</td>
                            <td>{{ query.duration == 0 ? 'n/a' : query.duration|number_format ~ ' ms'}}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endset %}

        {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': profiler_url } %}
{% endif %}
{% endblock %}

{% block menu %}
    {# This left-hand menu appears when using the full-screen profiler. #}
    <span class="label {{ collector.queries|length == 0 ? 'disabled' }}">
        <span class="icon">
            {{ include('@BazingaGeocoder/Collector/icon.svg') }}
        </span>
        <strong>Geocoder</strong>
    </span>
{% endblock %}

{% block panel %}
    <style>
        .sf-toggle-content.sf-toggle-visible {
            display: table-row;
        }
    </style>
    <h2>Geocoder</h2>

    <div class="sf-tabs">
        {% for provider in collector.providers %}
        <div class="tab">
            <h3 class="tab-title">{{ provider }} <span class="badge">{{ collector.providerQueries(provider)|length }}</span></h3>

            <div class="tab-content">
                <p class="help">
                    These queries are executed by a provider named "{{ provider }}".
                </p>

            <table>
                <thead>
                    <tr>
                        <th style="min-width: 2rem;"></th>
                        <th style="width: 40%">Query</th>
                        <th style="min-width: 3rem;">Locale</th>
                        <th style="width: 60%">Result</th>
                        <th style="min-width: 4rem;">Duration</th>
                    </tr>
                </thead>
                <tbody>
                {% for query in collector.providerQueries(provider) %}
                    <tr>
                        <td class="font-normal text-small" nowrap="">
                            <span class="colored text-bold"># {{ loop.index }}</span>
                        </td>
                        <td class="font-normal">
                            <span class="dump-inline">
                                {{ query.queryString }}
                            </span>
                        </td>
                        <td class="font-normal">
                            <span class="dump-inline">
                                {{ query.query.locale is not null ? query.query.locale : 'null' }}
                            </span>
                        </td>
                        <td class="font-normal">
                            <span class="dump-inline">
                                {% if query.result.message is defined %}
                                    Exception
                                {% else %}
                                    {{ dump(query.resultCount) }} Result(s)
                                {% endif %}
                            </span>
                            <span class="metadata">
                                <a class="btn btn-link text-small sf-toggle" data-toggle-selector="#geocoder-{{ provider }}-{{ loop.index }}-details" data-toggle-alt-content="Hide">Show</a>
                            </span>
                        </td>
                        <td class="font-normal text-small" nowrap="">
                            {{ query.duration|number_format }} ms
                        </td>
                    </tr>
                    <tr id="geocoder-{{ provider }}-{{ loop.index }}-details" class="context sf-toggle-content sf-toggle-hidden">
                        <td></td>
                        <td>{{ profiler_dump(query.query, maxDepth=1) }}</td>
                        <td></td>
                        {% if query.result.message is defined %}
                        <td>{{ profiler_dump(query.result, maxDepth=1) }}</td>
                        {% else %}
                        <td>{{ profiler_dump(query.result, maxDepth=3) }}</td>
                        {% endif %}
                        <td></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            </div>
        </div>
        {% else %}
        <div class="empty">
            <p>No queries were executed.</p>
        </div>
        {% endfor %}
    </div>
{% endblock %}