{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block init_script %}

try {
  require(
    ['sources/generated/performance_diagnostic', 'sources/pgadmin'],
    function(performDiagnostic, pgAdmin) {
      var performanceDiagnostic = window.pgAdmin.Browser.performanceDiagnostic;
      performanceDiagnostic.loadQueryDashboard(document.getElementById('performanceDiagnostic-query-container'), {{ uniqueId }}, '{{ query_id }}', {{ sample_time }}, '{{ report_time }}', '{{layout|safe}}');

    },
    function() {
      console.log(arguments);
    });
} catch (err) {
  console.log(err);
}
{% endblock %}
{% block body %}
<style>
    #performanceDiagnostic-query-container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #performanceDiagnostic-query-container:not(:empty) + .pg-sp-container {
        display: none;
    }
</style>
{% if is_desktop_mode and is_linux %}
<style>
    body
</style>
{% endif %}
<div id="performanceDiagnostic-query-container" tabindex="0">
    <div class="pg-sp-container">
        <div class="pg-sp-content">
            <div class="row">
                <div class="col-12 pg-sp-icon">Test....</div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block css_link %}
{% for stylesheet in stylesheets %}
<link type="text/css" rel="stylesheet" href="{{ stylesheet }}"/>
{% endfor %}
<link type="text/css" rel="stylesheet" href="{{ url_for('browser.browser_css')}}"/>
{% endblock %}