<template>
  <div class="md:ml-4 mt-2 md:mt-0">
    <t-button
      class="mx-auto"
      :text="$t('ressources.submitResources')"
      @click="$modal.show('SubmitRessourceTModal')"
    />

    <t-modal
      :header="content.title"
      name="SubmitRessourceTModal"
      variant="large"
      @closed="loading = false"
    >
      <nuxt-content :document="content" />

      <div slot="footer" class="flex">
        <t-button
          text="Envoyer"
          :class="{ 'loading-state': loading }"
          :disabled="loading"
          @click="onAsk"
        />
        <t-button
          variant="text"
          class="ml-4"
          @click="$modal.hide('SubmitRessourceTModal')"
        >
          {{ $t('cancel') }}
        </t-button>
      </div>
    </t-modal>
  </div>
</template>

<script>
export default {
  name: 'RessourcesSubmitModal',
  data() {
    return {
      content: {},
      loading: false,
    }
  },
  async fetch() {
    this.content = await this.$content('ui/submit-ressource-modal').fetch()
  },
  methods: {
    onAsk() {
      this.loading = true
    },
  },
}
</script>

<style lang="scss" scoped></style>