<template>
  <q-dialog v-model="showing">
    <q-card class="no-shadow" style="max-width: 80vw; width: 700px">
      <q-card-section>
        <q-table
          class="no-shadow text-grey-9"
          row-key="key"
          selection="single"
          :columns="columns"
          :data="schemas"
          :filter="filter"
          :pagination="initialPagination"
          :selected.sync="selected"
          :title="$t('processes.bpmnEditor.cloud.title')"
          :loading="loading"
        >
          <template v-slot:loading>
            <q-inner-loading showing color="primary" />
          </template>
          <template #header="props">
            <q-tr :props="props">
              <q-th />
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
                {{ $t(col.label) }}
              </q-th>
            </q-tr>
          </template>
          <template #top-right>
            <q-input
              v-model="filter"
              :placeholder="$t('processes.bpmnEditor.cloud.search')"
              debounce="1000"
              dense
              filled
            >
              <template #append>
                <q-icon name="search" />
              </template>
            </q-input>
          </template>
        </q-table>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn
          color="primary"
          flat
          :disable="!selected.length"
          :label="$t('processes.bpmnEditor.cloud.select')"
          @click="selectHandler()"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

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