<!--
Page Paramètres
-->
<template>
  <LayoutContainer>
    <v-col cols="12" sm="12" md="12">
      <v-tabs
          v-model="currentTab"
          bg-color="primary"
          color="on-primary"
          grow
      >
        <v-tab v-for="tab in tabs" :value="tab">
          {{ $t(tab) }}
        </v-tab>
      </v-tabs>

      <v-card-text>
        <v-window v-model="currentTab">
          <v-window-item value="organization_page">
            <LayoutParametersOrganizationPageTab />
          </v-window-item>

          <v-window-item value="preferences">
            <LayoutParametersPreferencesTab />
          </v-window-item>

          <v-window-item value="places">
            <LayoutParametersPlacesTab />
          </v-window-item>

          <v-window-item value="education">
            <LayoutParametersEducationTab />
          </v-window-item>

          <v-window-item value="tags">
            <LayoutParametersTagsTab />
          </v-window-item>

          <v-window-item value="activities">
            <LayoutParametersActivitiesTab />
          </v-window-item>

          <v-window-item value="billing">
            <LayoutParametersBillingTab />
          </v-window-item>
        </v-window>
      </v-card-text>

    </v-col>
  </LayoutContainer>
</template>

<script setup lang="ts">
  const currentTab: Ref<string | null> = ref(null)

  const tabs = [
      'organization_page',
      'preferences',
      'places',
      'education',
      'tags',
      'activities',
      'billing'
  ]

</script>

<style scoped lang="scss">

</style>
