{% if page.entries %}
<div id="listingComponent">
    {%- include 'components/pagination.html' -%}

    <ul class="scrollable-list">
        {%- for entry in page.entries.items %}
        <li class="list-item" each="entry in filteredItems" index="{{loop.index0}}">
            <div class="head">
                <a class="title" href="{{entry.url}}" attrs="{href: entry.url}">{{loop.index}}.
                    {{entry.title}}
                </a>
                <div class="date">{{entry.date.strftime('%a, %B %d')}}</div>
            </div>
            <div class="tags">
                from: {{entry.author}}
            </div>
        </li>
        {%- endfor %}
    </ul>
</div>

<style>

    .color-chips {
        background-color: #1b8ef4;
        padding: .564rem;
        border-radius: 5px;
        margin:.564rem;
        display: inline-block;
    }
    #listingComponent {
        border-radius: 12px;
        font-size: 1.2rem;

        & input#filter-list {
            width: 100%;
            border-radius: .345rem;
            color: white;
        }

        .scrollable-list {
            /*max-height: 300px;*/
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .list-item {
            display: flex;
            flex-direction: column;
            gap: .25em;
        }

        & .excerpt {
            line-height: 1.456rem;
        }

        & .head {
            display: flex;
            justify-content: space-between;
        }

        & h1 {
            font-size: 1.6rem;
        }

        & ul li a {
            color: inherit;
            font-weight: 900;
        }

        & ul li {
            list-style: none;
            /* padding: .756rem; */
            /* background: #0000007a; */
            border-radius: .345rem;
            margin-bottom: calc(.5rem * calc(1 - 0));
            margin-top: 0;
        }

    }
</style>
{% endif %}