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

    export let col: Column
    export let pageId: string

    let months = [
        "Januar",
        "Februar",
        "März",
        "April",
        "Mai",
        "Juni",
        "Juli",
        "August",
        "September",
        "Oktober",
        "November",
        "Dezember",
    ]

    let displayedItems = 4
    const itemsPerPage = 4

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

<div class="events">
    {#each col.networkEvents.slice(0, displayedItems) as nE}
        <div class="event">
            <div class="calendar">
                <div class="calendar-icon"><img src="/media/calendar.svg" alt="calendar" /></div>
                <div class="date">
                    <div class="month">{months[new Date(nE.beginDate).getMonth()]}</div>
                    <div class="day">
                        {new Date(nE.beginDate).getDate()}
                        {#if nE.endDate}
                            - {new Date(nE.endDate).getDate()}
                        {/if}
                    </div>
                </div>
            </div>
            <div class="details">
                <em>{nE.title}</em>
                <a
                    href="{apiBaseURL}medialib/{nE.file}/{$mediaLibrary?.[nE?.file]?.file?.src}"
                    style="text-decoration: none;"
                    download="{apiBaseURL}medialib/{nE.file}/{$mediaLibrary?.[nE?.file]?.file?.src}"
                    
                >
                    <button class="more">mehr</button></a
                >
            </div>
        </div>
    {/each}
    {#if displayedItems < col.networkEvents.length}
        <button on:click="{showMore}" class="fill"><div>Weitere Events</div></button>
    {/if}
</div>

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

    .events {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        button {
            padding: 2px 15px;
            border: 2px solid @bg-color-secondary;
            margin-top: 40px;
            font-weight: bold;
        }
        .event {
            width: 100%;
            display: flex;
            .details {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-between;
                padding: 24px 20px;
                gap: 10px;
                @media @tablet {
                    padding: 0px 0px 0px 20px;
                    flex-direction: row;
                    align-items: center;
                }
                em {
                    font-weight: bold;
                }
                .more {
                    background-color: @bg-color-secondary;
                    color: @font-color-secondary;
                    border: none;
                    height: 36px;
                    padding: 2px 15px;
                    font-size: 20px;
                    font-weight: bold;
                    cursor: pointer;
                }
            }
            .calendar {
                width: 110px;
                min-width: 110px;
                display: flex;
                border-right: @bg-color-secondary 2px solid;
                flex-direction: column;
                align-items: center;
                @media @tablet {
                    flex: 1;
                    gap: 10px;
                    padding: 32px 35px 0px 0px;
                    max-width: 210px;
                    flex-direction: row;
                }
                .calendar-icon {
                    width: 56px;
                    height: 56px;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }
                .date {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    width: fit-content;
                    .month {
                        font-size: 0.7rem;
                    }
                    .day {
                        font-size: 1.2rem;
                        font-family: "Libre Caslon Text", serif;
                    }
                }
            }
        }
    }
</style>
