<template>
  <q-card class="col-12">
    <q-card-section class="fit row justify-start content-center items-center">
      <div class="col-12 text-center text-h6">{{ apiKey.name }}</div>
      <q-btn
        class="absolute-top-right q-ma-sm"
        color="negative"
        icon="mdi-delete"
        round
        @click="$emit('delete', apiKey)"
      />
    </q-card-section>
    <q-card-section class="fit row justify-start content-center items-center q-gutter-sm">
      <q-input class="fit" type="textarea" outlined label="Description" readonly />
    </q-card-section>
  </q-card>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
export default defineComponent({
  name: 'ApiKey',
  props: {
    apiKey: {
      type: Object as PropType<FG.ApiKey>,
      required: true,
    },
  },
  emits: {
    delete: (apiKey: FG.ApiKey) => !!apiKey,
  },
  setup() {
    return {};
  },
});
</script>
