<div>
<!-- Generate API Token -->
<x-jet-form-section submit="createApiToken">
<x-slot name="title">
{{ __('Create API Token') }}
</x-slot>
<x-slot name="description">
{{ __('API tokens allow third-party services to authenticate with our application on your behalf.') }}
</x-slot>
<x-slot name="form">
<!-- Token Name -->
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="name" value="{{ __('Token Name') }}" />
<x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="createApiTokenForm.name" autofocus />
<x-jet-input-error for="name" class="mt-2" />
</div>
<!-- Token Permissions -->
@if (Laravel\Jetstream\Jetstream::hasPermissions())
<div class="col-span-6">
<x-jet-label for="permissions" value="{{ __('Permissions') }}" />
<div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
@foreach (Laravel\Jetstream\Jetstream::$permissions as $permission)
<label class="flex items-center">
<x-jet-checkbox wire:model.defer="createApiTokenForm.permissions" :value="$permission"/>
<span class="ml-2 text-sm text-gray-600">{{ $permission }}</span>
</label>
@endforeach
</div>
</div>
@endif
</x-slot>
<x-slot name="actions">
<x-jet-action-message class="mr-3" on="created">
{{ __('Created.') }}
</x-jet-action-message>
<x-jet-button>
{{ __('Create') }}
</x-jet-button>
</x-slot>