@props([
    'id',
    'label' => null,
])

@php
    $label = $label ?: __('kview-ui-data::table.export.label');
@endphp

<div
    id="{{ $id }}"
    class="erp-table-settings-panel erp-table-settings-panel--export"
    data-erp-export-modal
    role="dialog"
    aria-labelledby="{{ $id }}_title"
    hidden
>
    <div class="erp-table-settings-head erp-table-settings-head--export">
        <div>
            <p class="erp-export-eyebrow">{{ __('kview-ui-data::table.data_transfer') }}</p>
            <h4 id="{{ $id }}_title">{{ $label }}</h4>
        </div>
        <x-ui.icon-button
            icon="x"
            :label="__('kview-ui-data::table.close_export')"
            variant="ghost"
            size="sm"
            :tooltip="false"
            data-erp-export-close
        />
    </div>

    <div class="erp-export-body">
        <button type="button" class="erp-export-option" data-erp-export-format="csv">
            <span class="erp-export-option-icon"><x-ui.icon name="document" size="18" /></span>
            <span>
                <strong>{{ __('kview-ui-data::table.export.csv') }}</strong>
                <small>{{ __('kview-ui-data::table.export.csv_help') }}</small>
            </span>
        </button>
        <button type="button" class="erp-export-option" data-erp-export-format="xlsx">
            <span class="erp-export-option-icon"><x-ui.icon name="spreadsheet" size="18" /></span>
            <span>
                <strong>{{ __('kview-ui-data::table.export.xlsx') }}</strong>
                <small>{{ __('kview-ui-data::table.export.xlsx_help') }}</small>
            </span>
        </button>
        <button type="button" class="erp-export-option is-disabled" disabled>
            <span class="erp-export-option-icon"><x-ui.icon name="upload" size="18" /></span>
            <span>
                <strong>{{ __('kview-ui-data::table.export.import') }}</strong>
                <small>{{ __('kview-ui-data::table.export.import_help') }}</small>
            </span>
        </button>
    </div>
</div>