<template>
  <div class="form-group mt-3">
    <label class="form-check-label" :for="id">
      {{ label }}
    </label>
    <div class="row g-3 align-items-center">
      <div :id="id" class="col-6">
        <div class="input-group">
          <span class="input-group-text"> Von </span>
          <input
            type="date"
            required
            :disabled="readonly"
            class="form-control"
            :value="from"
            @input="$emit('update:from', $event.target.value)"
            :min="minDate"
            :max="maxDate"
          />
        </div>
      </div>
      <div class="col-6">
        <div class="input-group">
          <span class="input-group-text"> Bis </span>
          <input
            type="date"
            :disabled="readonly"
            required
            class="form-control"
            :value="to"
            @input="$emit('update:to', $event.target.value)"
            :min="from !== null ? from : minDate"
            :max="maxDate"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "bootstrap";
import "bootstrap/dist/css/bootstrap.css";
/**
 * A bootstrap styled duration input component with a label.
 */
export default {
  name: "DurationInput",
  props: {
    id: String,
    from: String,
    to: String,
    label: String,
    required: Boolean,
    minDate: String,
    maxDate: String,
    readonly: { type: Boolean, default: false },
  },
  setup() {},
};
</script>