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

        :host {
            display: block;
        }

        tesoft-loader-section, tesoft-error {
            min-height: var(--full-content-height);
        }

        .article {
            display: grid;
            gap: var(--large-padding);
            grid-template-columns: 1fr;
            grid-template-rows: auto auto;
            width: 100%;
        }

        .header {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
        }

        .header > h1 {
            align-items: center;
            display: grid;
            gap: var(--medium-padding);
            grid-template-columns: auto auto;
            grid-template-rows: auto;
            justify-content: start;
            font-size: 4.4rem;
            line-height: 4.4rem;
            padding-bottom: 0;
        }

        .dates {
            padding-bottom: 1rem;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: var(--small-padding);
        }

        img {
            object-fit: cover;
            max-width: 100%;
        }

        tesoft-error {
            height: 100%;
        }
    </style>

    <tesoft-loader-section>
        <div class="article">
            <div class="header">
                <h1></h1>
                <div class="dates">
                </div>
                <div class="tags">
                </div>
            </div>

            <div class="content"></div>
        </div>

        <tesoft-error class="hidden">
        </tesoft-error>
    </tesoft-loader-section>
</template>

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