<script lang="ts">
    import { type Post } from './posts_data';
    import NewsVerticalCard from '$lib/posts/NewsVerticalCard.svelte';

    export let data; // <- contains post data

    let search : string;
    $: regex = search ? new RegExp(search, 'i') : null;
    $: matches = (item : Post) =>
        regex ? regex.test(item.title) || regex.test(item.summary) : true;
    $: matched_posts = data.summaries.filter(matches);
</script>

<div class="head">
    <header>
        <h1>Blog Posts</h1>
        <input id="search" placeholder="Search Blog Posts" bind:value={search} />
    </header>
</div>

<div class="list">
    {#if matched_posts.length == 0}
        <span>No Matches</span>
    {/if}
    {#each matched_posts as summary}
        <NewsVerticalCard
            post_url="/post/{summary.url}"
            title={summary.title}
            summary={summary.summary}
            creation_date={summary.creation_date.toString()}
        />
    {/each}
</div>

<style>
    h1 {
        font-size: 48px;
        font-family: var(--title-font);
    }
    .head {
        width: 100%;
        background-color: var(--primary);
    }

    header {
        display: flex;
        flex-wrap: wrap;

        align-content: center;
        justify-content: space-around;

        padding: 0 0 20px 0;
        margin-bottom: 25px;
    }

    #search {
        height: 40px;

        align-self: center;
        border: none;
        border-radius: 10px;
        font-size: 18px;
        line-height: 2;
        padding: 0.5rem 0.8rem;
        margin-top: 0px;

        background-color: var(--background);
        color: var(--text1);
    }

    .list {
        max-width: 1500px;
        margin-inline: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 25px;

        justify-content: center;
    }

</style>
