<template>
  <div class="q-pa-md q-gutter-y-md">
    <div
      class="flex justify-between items-center bg-white q-pa-md rounded-borders"
    >
      <div class="column justify-center text-h5" style="min-height: 36px">
        {{ $t('processes.label') }}
      </div>
      <div
        v-if="$AC.haveScope(USER_SCOPES.CAMUNDA_COCKPIT_ACCESS)"
        class="row q-gutter-x-md"
      >
        <q-btn
          href="/service/wf/admin/orgstaff/camunda/app/cockpit/default/#/processes"
          color="primary"
          :label="$t('processes.list')"
          target="_blank"
          type="a"
        />
        <q-btn
            @click="showDialog = true"
            color="primary"
            :label="$t('processes.logLabel')"
        />
        <q-dialog v-model="showDialog" persistent>
          <q-card style="min-width: 500px">

            <q-card-section class="q-pt-none">
              <q-input dense autofocus v-model="logId"/>
            </q-card-section>

            <q-card-section class="q-pt-none">
              <q-radio v-model="shape" val="fullLog" label="full log" />
            </q-card-section>

            <q-card-section class="q-pt-none">
              {{logList}}
            </q-card-section>

            <q-card-actions align="right" class="text-primary">
              <q-btn flat label="Cancel" v-close-popup />
              <q-btn flat label="Get log" @click="getLogs"/>
            </q-card-actions>
          </q-card>
        </q-dialog>
      </div>
    </div>
    <processes-editor-component />
  </div>
</template>

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