<template>
  <div class="flex h-full w-full relative">
    <div class="w-2/12 flex flex-col relative">
      <!-- Settings Categories -->
      <div class="relative p-2.5">
        <h3>Settings</h3>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </div>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'character' }" @click.stop="settingCategory = 'character'">
        <span>Character</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'account' }" @click.stop="settingCategory = 'account'">
        <span>Account</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'audio' }" @click.stop="settingCategory = 'audio'">
        <span>Audio</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'video' }" @click.stop="settingCategory = 'video'">
        <span>Video</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
    </div>
    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>

    <!-- Assets list -->
    <div class="overflow-auto h-full w-10/12 flex flex-col relative">
      <CharacterSettings v-show="settingCategory == 'character'" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CharacterSettings from '@/components/gui/partials/settings/CharacterSettings.vue'

let settingCategory = ref('character')
</script>