<template>
    <div class="row">
      <div class="col-12 p-0">
        <div class="card p-card">
          <figure class="title-figure">
            <blockquote class="blockquote">
              <p>{{ $t(i18nConst.bcAllowanceTitle) }}</p>
            </blockquote>
            <figcaption class="blockquote-footer subtitle-card">
              {{ $t(i18nConst.bcAllowanceSubtitle) }}
            </figcaption>
          </figure>
          <hr />
          <template v-if="!globalActionInProgress">
            <button id="confirm-allowance-btn" type="button" @click="addAllowanceBuyMetadex"
              class="btn btn-meta-1 w-100 mb-4">{{ $t(i18nConst.bcAllowanceButton) }}</button>
          </template>
          <template v-else>
            <button id="confirm-buy-btn" type="button" class="btn btn-primary disabled w-100 mb-4">{{ $t(i18nConst.actionInProgress) }}</button>
          </template>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import i18nConstantes from "@/constantes/i18n.constantes.js";
  import constantes from "@/constantes/constantes.js";
  import typeActions from "@/store/typeActions";
  import { mapGetters } from "vuex";
  
  export default {
    data() {
      return {
        i18nConst: i18nConstantes,
        constantes: constantes,
        amount: 0
      }
    },
    computed: {
      ...mapGetters("global", ["allowanceBuyMetadex", "globalActionInProgress"]),
    },
    methods: {
      addAllowanceBuyMetadex() {
        this.$store.dispatch(typeActions.addAllowanceBuyMetadex);
      }
    }
  }
  </script>
  
  <style scoped>
  </style>