<script lang="ts">
    import { navigate } from "svelte-routing/src/history"
    import { openExtendableNr, rerender, scrollToRowNr } from "../../store"
    export let pages: Page[]
    export let pageReference: string
    let jobOffers = pages.map((p) => p.jobOffer)
    let focused = -1
</script>

<div class="link-container">
    {#each jobOffers as job, i}
        {#if i < 3}
            <button
                class="row-ref fill"
                on:click="{() => {
                    $rerender = $rerender + 1
                    navigate(pageReference + '?elem=' + pages[i].id)
                }}"
                on:mouseenter="{() => {
                    focused = i
                }}"
                on:mouseleave="{() => {
                    focused = -1
                }}"
            >
                <div>
                    {job.title}
                </div>
                <svg
                    data-src="/media/arrow-r.svg"
                    stroke="{i == focused ? '#fff' : '#343a40'}"
                    fill="{i == focused ? '#fff' : '#343a40'}"
                    style="z-index: 9999; position: relative;"></svg>
            </button>
        {:else}
            <button
                on:mouseenter="{() => {
                    focused = i
                }}"
                on:mouseleave="{() => {
                    focused = -1
                }}"
                on:click="{() => {
                    $rerender = $rerender + 1
                    navigate(pageReference)
                }}"
                class="page-ref"
            >
                <div>Mehr offene Stellen</div>
            </button>
        {/if}
    {/each}
</div>

<style lang="less">
    @import "../../assets/css/main.less";
    .link-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;

        button {
            background-color: @bg-color;
            color: @font-color;

            padding: 2px 15px;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            font-size: 0.7rem;
            @media @tablet {
                font-size: initial;
            }
        }

        .row-ref {
            display: flex;
            align-items: center;
            gap: 10px;
            border: 2px solid @bg-color-secondary;
            img {
                width: 20px;
                height: auto;
            }
            &:hover {
                color: white !important;
            }
        }

        .page-ref {
            background-color: @signal-color;
            color: @font-color-secondary;
            border: 2px solid @signal-color;
        }
    }
</style>
