<template>
  <div class="row mb-3">
    <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
      {{ trans(EVALUATION_STARTDATE) }}
    </label>
    <div class="col-8 col-sm-4 col-md-8 col-lg-4">
      <input
        class="form-control form-control-sm"
        type="date"
        :value="startDate"
        @input="$emit('update:startDate', $event.target.value)"
      />
    </div>

    <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
      {{ trans(EVALUATION_ENDDATE) }}
    </label>
    <div class="col-8 col-sm-4 col-md-8 col-lg-4">
      <input
        class="form-control form-control-sm"
        type="date"
        :value="endDate"
        @input="$emit('update:endDate', $event.target.value)"
      />
    </div>
  </div>

  <div class="row mb-3">
    <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
      {{ trans(EVALUATION_MAXDATE) }}
    </label>
    <div class="col-8 col-sm-4 col-md-8 col-lg-4">
      <input
        class="form-control form-control-sm"
        type="date"
        :value="maxDate"
        @input="$emit('update:maxDate', $event.target.value)"
      />
    </div>

    <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
      {{ trans(EVALUATION_WARNING_INTERVAL) }}
    </label>
    <div class="col-8 col-sm-4 col-md-8 col-lg-4">
      <input
        class="form-control form-control-sm"
        type="number"
        :value="warningInterval"
        @input="$emit('update:warningInterval', $event.target.value)"
      />
    </div>
  </div>
</template>

<script setup>
import {
  EVALUATION_STARTDATE,
  EVALUATION_ENDDATE,
  EVALUATION_MAXDATE,
  EVALUATION_WARNING_INTERVAL,
  trans,
} from "translator";

defineProps(["startDate", "endDate", "maxDate", "warningInterval"]);
defineEmits([
  "update:startDate",
  "update:endDate",
  "update:maxDate",
  "update:warningInterval",
]);
</script>
