<script lang="ts">
    import { navigate } from "svelte-routing"

    import { apiBaseURL } from "../../config"

    export let article: SWArticle
    export let cssClass: string = ""
    export let showDetails: boolean = false

    const getImageSrc = () => {
        return `${apiBaseURL}articles/${article?.id}/${article?.image?.src}?filter=l`
    }
</script>

<article class="{article?.position} {cssClass}">
    {#if article?.position !== "content"}
        <div
            class="article-image"
            style="background-image: url({getImageSrc()});"
        >
            {#if article?.title}
                <div class="article-title">{@html article?.title}</div>
            {/if}
            {#if article?.position === "top" || article?.position === "end-of-content"}
                {#if article?.subtitle}
                    <div class="article-subtitle">
                        {@html article?.subtitle}
                    </div>
                {/if}
            {/if}
        </div>
    {/if}

    {#if article?.position !== "top"}
        <div class="article-content">
            {#if article?.position === "content"}
                {#if article?.title}
                    <div class="article-title">{@html article?.title}</div>
                {/if}
            {/if}
            {#if article?.position === "content" || article?.position === "top-of-content"}
                {#if article?.subtitle}
                    <div class="article-subtitle mb-md">
                        {@html article?.subtitle}
                    </div>
                {/if}
            {/if}

            {#if !showDetails && article?.content}
                <div class="mb-lg">
                    {@html article?.content}
                </div>
            {/if}

            {#if showDetails && article?.details?.length}
                <div class="mb-lg">
                    {@html article?.details}
                </div>
            {/if}
        </div>
    {/if}

    {#if !showDetails && article?.details}
        <div
            class="article-link"
            on:click="{() => {
                navigate('/articles/' + article?.id)
            }}"
        >
            Details
        </div>
    {/if}
</article>
