<script lang="ts">
    import { news } from "../../store"

    const getNewsDate = (news) => {
        const from = news?.from ? new Date(news?.from) : null
        const until = news?.until ? new Date(news?.until) : null
        const options = { year: "numeric", month: "2-digit", day: "2-digit" }
        let d = ""
        if (from) {
            // @ts-ignore
            d += from.toLocaleDateString("de-DE", options)
        }
        if (until) {
            // @ts-ignore
            d += " bis " + until.toLocaleDateString("de-DE", options)
        }

        if (news.title) {
            d += " - "
        }
        return d
    }
</script>

{#if $news?.length}
    <section class="news" id="news">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Neuigkeiten</h2>
                </div>
            </div>
            <div class="row">
                {#each $news as n}
                    {#if n.title || n.from || n.until}
                        <div class="col-md-6">
                            <article>
                                <div class="title">
                                    {getNewsDate(n)}
                                    {#if n.title}
                                        {@html n.title}
                                    {/if}
                                </div>
                                {#if n.content}
                                    <div class="content">
                                        {@html n.content}
                                    </div>
                                {/if}
                            </article>
                        </div>
                    {/if}
                {/each}
            </div>
        </div>
    </section>
{/if}
