<template>
<BasePage>
<!-- Page Header -->
<BasePageHeader :title="$t('invoices.title')">
<BaseBreadcrumb>
<BaseBreadcrumbItem
:title="$t('general.home')"
:to="`/${globalStore.companySlug}/customer/dashboard`"
/>
<BaseBreadcrumbItem :title="$t('invoices.invoice', 2)" to="#" active />
</BaseBreadcrumb>
<template #actions>
<BaseButton
v-show="invoiceStore.totalInvoices"
variant="primary-outline"
@click="toggleFilter"
>
{{ $t('general.filter') }}
<template #right="slotProps">
<BaseIcon
v-if="!showFilters"
name="FilterIcon"
:class="slotProps.class"
/>
<BaseIcon v-else name="XIcon" :class="slotProps.class" />
</template>
</BaseButton>
</template>
</BasePageHeader>
<BaseFilterWrapper v-show="showFilters" @clear="clearFilter">
<BaseInputGroup :label="$t('invoices.status')" class="px-3">
<BaseSelectInput
v-model="filters.status"
:options="status"
searchable
:allow-empty="false"
:placeholder="$t('general.select_a_status')"
/>
</BaseInputGroup>
<BaseInputGroup
:label="$t('invoices.invoice_number')"
color="black-light"
class="px-3 mt-2"