{% import "_includes/forms" as forms %}
{% do view.registerAssetBundle("craft\\query\\QueryAsset") %}

<form id="query-form" method="post" action="" accept-charset="UTF-8">
    {{ getCsrfInput() }}

    <input type="hidden" name="action" value="query/execute">
    <div class="field first">
        {{ forms.textarea({
            id: 'query-sql',
            name: 'sql',
            class: 'nicetext code',
            value: (sql is defined ? sql : null),
            first: true,
            autofocus: true
        }) }}
    </div>

    <input type="submit" class="btn submit" value="Execute">
</form>

<div id="query-result"></div>

{% if result is defined %}
    {% if result | length %}
        <table class="data">
            <thead>
                <tr>
                    {% for column in result[0] | keys %}
                        <th scope="col">{{ column }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in result %}
                    <tr>
                        {% for cell in row %}
                            <td style="vertical-align: top"><pre>{{ cell }}</pre></td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>No results.</p>
    {% endif %}
{% endif %}