<div>
    <x-form-section submit="createReport">
        <x-slot name="title">
            {{ __('Create report') }}
        </x-slot>

        <x-slot name="description">
            {{ __('Report generator for generating reports') }}
        </x-slot>

        <x-slot name="form">
            <!-- Token Name -->
            <div class="col-span-6 sm:col-span-4">
                <x-label for="name" value="{{ __('Name') }}" />
                <x-input id="name" type="text" class="mt-1 block w-full" wire:model="createReportForm.name" autofocus />
                <x-input-error for="name" class="mt-2" />
            </div>
            <div
                class="col-span-6 sm:col-span-4 mt-4 px-4 py-4 font-mono overflow-hidden break-words text-sm bg-gray-100 rounded-lg"
                wire:stream="processOutput">{{ $processOutput }}
            </div>
        </x-slot>

        <x-slot name="actions">
            <x-action-message class="mr-3" on="created">
                {{ __('Created.') }}
            </x-action-message>

            <x-button>
                {{ __('Create') }}
            </x-button>
        </x-slot>
    </x-form-section>


        <x-section-border />

        <div class="mt-10 sm:mt-0">
            <x-action-section>
                <x-slot name="title">
                    {{ __('Manage reports') }}
                </x-slot>

                <x-slot name="description">
                    {{ __('You may delete any of your reports if they are no longer needed.') }}
                </x-slot>

                <!-- API Token List -->
                <x-slot name="content">
                    <div class="space-y-6">
                        @foreach ($this->reports->sortBy('name') as $report)
                            <div class="flex items-center justify-between">
                                <div class="break-all">
                                    {{ $report->name }}
                                </div>

                                <div class="flex items-center ml-2">
                                    <button class="cursor-pointer ml-6 text-sm text-red-500" wire:click="confirmReportDeletion({{ $report->id }})">
                                        {{ __('Delete') }}
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </x-slot>
            </x-action-section>
        </div>




    <x-confirmation-modal wire:model.live="confirmingReportDeletion">
        <x-slot name="title">
            {{ __('Delete Report') }}
        </x-slot>

        <x-slot name="content">
            {{ __('Are you sure you would like to delete this Report?') }}
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="$toggle('confirmingReportDeletion')" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-danger-button class="ml-3" wire:click="deleteReport" wire:loading.attr="disabled">
                {{ __('Delete') }}
            </x-danger-button>
        </x-slot>
    </x-confirmation-modal>
</div>
