<script setup lang="ts">
import { ref } from 'vue'
import IssueItemAddComment from '@/components/IssueItemAddComment.vue'
import IssueItemCommentsList from '@/components/IssueItemCommentsList.vue'
import IssueItemHistory from '@/components/IssueItemHistory.vue'

const tab = ref('one')
</script>

<template>
  <v-sheet>
    <v-tabs density="compact" class="border rounded" v-model="tab">
      <v-tab color="blue" slim value="one">Comments</v-tab>
      <v-tab color="blue" slim value="two">History</v-tab>
    </v-tabs>

    <div>
      <v-tabs-window v-model="tab">
        <v-tabs-window-item value="one">
          <div class="my-2 d-flex flex-column ga-2">
            <issue-item-add-comment />
            <issue-item-comments-list />
          </div>
        </v-tabs-window-item>
        <v-tabs-window-item value="two">
          <div class="my-2">
            <issue-item-history />
          </div>
        </v-tabs-window-item>
      </v-tabs-window>
    </div>
  </v-sheet>
</template>

<style scoped lang="scss">
.v-tabs {
  .v-tabs-slider-wrapper {
    transition: none;
  }
}
</style>
