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

        :host {
            display: block;
        }

        :host > div {
            display: grid;
            gap: var(--medium-padding);
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr auto;
        }

        tesoft-loader-section, .list, tesoft-error {
            min-height: calc(var(--full-content-height) - 10rem);
        }

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

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

        .item {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
            text-decoration: none;
        }

        .item > h3 {
            align-items: center;
            display: grid;
            gap: var(--medium-padding);
            grid-auto-columns: auto;
            grid-auto-flow: column;
            justify-content: start;
            padding-bottom: 0;
        }

        .item > .dates {
            padding-bottom: var(--small-padding);
        }

        tesoft-pagination {
            justify-self: center;
        }
    </style>

    <div>
        <div class="tags"></div>
        <tesoft-loader-section>
            <div class="list">
            </div>

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

<template id="tesoft-blog-article-list-item-template">
    <a class="item">
        <h3>Title</h3>
        <div class="dates">
        </div>
        <div class="tags">
        </div>
    </a>
</template>

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