<template>
<PaymentModeModal />
<BaseSettingCard
:title="$t('settings.payment_modes.title')"
:description="$t('settings.payment_modes.description')"
>
<template #action>
<BaseButton
type="submit"
variant="primary-outline"
@click="addPaymentMode"
>
<template #left="slotProps">
<BaseIcon :class="slotProps.class" name="PlusIcon" />
</template>
{{ $t('settings.payment_modes.add_payment_mode') }}
</BaseButton>
</template>
<BaseTable
ref="table"
:data="fetchData"
:columns="paymentColumns"
class="mt-16"
>
<template #cell-actions="{ row }">
<PaymentModeDropdown
:row="row.data"
:table="table"
:load-data="refreshTable"
/>
</template>
</BaseTable>
</BaseSettingCard>
</template>
<script setup>
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { usePaymentStore } from '@/scripts/admin/stores/payment'
import { useDialogStore } from '@/scripts/stores/dialog'
import { useModalStore } from '@/scripts/stores/modal'
import PaymentModeModal from '@/scripts/admin/components/modal-components/PaymentModeModal.vue'