<x-jetstream.form-section submit="">
    <x-slot name="title">
        {{ __('Download your personal data') }}
    </x-slot>

    <x-slot name="description">
        {{ __('Your data belongs to you. You have the right to know what information we have collected about you and how it is used. Furthermore we support your right to transfer your data to another service or platform.') }}
    </x-slot>

    <x-slot name="form">
        <!-- Transactions Export Section -->
        <div class="col-span-8 sm:col-span-4 !font-normal">
            <x-jetstream.label for="export-transactions" value="{{ __('Export transactions') }}" />
            <p class="mt-1 text-sm text-gray-600">
                {{ __('Export all transactions from your accounts') }}
            </p>
            <div class="mt-4 flex flex-wrap gap-2">
                <x-jetstream.secondary-button wire:click="exportTransactions('ods')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportTransactions('ods')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('ODS') }}
                    </span>
                    <span wire:loading wire:target="exportTransactions('ods')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportTransactions('xlsx')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportTransactions('xlsx')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('XLSX') }}
                    </span>
                    <span wire:loading wire:target="exportTransactions('xlsx')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportTransactions('csv')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportTransactions('csv')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('CSV') }}
                    </span>
                    <span wire:loading wire:target="exportTransactions('csv')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportTransactions('json')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportTransactions('json')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('JSON') }}
                    </span>
                    <span wire:loading wire:target="exportTransactions('json')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>
            </div>
        </div>

                    <div class="col-span-8 sm:col-span-4 !font-normal">
            {{-- <div class="border-t border-gray-200 pt-6"></div> --}}
        </div>

        <!-- Profile Data Export Section -->
        <div class="col-span-8 sm:col-span-4 !font-normal">
            <x-jetstream.label for="export-profile" value="{{ __('Export profile') }}" />
            <p class="mt-1 text-sm text-gray-600">
                {{ __('Export your profile information') }}
            </p>
            <div class="mt-4 flex flex-wrap gap-2">
                <x-jetstream.secondary-button wire:click="exportProfileData('ods')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportProfileData('ods')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('ODS') }}
                    </span>
                    <span wire:loading wire:target="exportProfileData('ods')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportProfileData('xlsx')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportProfileData('xlsx')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('XLSX') }}
                    </span>
                    <span wire:loading wire:target="exportProfileData('xlsx')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportProfileData('csv')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportProfileData('csv')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('CSV') }}
                    </span>
                    <span wire:loading wire:target="exportProfileData('csv')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportProfileData('json')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportProfileData('json')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('JSON') }}
                    </span>
                    <span wire:loading wire:target="exportProfileData('json')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>
            </div>
        </div>

                    <div class="col-span-8 sm:col-span-4 !font-normal">
            {{-- <div class="border-t border-gray-200 pt-6"></div> --}}
        </div>

        <!-- Messages Export Section -->
        <div class="col-span-8 sm:col-span-4 !font-normal">
            <x-jetstream.label for="export-messages" value="{{ __('Export messages') }}" />
            <p class="mt-1 text-sm text-gray-600">
                {{ __('Export all messages from your conversations') }}
            </p>
            <div class="mt-4 flex flex-wrap gap-2">
                <x-jetstream.secondary-button wire:click="exportMessages('ods')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportMessages('ods')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('ODS') }}
                    </span>
                    <span wire:loading wire:target="exportMessages('ods')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportMessages('xlsx')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportMessages('xlsx')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('XLSX') }}
                    </span>
                    <span wire:loading wire:target="exportMessages('xlsx')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportMessages('csv')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportMessages('csv')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('CSV') }}
                    </span>
                    <span wire:loading wire:target="exportMessages('csv')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportMessages('json')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportMessages('json')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('JSON') }}
                    </span>
                    <span wire:loading wire:target="exportMessages('json')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>
            </div>
        </div>

                    <div class="col-span-8 sm:col-span-4 !font-normal">
            {{-- <div class="border-t border-gray-200 pt-6"></div> --}}
        </div>

        <!-- Tags Export Section -->
        <div class="col-span-8 sm:col-span-4 !font-normal">
            <x-jetstream.label for="export-tags" value="{{ __('Export tags') }}" />
            <p class="mt-1 text-sm text-gray-600">
                {{ __('Export all tags (skills) associated with your profile') }}
            </p>
            <div class="mt-4 flex flex-wrap gap-2">
                <x-jetstream.secondary-button wire:click="exportTags('ods')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportTags('ods')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('ODS') }}
                    </span>
                    <span wire:loading wire:target="exportTags('ods')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportTags('xlsx')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportTags('xlsx')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('XLSX') }}
                    </span>
                    <span wire:loading wire:target="exportTags('xlsx')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportTags('csv')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportTags('csv')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('CSV') }}
                    </span>
                    <span wire:loading wire:target="exportTags('csv')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportTags('json')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportTags('json')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('JSON') }}
                    </span>
                    <span wire:loading wire:target="exportTags('json')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>
            </div>
        </div>

                    <div class="col-span-8 sm:col-span-4 !font-normal">
            {{-- <div class="border-t border-gray-200 pt-6"></div> --}}
        </div>

        <!-- Contacts Export Section -->
        <div class="col-span-8 sm:col-span-4 !font-normal">
            <x-jetstream.label for="export-contacts" value="{{ __('Export contacts') }}" />
            <p class="mt-1 text-sm text-gray-600">
                {{ __('Export all your contacts') }}
            </p>
            <div class="mt-4 flex flex-wrap gap-2">
                <x-jetstream.secondary-button wire:click="exportContacts('ods')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportContacts('ods')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('ODS') }}
                    </span>
                    <span wire:loading wire:target="exportContacts('ods')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportContacts('xlsx')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportContacts('xlsx')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('XLSX') }}
                    </span>
                    <span wire:loading wire:target="exportContacts('xlsx')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportContacts('csv')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportContacts('csv')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('CSV') }}
                    </span>
                    <span wire:loading wire:target="exportContacts('csv')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>

                <x-jetstream.secondary-button wire:click="exportContacts('json')" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="exportContacts('json')">
                        <x-icon class="mr-1 h-4 w-4" name="arrow-down-tray" />
                        {{ __('JSON') }}
                    </span>
                    <span wire:loading wire:target="exportContacts('json')">
                        <x-icon class="mr-1 h-4 w-4 animate-spin" name="arrow-path" />
                        {{ __('Loading...') }}
                    </span>
                </x-jetstream.secondary-button>
            </div>
        </div>
    </x-slot>

    <x-slot name="actions">
        <x-jetstream.action-message class="mr-3" on="saved">
            {{ __('Export started') }}
        </x-jetstream.action-message>

        @if (session('error'))
            <div class="text-sm text-red-600">
                {{ session('error') }}
            </div>
        @endif
    </x-slot>
</x-jetstream.form-section>
