Filter content : Year

<?php



$rangeDatas = __DIR__ . "/year-datas.json";



$rangeDatas = json_decode(file_get_contents($rangeDatas), true);

$nbRange = count($rangeDatas['datas']);

?>





<button @click="open = false" class="flex items-center w-full py-3.75 px-7">

    <span class="flex items-center gap-3.75 group">

        <?= icon('chevron-left', 'w-2 text-primary-accent group-hover:text-secondary transition duration-300'); ?>

        <span class="font-semibold">Année modèle</span>

    </span>

</button>

<div class="px-7">

    <div class="px-7.5"

         x-data="rangeSliderBars(<?= $rangeDatas['min'] ?>, <?= $rangeDatas['max'] ?>, <?= $rangeDatas['min'] ?>, <?= $rangeDatas['max'] ?>)"

    >

        <div class="relative" @mousemove.window="move()"  @mouseup.window="dragEnd">

            <div x-ref="bars" data-number="<?= $nbRange ?>" class="flex h-20 items-end justify-center">

                <?php foreach ($rangeDatas['datas'] as $key => $data): ?>

                    <div id="bar_<?= $key ?>" class="bar border-white border-l border-r bg-primary-light rounded-tl-[3px] rounded-tr-[3px]" data-value="<?= $data['value'] ?>" style="height: <?= $data['percent'] ?>%; width: calc(100% / 26)"></div>

                <?php endforeach; ?>

            </div>

            <div class="relative z-10 h-0.75">



                <div x-ref="rangeBar" class="absolute z-10 left-0 right-0 bottom-0 top-0 rounded-md bg-[#C2C6D3] after:bg-[#C2C6D3] after:h-0.75 after:absolute after:w-7 after:right-0 after:translate-x-full before:bg-[#C2C6D3] before:h-0.75 before:absolute before:w-7 before:left-0 before:-translate-x-full"></div>



                <button x-ref="controllerLeft"

                        class="controller-left absolute z-30 w-9 h-9 top-0 left-0 bg-white border border-[#C2C6D3] rounded-full -mt-4 -translate-x-1/2 flex gap-1.5 justify-center items-center"

                        @mousedown="triggerMin"

                        id="controllerLeft"

                >

                    <span class="h-3.5 w-px bg-[#C2C6D3] block"></span>

                    <span class="h-3.5 w-px bg-[#C2C6D3] block"></span>

                    <span class="h-3.5 w-px bg-[#C2C6D3] block"></span>

                </button>



                <button x-ref="controllerRight" class="controller-right absolute z-30 w-9 h-9 top-0 bg-white border border-[#C2C6D3] rounded-full -mt-4 translate-x-1/2 flex gap-1.5 justify-center items-center"

                        @mousedown="triggerMax">

                    <span class="h-3.5 w-px bg-[#C2C6D3] block"></span>

                    <span class="h-3.5 w-px bg-[#C2C6D3] block"></span>

                    <span class="h-3.5 w-px bg-[#C2C6D3] block"></span>

                </button>



            </div>

        </div>

        <div class="flex justify-between items-start py-5 mt-2.5 -mx-7.5 gap-2.5">

            <div class="max-w-1/2">

                <div class="form-element text">

                    <input x-ref="minInput"

                           name="Année max"

                           class="form-input form-input--blue w-40 max-w-full"

                           id="year_max"

                           type="text"

                           title="Année max"

                           placeholder=" "

                           pattern="\S+"

                           maxlength="5"

                           @keydown.enter="triggerInputMin"

                           @keydown.esc="triggerInputMin; $el.blur()"

                           x-model="minSelected"

                    >

                    <label class="label" for="year_max">

                        <span>Année max</span>

                    </label>

                </div>

            </div>

            <div class="max-w-1/2">

                <div class="form-element text">

                    <input x-ref="maxInput"

                           name="Année min"

                           class="form-input form-input--blue w-40 max-w-full"

                           id="year_min"

                           type="text"

                           title="Année min"

                           placeholder=" "

                           pattern="\S+" maxlength="5"

                           @keydown.enter="triggerInputMax"

                           @keydown.esc="triggerInputMax; $el.blur()"

                           x-model="maxSelected"

                    >

                    <label class="label" for="year_min">

                    <span>Année mini</span>

                    </label>

                </div>

        </div>

    </div>

</div>