<template>
  <div class="bg-white q-gutter-y-md q-mt-md q-mx-md q-pt-sm q-px-md">
    <div class="col text-primary q-pa-sm">
      <div class="no-wrap overflow-auto row">
        <template v-for="tab in tabsCast">
          <q-btn
            v-if="tab.path === currentTab"
            :key="tab.id"
            :label="tab.name"
            :icon="tab.icon"
            class="text-grey-9 text-no-wrap"
            unelevated
            >
            <template>
              <div v-if="tab.unsaved" class="circle-base-tabs bg-red-8"></div>
            </template>
          </q-btn>
          <q-btn
            :key="tab.id"
            v-else
            :label="tab.name"
            v-show="isVisible(tab)"
            :icon="tab.icon"
            class="text-grey-5 text-no-wrap"
            unelevated
            @click="clickHandlerCast(tab)"
            >
            <template>
              <div v-if="tab.unsaved" class="circle-base-tabs"></div>
            </template>
          </q-btn>
        </template>
      </div>
      <q-separator />
    </div>
  </div>
</template>

<script lang="ts" src="./index.ts" />

<style scoped lang="scss">
  .circle-base-tabs {
    width: 12px;
    height: 12px;
    background: #e57373;
    border-radius: 50%;
    position: relative;
    left: 6px;
    bottom: 6px;
  }
  </style>