<template>
  <div>
    <template>
      <div
        class="flex items-center bg-white q-pa-md q-mt-md q-mx-md rounded-borders"
      >
        <q-btn
          v-if="$router.$history.hasPrevious"
          padding="xs"
          class="text-grey-7 q-mr-md"
          color="grey-3"
          icon="arrow_back"
          @click="$router.back()"
        />

        <div class="title text-h6 text-grey-10">
          {{ schema && schema.label }}
        </div>

        <div class="q-ml-auto">
          <q-toggle
            v-model="rawMode"
            label="JSON"
            class="q-mr-md"
            keep-color
            color="secondary"
          />

          <q-btn
            unelevated
            label="Сохранить схему"
            color="primary"
            icon="save"
            @click="saveSchema"
          >
            <q-tooltip :delay="500"> Сохранить схему </q-tooltip>
          </q-btn>
        </div>
      </div>

      <div
        v-if="schema"
        class="bg-white q-pa-md q-mt-md q-mx-md rounded-borders"
      >
        <MicroSchemaConstructor
          v-if="!rawMode"
          ref="msConstructor"
          :should-init="true"
          :show-header="false"
          :ext-schema="schema"
          :ext-service="modelerService"
          :schemaDoc="schemaDoc"
        />
        <div v-else class="raw-mode">
          <v-json-editor
            ref="jsoneditor"
            v-model="schema"
            height="calc(100vh - 51px - 72px - 80px)"
            :options="{
              mode: 'code',
              mainMenuBar: false,
            }"
          />
        </div>
      </div>
    </template>

    <q-inner-loading :showing="!schema">
      <q-spinner-gears color="primary" size="50px" />
    </q-inner-loading>
  </div>
</template>

<script src="./schema-page.ts" lang="ts"></script>
