{{-- <x-section>
    <x-slot name="title">title</x-slot>
    <x-slot name="description">description</x-slot>
    <x-slot name="content">
        <div class="p-1">
            <livewire:api.api-token-manager lazy />
        </div>
    </x-slot>
</x-section> --}}

<div>

    {{-- <div> --}}

        {{-- <div class="">
            <div class="">
                <div class="flex items-center justify-between">
                    <div class="break-all dark:text-white">
                        {{ $this->user->tokens->count() }}
                    </div>
                </div>
            </div>
        </div> --}}


        <!-- Generate API Token -->

        <x-form-section-custom submit="createApiToken">


            <x-slot name="header">

                <x-slot name="top_actions">
                    <x-slot name="title">
                        {{__('Create API Token')}}
                    </x-slot>
                    <x-slot name="description">
                        {{__('allow 3rd services to authenticate with our application')}}
                    </x-slot>
                </x-slot>
            </x-slot>

            <x-slot name="form">
                <!-- Token Name -->
                <div class="col-span-6 sm:col-span-2">
                    <x-label for="name" value="{{ __('Token Name') }}" />
                    <x-input id="name" type="text" class="block w-full mt-1" wire:model="createApiTokenForm.name"
                        autofocus />
                    <x-input-error for="name" class="mt-2" />
                </div>

                <!-- Token Permissions -->
                @if (Laravel\Jetstream\Jetstream::hasPermissions())
                <div class="col-span-6">
                    <x-label for="permissions" value="{{ __('Permissions') }}" />
                    <div class="grid grid-cols-6 gap-4 mt-2 md:grid-cols-6">
                        @foreach (Laravel\Jetstream\Jetstream::$permissions as $permission)
                        <label class="flex items-center">
                            <x-checkbox wire:model="createApiTokenForm.permissions" :value="$permission" />
                            <span class="text-sm text-gray-600 ms-2 dark:text-gray-400">{{ $permission }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>
                @endif
            </x-slot>

            <x-slot name="footer">

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

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

            </x-slot>
        </x-form-section-custom>


        <div class="">
            <div class="flex items-center justify-between">
                <div class="break-all dark:text-white">
                    {{ $this->user->tokens->count() }}
                </div>
            </div>
        </div>

        @if ($this->user->tokens->isNotEmpty())

        {{--
        <x-section-border /> --}}

        <!-- Manage API Tokens -->
        <div class="mt-2 sm:mt-4">



            <x-action-section-custom>

                <x-slot name="header">
                    <x-slot name="title">
                        {{ __('Manage API Tokens') }}
                    </x-slot>

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

                <!-- API Token List -->
                <x-slot name="content">

                    <div class="space-y-2">
                        @foreach ($this->user->tokens->sortBy('name') as $token)

                        <div class="flex items-center justify-between">


                            <div class="{{-- break-all --}} dark:text-white">

                                <div class="flex items-center justify-start ">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">
                                        {{__('Token Name')}}
                                    </span>
                                </div>

                                <div class="px-3 py-2 bg-gray-900">
                                    {{$token->name}}
                                </div>

                                <div class="px-3 py-2 text-xs bg-gray-900">
                                    {{__('Created')}}
                                    {{$token->created_at->diffForHumans()}}
                                </div>
                            </div>

                            <div class="flex items-center ms-2">
                                @if ($token->last_used_at)
                                <div class="px-3 py-2 text-sm text-green-600 bg-gray-900">
                                    {{__('Last Used: ')}}
                                    {{$token->last_used_at->diffForHumans()}}
                                </div>
                                @else
                                <div class="px-3 py-2 text-sm text-red-600 bg-gray-900">
                                    {{__('Last Used: ')}}
                                    {{__('NEVER')}}
                                </div>
                                @endif
                            </div>




                            <div class="flex items-center ms-2">
                                @if ($token->expires_at)
                                <div class="px-3 py-2 text-sm text-orange-600 bg-gray-900">
                                    {{$token->expires_at->diffForHumans()}}
                                </div>
                                @else
                                <div class="px-3 py-2 text-sm text-red-600 bg-gray-900">
                                    {{__('NEVER')}}
                                </div>
                                @endif
                            </div>



                            <div class="flex items-center ms-2">
                                @if (Laravel\Jetstream\Jetstream::hasPermissions())
                                <x-button class="text-sm text-gray-800 bg-blue-500 cursor-pointer dark:bg-blue-500 ms-6"
                                    wire:click="manageApiTokenPermissions({{$token->id}})">
                                    {{__('Permissions')}}
                                </x-button>
                                @endif

                                <button class="text-sm text-red-500 cursor-pointer ms-6"
                                    wire:click="confirmApiTokenDeletion({{ $token->id }})">
                                    {{ __('Delete') }}
                                </button>




                                {{-- @if ($token->last_used_at)
                                <div class="text-sm text-gray-400">
                                    {{ __('Last used') }} {{ $token->last_used_at->diffForHumans() }}
                                </div>
                                @else --}}

                                {{-- <div class="text-sm text-gray-400">
                                    {{ __('Never used') }} {{ $token->last_used_at->diffForHumans() }}
                                </div> --}}

                                {{-- @endif --}}

                                {{-- @if (Laravel\Jetstream\Jetstream::hasPermissions())
                                <button class="text-sm text-gray-400 underline cursor-pointer ms-6"
                                    wire:click="manageApiTokenPermissions({{ $token->id }})">
                                    {{ __('Permissions') }}
                                </button>
                                @endif --}}
                                {{--
                                <button class="text-sm text-red-500 cursor-pointer ms-6"
                                    wire:click="confirmApiTokenDeletion({{ $token->id }})">
                                    {{ __('Delete') }}
                                </button> --}}
                            </div>
                        </div>

                        <hr />

                        @endforeach
                    </div>
                </x-slot>
            </x-action-section-custom>
        </div>
        @endif

        <!-- Token Value Modal -->
        <x-dialog-modal wire:model.live="displayingToken">
            <x-slot name="title">
                {{ __('API Token') }}
            </x-slot>

            <x-slot name="content">
                <div>
                    {{ __('Please copy your new API token. For your security, it won\'t be shown again.') }}
                </div>

                <x-input x-ref="plaintextToken" type="text" readonly :value="$plainTextToken"
                    class="w-full px-4 py-2 mt-4 font-mono text-sm text-gray-500 break-all bg-gray-100 rounded"
                    autofocus autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                    @showing-token-modal.window="setTimeout(() => $refs.plaintextToken.select(), 250)" />
            </x-slot>

            <x-slot name="footer">
                <x-secondary-button wire:click="$set('displayingToken', false)" wire:loading.attr="disabled">
                    {{ __('Close') }}
                </x-secondary-button>
            </x-slot>
        </x-dialog-modal>

        <!-- API Token Permissions Modal -->
        <x-dialog-modal wire:model.live="managingApiTokenPermissions">
            <x-slot name="title">
                {{ __('API Token Permissions') }}
            </x-slot>

            <x-slot name="content">
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    @foreach (Laravel\Jetstream\Jetstream::$permissions as $permission)
                    <label class="flex items-center">
                        <x-checkbox wire:model="updateApiTokenForm.permissions" :value="$permission" />
                        <span class="text-sm text-gray-600 ms-2 dark:text-gray-400">{{ $permission }}</span>
                    </label>
                    @endforeach
                </div>
            </x-slot>

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

                <x-button class="ms-3" wire:click="updateApiToken" wire:loading.attr="disabled">
                    {{ __('Save') }}
                </x-button>
            </x-slot>
        </x-dialog-modal>

        <!-- Delete Token Confirmation Modal -->
        <x-confirmation-modal wire:model.live="confirmingApiTokenDeletion">
            <x-slot name="title">
                {{ __('Delete API Token') }}
            </x-slot>

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

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

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


    </div>