<script lang="ts">
    import { apiBaseURL } from "../../../config"

    export let col: Column
    export let pageId: string

    let displayedItems = 3
    const itemsPerPage = 3

    function showMore() {
        displayedItems += itemsPerPage
    }
</script>

<div class="publications">
    {#each col.publications.slice(0, displayedItems) as publication}
        <div class="publication">
            <div class="left"><img src="/media/file.svg" alt="file" /></div>
            <div class="right">
                <div class="content">{@html publication.content}</div>
                <div class="download">
                    <a
                        href="{apiBaseURL}page/{pageId}/{publication.file.src}"
                        download="{apiBaseURL}page/{pageId}/{publication.file.src}"
                    >
                        <button class="download-button">zur Publikation</button>
                    </a>
                </div>
            </div>
        </div>
    {/each}
</div>
{#if displayedItems < col.publications.length}
    <button on:click="{showMore}">Weitere Publikationen</button>
{/if}

<style lang="less">
    @import "../../assets/css/main.less";

    button {
        padding: 2px 15px;
        border: 2px solid @bg-color-secondary;
        margin-top: 40px;
        font-weight: bold;
    }
    .publications {
        gap: 60px;
        display: flex;
        flex-direction: column;
        @media @tablet {
            flex-direction: row;
            flex-wrap: wrap;
        }
        .publication {
            max-width: 370px;
            display: flex;
            align-items: flex-start;
            .left {
                max-width: 75px;
                flex: 1;
            }
            .right {
                padding-left: 20px;
                border-left: 2px solid @bg-color-secondary;
                flex: 1;
                button {
                    background-color: @bg-color-secondary;
                    color: @font-color-secondary;
                    border: 2px solid @bg-color-secondary;
                    padding: 2px 15px;
                    font-weight: bold;
                    cursor: pointer;
                }
            }
        }
    }
</style>
