<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script>
    import * as tr from "@generated/ftl";
    import Item from "$lib/components/Item.svelte";

    const easyDays = [
        tr.deckConfigEasyDaysMonday(),
        tr.deckConfigEasyDaysTuesday(),
        tr.deckConfigEasyDaysWednesday(),
        tr.deckConfigEasyDaysThursday(),
        tr.deckConfigEasyDaysFriday(),
        tr.deckConfigEasyDaysSaturday(),
        tr.deckConfigEasyDaysSunday(),
    ];

    export let values = [0, 0, 0, 0, 0, 0, 0];
</script>

<Item>
    <div class="easy-days-settings">
        <span></span>
        <span class="header min-col">{tr.deckConfigEasyDaysMinimum()}</span>
        <span class="header">{tr.deckConfigEasyDaysReduced()}</span>
        <span class="header normal-col">{tr.deckConfigEasyDaysNormal()}</span>

        {#each easyDays as day, index}
            <span class="day">{day}</span>
            <div class="input-container">
                <input
                    type="range"
                    bind:value={values[index]}
                    step={0.5}
                    max={1.0}
                    min={0.0}
                    list="easy_day_steplist"
                />
            </div>
        {/each}
    </div>
</Item>

<style lang="scss">
    .easy-days-settings {
        width: 100%;
        border-collapse: collapse;

        display: grid;
        grid-template-columns: auto 1fr 1fr 1fr;

        border-collapse: collapse;
        & > * {
            padding: 8px 16px;
            border-bottom: var(--border) solid 1px;
        }
    }
    .input-container {
        grid-column: 2 / span 3;
    }
    span {
        display: flex;
        align-items: center;
        justify-content: center;

        &.min-col {
            justify-content: flex-start;
        }

        &.normal-col {
            justify-content: flex-end;
        }
    }
    .header {
        word-wrap: break-word;
        font-size: smaller;
    }
    .easy-days-settings input[type="range"] {
        width: 100%;
    }

    .day {
        word-wrap: break-word;
        font-size: smaller;
    }
</style>
