<script lang="ts">
    import { onMount } from "svelte"
    import { openExtendableNr } from "../../store"

    export let pages: Page[]
    export let opened = ""
    let jobOffers = pages.map((p) => p.jobOffer)
    onMount(() => {
        opened = location.search.split("=").at(-1)
    })
</script>

<div class="boxes">
    {#each jobOffers as box, i}
        <div class="box" class:opened="{pages[i].id == opened}">
            <div
                class="upper"
                on:keydown
                on:click="{() => {
                    if (opened == pages[i].id) opened = ''
                    else opened = pages[i].id
                }}"
            >
                <h4>
                    {box.title}
                </h4>
                <div>
                    {#if pages[i].id !== opened}<img src="/media/down.svg" alt="arrow" />{:else}<img
                            src="/media/up.svg"
                            alt="arrow"
                        />{/if}
                </div>
            </div>
            <div class="content" class:closed="{pages[i].id !== opened}">
                {@html box.text}
                {#if box.emailButton}
                    <a
                        href="mailto:bewerbung@fontis.de?subject={box.emailSubject || 'Bewerbung'}"
                        style="text-decoration: none;"
                        class="button"
                    >
                        <button> bewerben </button>
                    </a>
                {/if}
            </div>
        </div>
    {/each}
</div>

<style lang="less">
    @import "../../assets/css/main.less";
    button {
        margin-top: 20px;
        background-color: @bg-color-secondary;
        color: @font-color-secondary;
        border: 2px solid @bg-color-secondary;
        padding: 2px 15px;
        font-weight: bold;
    }

    .boxes {
        display: flex;
        flex-direction: column;
        font-family: "Libre Franklin", "sans-serif";
        .box {
            border-bottom: 2px dotted @bg-color-secondary;
            display: flex;
            transition: padding-bottom 1s;
            padding-bottom: 0px;
            flex-direction: column;
            padding-top: 20px;
            gap: 20px;
            &.opened {
                padding-bottom: 20px;
            }
            .upper {
                cursor: pointer;
                font-size: 1.4rem;
                @media @tablet {
                    font-size: 1.6rem;
                }
                font-weight: 500;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .content {
                max-height: 1000px;
                overflow: hidden;
                transition: max-height 1s ease-in;

                &.closed {
                    max-height: 0px;
                }
            }
        }
    }
</style>
