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

{% block css_link %}
<link type="text/css" rel="stylesheet" href="{{ url_for('browser.browser_css')}}"/>
{% endblock %}
{% block body %}
<style>
    body {padding: 0px;}
    #erd-tool-container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    #erd-tool-container:not(:empty) + .pg-sp-container {
        display: none;
    }
</style>
<div id="erd-tool-container" class="d-flex flex-column">
<div class="pg-sp-container">
    <div class="pg-sp-content">
        <div class="row">
            <div class="col-12 pg-sp-icon"></div>
        </div>
    </div>
</div>
</div>
{% endblock %}
{% block init_script %}
    try {
        require(
            ['sources/generated/browser_nodes'],
            function() {
                require(['sources/generated/erd_tool'], function(module) {
                window.pgAdmin.Tools.ERD.loadComponent(
                    document.getElementById('erd-tool-container'), {{ params|safe }});
            }, function() {
                console.log(arguments);
            });
        },
        function() {
            console.log(arguments);
        });
    } catch (err) {
        console.log(err);
    }
{% endblock %}