<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { ref } from "vue";
import { FwbTab, FwbTabs } from "flowbite-vue";
import ActionTable from "../Partials/ActionTable.vue";
import DecisionTable from "../Partials/DecisionTable.vue";

const props = defineProps({
  actions: Array,
  decisions: Array,
  segments: Array,
  email_templates: { type: Array, default: () => [] },
});

const activeTab = ref("actions");
</script>
<template>
  <AppLayout title="Workflow">
    <template #header></template>
    <div class="pt-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
          <fwb-tabs v-model="activeTab" variant="underline">
            <fwb-tab name="actions" title="Akcije">
              <ActionTable
                :actions="actions"
                :decisions="decisions"
                :segments="segments"
              />
            </fwb-tab>
            <fwb-tab name="decisions" title="Odločitve">
              <DecisionTable
                :decisions="decisions"
                :actions="actions"
                :email-templates="email_templates"
              />
            </fwb-tab>
          </fwb-tabs>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
