{% extends base_template %}
{% block page_title %}{{ dashboard.name }}{% endblock %}
{% block content %}
<style>
    :root {
        --height-offset: {{ height_offset|default(140) }}px;
        /*
            Airflow uses a padding of 70px for the header and 70px
            for the footer in versions 2.X. In Airflow 3 the page is already
            inside the plugin iframe, so the AF3 view passes an offset of 0.
            [Ref: main.css](https://github.com/apache/airflow/blob/c083e456fa02c6cb32cdbe0c9ed3c3b2380beccd/airflow/www/static/css/main.css#L22)

            We use this value to offset the height of the iframe. These values are fixed in the body css.

        */
    }

    #dbtIframe {
        min-width: 100%;
        border: 0;
        height: calc(100vh - var(--height-offset));
    }
</style>
<iframe id="dbtIframe" src="{{ dashboard.url }}"></iframe>
<script>
    if (window.embedashSyncUrl) {
        window.embedashSyncUrl('/view/{{ dashboard.id }}');
    }

    window.addEventListener('message', function (event) {
        let msgData = event.data;
        if (msgData.startsWith('#!')) {
            let updateUrl = new URL(window.location);
            updateUrl.hash = msgData;
            history.replaceState(null, null, updateUrl);
        }
    });

    window.addEventListener('popstate', function () {
        dbtIframe.contentWindow.postMessage(window.location.hash);
    });

    let dbtIframe = document.getElementById('dbtIframe');
    let iframeUrl = new URL(dbtIframe.src);
    iframeUrl.hash = window.location.hash;
    dbtIframe.src = iframeUrl.href;

</script>
{% endblock %}