<div class="panel panel-default">
    <div class="panel-heading">
        <ul id="output-tabs" class="nav nav-pills">
            <li>
                <a id="raw-output-tab-link" data-toggle="tab" href="#raw-output-tab">Output</a>
            </li>
            {% if info.formatted %}
            <li>
                <a id="formatted-output-tab-link" data-toggle="tab" href="#formatted-output-tab">Formatted</a>
            </li>
            {% endif %}
            <li class="pull-right active">
                <a id="help-tab-link" data-toggle="tab" href="#help-tab">Help</a>
            </li>
        </ul>
    </div>
    <div class="panel-body">
        <div id="progress" class="progress" hidden>
            <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar" style="width: 0%">
            </div>
        </div>
        <div id="error-alert" role="alert" class="alert alert-danger" hidden>
            <span class="glyphicon glyphicon-exclamation-sign"></span>
            <span id="alert-text" class="text-capitalize"> An unhandled error occurred.</span>
        </div>
        <div class="tab-content">
            <div id="raw-output-tab" role="tabpanel" class="tab-pane fade">
                <div>
                    <button id="copy-button" type="button" class="btn btn-default btn-copy" data-toggle="tooltip"
                    title="Copy output to clipboard" data-placement="left" data-clipboard-target="#raw-output">
                        <span class="glyphicon glyphicon-copy"></span>
                    </button>
                </div>
                <pre id="raw-output" class="output">Execute a query to see raw output here</pre>
            </div>
            <div id="formatted-output-tab" role="tabpanel" class="tab-pane fade">
                <div id="formatted-output" class="table-responsive">
                    <p id="formatted-output-msg">Execute a query to see formatted output here</p>
                </div>
            </div>
            <div id="help-tab" role="tabpanel" class="tab-pane fade in active">
                {% include "djangolg/help.html" %}
            </div>
        </div>
    </div>
</div>
