<script setup lang="ts">
import { ref } from 'vue';
import {timeBookingsNewProcess}
  from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/TimeBookingsNewProcess.vue";
</script>

<template>
  <p v-if="!timeBookingsNewProcess.isCurrentStepValid()">
    <ul>
      <template v-for="condition in timeBookingsNewProcess.getCurrentStepConditions()">
        <li v-if="condition.message"
            :class="{ 'has-text-danger': !condition.condition(), 'has-text-grey': condition.condition() }"
        >
          <!-- Icon -->
          <span class="icon is-small">
            <i :class="condition.condition() ? 'fas fa-check' : 'fas fa-xmark'"></i>
          </span>
          {{ condition.message }}
        </li>
      </template>
    </ul>
  </p>
  <button
      v-if="timeBookingsNewProcess.isNextStepAvailable()"
      class="button is-fullwidth is-primary"
      @click="timeBookingsNewProcess.nextStep()"
      v-bind:disabled="!timeBookingsNewProcess.isCurrentStepValid()"
  >
    <span>Næste trin</span>
    <span class="icon is-small">
      <i class="fas fa-arrow-right"></i>
    </span>
  </button>
</template>

<style scoped>

</style>