<template id="tesoft-loader-section-template">
    <style>
        @import "/src/styles/default.css";

        :host {
            display: grid;
        }

        :host > div {
            align-items: center;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            justify-items: center;
        }

        :host([loaded]) > div {
            align-self: start;
        }

        :host(:not([loaded])) slot {
            display: none;
        }

        :host([loaded]) tesoft-loader {
            display: none;
        }
    </style>

    <div>
        <tesoft-loader></tesoft-loader>
        <slot></slot>
    </div>
</template>

<script src="/src/components/loader-section.ts" type="module"></script>
{% includeOnce 'components/loader.njk' %}
