<template>
  <div class="edit-calculation-container">
    <div class="header-container">
      <h2 class="page-header">Configuration</h2>
      <div>
        <staged-changes></staged-changes>
        <box class="box-container">
          <tab-container :tabs="tabsConfig" class="tab-container">
          </tab-container>
        </box>
      </div>
    </div>
  </div>
</template>

<script>

import BasicButton from "@/components/UI/BasicButton.vue";
import TabContainer from "@/components/UI/TabContainer.vue";
import {markRaw} from "vue";
import Properties from "@/components/layout/config/Properties.vue";
import Box from "@/components/UI/Box.vue";
import CountryProperties from "@/components/layout/config/CountryProperties.vue";
import StagedChanges from "@/components/layout/config/StagedChanges.vue";

export default {
  name: "Config",
  components: {StagedChanges, Box, TabContainer, BasicButton},
  data() {
    return {
      currentTab: null,
      tabsConfig: [
        {
          title: 'System properties',
          component: markRaw(Properties),
        },
        {
          title: 'Countries',
          component: markRaw(CountryProperties),
        },
        {
          title: 'Nodes',
          component: (null),
        },
        {
          title: 'Kilometer rates',
          component: (null),
        },
        {
          title: 'Container rates',
          component: (null),
        },
        {
          title: 'Materials & packaging',
          component: (null),
        },
        {
          title: 'Bulk operations',
          component: (null),
        }
      ]
    }
  },
}
</script>


<style scoped>

.box-container {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  flex: 1;
}

</style>