<template>
  <v-card class="pa-5">
    <v-card-text class="text-center pt-10">
      <v-icon size="75" color="info">mdi-clipboard-check-outline</v-icon>
    </v-card-text>

    <v-card-title class="text-h5 justify-center" v-if="hasTitleSlot">
      <slot name="title"></slot>
    </v-card-title>
    <v-form ref="form" lazy-validation>
      <v-card-text class="text-center pb-10 text--primary body-2">
        <v-text-field
                        label="Insert the amount of hours spent on the task..."
                        v-model="form.effortReal"
                        outlined
                        required
                        type="number"
                        :rules="[
                          value => !!value || 'Amount of hours is required.',
                          value => value > 0 || 'Amount of hours must be greater zero.',
                          value => value <= 150 || 'Amount of hours must be smaller than 150.'
                        ]"
                      ></v-text-field>
      </v-card-text>
  </v-form>
    <v-card-actions>
      <v-btn
        text
        @click="$emit('on-cancel')"
      >
        Cancel
      </v-btn>
      <v-spacer></v-spacer>
      <v-btn
        color="primary"
        depressed
        min-width="150"
        @click="$emit('on-continue')"
        :loading="loading"
      >
        Continue
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "DialogCycle",
  props: ['loading', "form"],
  computed: {
    ...mapGetters('site'),
    hasTitleSlot() {
      return !!this.$slots.title
    }
  }
}
</script>

<style scoped>

</style>