<script lang="ts">
    export let col: Column
    import { apiBaseURL } from "../../../config"
    import { fly } from "svelte/transition"
    import SiteRefs from "./siteRefs.svelte"
    import inView from "../../functions/observer"
    let visible = false
    let node
    export let rows: Row[]
</script>

<div
    class="tableContainer"
    bind:this="{node}"
    use:inView="{{ threshold: 0 }}"
    on:enter="{() => {
        visible = true
    }}"
>
    <h3>{col?.tableFieldHeading ?? ""}</h3>
    {#key visible}
        {#each col?.table ?? [] as table, i (table?.title)}
            <div class="table" in:fly="{{ duration: 1000, delay: i * 150, y: 130, opacity: 0 }}">
                <div class="tableTitle">{table?.title ?? ""}</div>

                <table>
                    {#each table?.tableRow as row}
                        <tr class:font-bold="{row.bold}">
                            {#if row?.left}
                                <td>{row?.left}</td>
                            {/if}
                            {#if row?.center}
                                <td>{row.center}</td>
                            {/if}
                            {#if row.right}
                                <td>{row?.right}</td>
                            {/if}
                        </tr>
                    {/each}
                </table>
                {#if table.hintsTable}
                    <div class="hints-table">
                        <h5>Hinweise:</h5>
                        <p>{@html table?.hintsTable}</p>
                    </div>
                {/if}
            </div>
        {/each}
    {/key}
    {#if col.hintsTable}
        <div in:fly="{{ duration: 1000, y: 130, opacity: 0 }}">
            <h5>Hinweise:</h5>
            <p>{@html col?.hintsTable}</p>
        </div>
    {/if}
    {#if col.siteRefs}
        <SiteRefs rows="{rows}" />
    {/if}
</div>

<style lang="less">
    @import "../../assets/css/variables.less";
    * {
        border: 0px solid black !important;
        transition: font-size 0ms;
    }

    .hints-table {
        padding: 0.3rem 0px;
        h5 {
            font-size: 0.85rem;
            font-weight: 700;
        }
        p {
            font-size: 0.85rem;
            padding: 0.3rem 0px;
        }
    }

    .tableContainer {
        max-width: @body-maxwidth;
        position: relative;
        height: 100%;
        width: 100%;
        line-height: normal;

        h3 {
            width: 100%;
            font-size: 2rem;
            font-weight: bold;
            margin: 0rem 0vw 1.6rem 0vw;
            color: var(--heading-font-color);
        }

        h5 {
            font-size: 0.85rem;
            font-weight: 700;
        }
        p {
            font-size: 0.85rem;
            padding: 0.3rem 0px;
        }
        .font-bold {
            font-weight: 700;
        }

        .table {
            width: 100%;
            border-collapse: collapse;

            .tableTitle {
                font-weight: bold;
                margin-bottom: 0.5rem;
            }
            table {
                width: 100%;
                tr {
                    border: 0px solid black;
                    display: flex;
                }
                td {
                    padding: 0.3rem 0px;
                    flex: 1;
                }
            }
        }
    }
</style>
