<template>
  <div class="border-b mb-5 border-b-base-200">
    <div class="mb-2">Цена</div>
    <div class="flex justify-between">
      <label class="input mr-3">
        От
        <input
            type="number"
            inputmode="numeric"
            class="grow"
            min="0"
            step="50"
            :placeholder="filter.criteria.product_price.params.value.from || '0'"
            v-model="filter.criteria.product_price.params.value.from"
        />
      </label>

      <label class="input">
        До
        <input
            type="number"
            inputmode="numeric"
            class="grow"
            min="0"
            step="50"
            :placeholder="filter.criteria.product_price.params.value.to || '∞'"
            :value="filter.criteria.product_price.params.value.to"
            v-model="filter.criteria.product_price.params.value.to"
        />
      </label>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  filter: {
    required: true,
  },
});
</script>

<style scoped lang="scss">

</style>