<template>
  <div>
    <p
      v-if="
        $route.name === 'processes-editor' &&
        (this.$q.screen.xs || this.$q.screen.sm)
      "
      class="q-pa-md"
    >
      {{ $t('processes.bpmnEditor.openInDesktop') }}
    </p>
    <div v-else-if="$route.name === 'processes-editor'">
      <q-tabs
        v-model="tabId"
        active-color="primary"
        align="left"
        class="bg-white text-grey"
        indicator-color="primary"
        inline-label
        no-caps
      >
        <q-tab
          v-for="tab in tabs"
          :key="`tab-${tab.id}`"
          :label="tab.name"
          :name="tab.id"
          @click.middle="closeTab($event, tab.id)"
        >
          <q-btn
            class="q-ml-sm"
            v-if="!isSingleTab"
            dense
            icon="close"
            round
            size="6px"
            @click="closeTab($event, tab.id)"
          >
            <q-tooltip>Закрыть вкладку</q-tooltip>
          </q-btn>
        </q-tab>
        <q-btn v-if="!isTabsLimit" icon="add" stretch @click="addTab">
          <q-tooltip>Создать вкладку</q-tooltip>
        </q-btn>
      </q-tabs>
      <q-separator />
      <q-tab-panels v-model="tabId" animated keep-alive>
        <q-tab-panel
          v-for="tab in tabs"
          :key="`tab-panel-${tab.id}`"
          :name="tab.id"
        >
          <component :is="tab.component" :schema="tab.schema" />
        </q-tab-panel>
      </q-tab-panels>
    </div>
    <div v-else class="q-gutter-x-md">
      <q-btn
        :label="$t('processes.bpmnEditor.label')"
        color="primary"
        to="editor"
      />
    </div>
  </div>
</template>

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

<style lang="scss" scoped />
