<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-select
          label="Choose new cycle for this task..."
          outlined
          item-value="id"
          item-text="name"
          :items="openCycles"
          v-model="form.selectedCycle"
          required
          :rules="[ (value) => !!value || 'New Cycle is required.']"
        ></v-select>
      </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', ['getCycleTodo']),
    openCycles() {
      return this.getCycleTodo.map(c=>{return {id:c.id, name:"Cycle #"+c.id}});
    },
    hasTitleSlot() {
      return !!this.$slots.title
    }
  }
}
</script>

<style scoped>

</style>