<template>
  <div
    class="no-shadow full-width bg-white q-pa-md rounded-borders relative-position q-gutter-y-md"
  >
    <div class="text-h6 q-ma-none">
      {{ $t('interagencies.newInteragencyRequestCreation') }}
    </div>

    <q-form ref="form" class="q-gutter-y-md" @submit="$emit('submit', form)">
      <q-input
        v-model="form.requestName"
        :label="$t('base.table.name')"
        filled
        :rules="[noEmptyValueRule]"
      />

      <q-input
        v-model="form.description"
        :label="$t('base.table.description')"
        filled
        :rules="[noEmptyValueRule]"
      />

      <q-input
        v-model="form.version"
        :label="$t('base.table.version')"
        filled
        :rules="[noEmptyValueRule]"
      />

      <q-input
        v-model="form.clazz"
        label="clazz"
        filled
        :rules="[noEmptyValueRule]"
      />

      <q-input
        v-model="form.provider"
        :label="$t('interagencies.owner')"
        filled
        :rules="[noEmptyValueRule]"
      />

      <div>
        <q-btn :label="$t('base.create')" type="submit" color="primary" />
        <q-btn
          @click="$emit('close')"
          :label="$t('base.close')"
          color="primary"
          flat
          class="q-ml-sm"
        />
      </div>
    </q-form>

    <q-inner-loading :showing="loading" />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { noEmptyValueRule } from '@utils/field-validation/basic';

@Component
export default class CreateInteragencyCard extends Vue {
  noEmptyValueRule = noEmptyValueRule;
  
  @Prop({}) loading: boolean;

  form = {
    requestName: '',
    description: '',
    version: '',
    clazz: '',
    provider: '',
  };
}
</script>

<style scoped></style>