<div class="mt-12">

    {{-- Action buttons --}}
    @if (!$isAdminView)
        <div class="mb-6">
            @livewire('calls.create', key('calls-create-manage'))
        </div>
    @endif

    {{-- Search box --}}
    <div class="mb-4 flex items-center">
        <div class="relative w-1/3">
            <input class="w-full rounded-md border border-theme-primary px-3 py-1 pr-10 text-theme-primary shadow-sm focus:border-theme-accent focus:outline-none focus:ring-1 focus:ring-theme-accent sm:text-sm"
                   placeholder="{{ __('Search keywords') . '...' }}" type="text"
                   wire:keydown.enter="$refresh" wire:model="search">
            @if ($search)
                <button class="absolute inset-y-0 right-0 flex items-center pr-3 text-theme-secondary hover:text-theme-primary focus:outline-none"
                        wire:click="$set('search', '')">
                    <x-icon mini name="backspace" solid />
                </button>
            @endif
        </div>
        <x-jetstream.secondary-button class="ml-3 w-32 justify-center" wire:click="$refresh">
            {{ __('Search') }}
        </x-jetstream.secondary-button>
    </div>

    {{-- Filter dropdowns --}}
    <div class="mb-4 flex flex-wrap items-center gap-3">
        {{-- Status filter --}}
        <div>
            <x-select :clearable="true" :searchable="false" class="!w-40" style="width: 10rem !important; min-width: 10rem !important;"
                      placeholder="{{ __('Status') }}" wire:model.live="statusFilter">
                <x-select.option label="{{ __('Active') }}"  value="active" />
                <x-select.option label="{{ __('Paused') }}" value="paused" />
                <x-select.option label="{{ __('Expired') }}" value="expired" />
                <x-select.option label="{{ __('Deleted') }}" value="deleted" />
            </x-select>
        </div>

        @if ($isAdminView)
            {{-- Callable type filter --}}
            <div>
                <x-select :clearable="true" :searchable="false" class="!w-44" style="width: 11rem !important; min-width: 11rem !important;"
                          placeholder="{{ __('Profile type') }}" wire:model.live="callableFilter">
                    <x-select.option label="{{ __('User') }}"         value="user" />
                    <x-select.option label="{{ __('Organization') }}"  value="organization" />
                    <x-select.option label="{{ __('Bank') }}"          value="bank" />
                </x-select>
            </div>
        @endif

        {{-- Language filter --}}
        @if (count($availableLocales) > 1)
            <div>
                <x-select :clearable="true" :searchable="false" class="!w-36" style="width: 9rem !important; min-width: 9rem !important;"
                          placeholder="{{ __('Language') }}" wire:model.live="localeFilter">
                    @foreach ($availableLocales as $lang)
                        <x-select.option label="{{ $lang['name'] }}" value="{{ $lang['id'] }}" />
                    @endforeach
                </x-select>
            </div>
        @endif
    </div>

    {{-- Bulk action buttons --}}
    <div class="mb-6 flex items-center justify-end space-x-4">
        @if ($statusFilter === 'deleted')
            <x-jetstream.button
                :disabled="$bulkDisabled"
                onclick="confirm('{{ __('Are you sure you want to restore the selected calls?') }}') || event.stopImmediatePropagation()"
                wire:click.prevent="undeleteSelected">
                <x-icon class="mr-3 h-5 w-5" name="arrow-path" />
                {{ __('Undelete') }} {{ __('selection') }}
            </x-jetstream.button>
        @else
            @if ($isAdminView)
                <x-jetstream.danger-button
                    :disabled="$bulkDisabled"
                    wire:click.prevent="confirmAdminDelete">
                    <x-icon class="mr-3 h-5 w-5" name="trash" />
                    {{ __('Delete') }} {{ __('selection') }}
                </x-jetstream.danger-button>
            @else
                <x-jetstream.danger-button
                    :disabled="$bulkDisabled"
                    wire:click.prevent="confirmBulkDelete">
                    <x-icon class="mr-3 h-5 w-5" name="trash" />
                    {{ __('Delete') }} {{ __('selection') }}
                </x-jetstream.danger-button>
            @endif
        @endif
    </div>

    {{-- Table --}}
    <div class="bg-white shadow-sm rounded-lg overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        <input type="checkbox" wire:model.live="selectAll"
                               title="{{ __('Select all on current page') }}"
                               class="rounded border-gray-300 text-theme-brand focus:border-theme-accent focus:ring-1 focus:ring-theme-accent">
                    </th>

                    @if ($isAdminView)
                        {{-- ID --}}
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer"
                            wire:click="sortBy('id')">
                            <div class="flex items-center">
                                {{ __('ID') }}
                                @if ($sortField === 'id')
                                    <x-icon :name="$sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'" class="ml-1 h-4 w-4" micro />
                                @endif
                            </div>
                        </th>
                    @endif

                    {{-- Lang --}}
                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer"
                        wire:click="sortBy('locale')">
                        <div class="flex items-center">
                            {{ __('Lang.') }}
                            @if ($sortField === 'locale')
                                <x-icon :name="$sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'" class="ml-1 h-4 w-4" micro />
                            @endif
                        </div>
                    </th>

                    @if ($isAdminView)
                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ __('Profile') }}
                        </th>
                    @endif

                    {{-- Tag --}}
                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        {{ __('Tag') }}
                    </th>

                    {{-- Description --}}
                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-full">
                        {{ __('Description') }}
                    </th>

                    {{-- Public --}}
                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                        {{ __('Public') }}
                    </th>

                    {{-- Expires --}}
                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap cursor-pointer"
                        wire:click="sortBy('till')">
                        <div class="flex items-center">
                            {{ __('Expires') }}
                            @if ($sortField === 'till')
                                <x-icon :name="$sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'" class="ml-1 h-4 w-4" micro />
                            @endif
                        </div>
                    </th>

                    <th class="px-3 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap" style="min-width: 9rem;">
                        {{ __('Actions') }}
                    </th>
                </tr>
            </thead>

            <tbody class="bg-white divide-y divide-gray-200">
                @forelse ($calls as $call)
                    <tr class="{{ $call->trashed() ? 'opacity-50' : '' }}">
                        <td class="px-3 py-4 whitespace-nowrap">
                            <input type="checkbox" value="{{ $call->id }}"
                                   wire:model.live="bulkSelected"
                                   class="rounded border-gray-300 text-theme-brand focus:border-theme-accent focus:ring-1 focus:ring-theme-accent">
                        </td>

                        @if ($isAdminView)
                            <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ $call->id }}
                            </td>
                        @endif

                        <td class="px-3 py-4 whitespace-nowrap text-sm font-medium text-gray-700 uppercase">
                            {{ $call->translations->pluck('locale')->implode(', ') ?: '-' }}
                        </td>

                        @if ($isAdminView)
                            <td class="px-3 py-4 whitespace-nowrap">
                                @if ($call->callable)
                                    <div class="relative block cursor-pointer flex-shrink-0"
                                         onclick="window.location='{{ url(strtolower(class_basename($call->callable_type)) . '/' . $call->callable->id) }}'"
                                         title="{{ $call->callable->name }} ({{ class_basename($call->callable_type) }})">
                                        <img src="{{ $call->callable->profile_photo_url }}"
                                             alt="{{ $call->callable->name }}"
                                             class="h-6 w-6 rounded-full profile-photo object-cover outline outline-1 outline-offset-0 outline-gray-600">
                                    </div>
                                @else
                                    <span class="text-sm text-gray-400">-</span>
                                @endif
                            </td>
                        @endif

                        <td class="px-3 py-4 whitespace-nowrap">
                            @if ($call->tag)
                                @php
                                    $tagContext = $call->tag->contexts->first();
                                    $tagColor = $tagContext?->category?->relatedColor ?? 'gray';
                                @endphp
                                <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-{{ $tagColor }}-400">
                                    {{ $call->tag->translation?->name ?? $call->tag->name }}
                                </span>
                            @else
                                <span class="text-sm text-gray-400">-</span>
                            @endif
                        </td>

                        {{-- Description --}}
                        <td class="px-3 py-4 w-full max-w-0">
                            @php
                                $desc = $call->translations->firstWhere('locale', app()->getLocale())?->content
                                    ?? $call->translations->firstWhere('locale', config('app.fallback_locale'))?->content
                                    ?? $call->translations->first()?->content;
                            @endphp
                            <div class="text-sm text-gray-700 truncate" title="{{ $desc }}">
                                {{ $desc ?? '-' }}
                            </div>
                        </td>

                        {{-- Public --}}
                        <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $call->is_public ? __('Yes') : __('No') }}
                        </td>

                        <td class="px-3 py-4 whitespace-nowrap">
                            @if ($call->till)
                                <div class="text-sm leading-tight {{ $call->till < now() ? 'text-red-500' : 'text-gray-500' }}">
                                    <div>{{ $call->till->translatedFormat('M j') }}</div>
                                    <div>{{ $call->till->translatedFormat('Y') }}</div>
                                </div>
                            @else
                                <span class="text-sm text-gray-400">-</span>
                            @endif
                        </td>

                        <td class="px-3 py-4 whitespace-nowrap text-center text-sm font-medium" style="min-width: 9rem;">
                            @if (!$call->trashed())
                                <div class="flex items-center justify-center gap-1 flex-nowrap"
                                     x-data="{ loading: false }"
                                     x-on:click="loading = true"
                                     x-on:admin-action-ready.window="loading = false"
                                     x-on:pause-publish-done.window="loading = false"
                                     x-on:edit-done.window="loading = false">
                                    {{-- Pause / Publish / Blocked indicator --}}
                                    @if (!$isAdminView && $call->is_suppressed)
                                        <x-jetstream.danger-button title="{{ __('Publication blocked due to policy violation') }}" disabled>
                                            <x-icon class="h-5 w-5" name="exclamation-triangle" solid />
                                        </x-jetstream.danger-button>
                                    @elseif ($isAdminView)
                                        {{-- Admin: toggle is_paused, never touch till --}}
                                        @if ($call->is_paused)
                                            <x-jetstream.secondary-button
                                                no-spinner
                                                title="{{ __('Publish') }}"
                                                wire:click="confirmAdminAction({{ $call->id }}, 'publish')"
                                                x-bind:disabled="loading">
                                                <span x-show="!loading"><x-icon class="h-5 w-5" name="play-circle" solid /></span>
                                                <span x-show="loading" class="flex items-center justify-center"><svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></span>
                                            </x-jetstream.secondary-button>
                                        @else
                                            <x-jetstream.secondary-button
                                                no-spinner
                                                title="{{ __('Pause') }}"
                                                wire:click="confirmAdminAction({{ $call->id }}, 'pause')"
                                                x-bind:disabled="loading">
                                                <span x-show="!loading"><x-icon class="h-5 w-5" name="pause-circle" solid /></span>
                                                <span x-show="loading" class="flex items-center justify-center"><svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></span>
                                            </x-jetstream.secondary-button>
                                        @endif
                                    @elseif (!$call->is_paused && ($call->till === null || $call->till > now()))
                                        {{-- Non-admin: pause button sets is_paused = true --}}
                                        <x-jetstream.secondary-button
                                            no-spinner
                                            title="{{ __('Pause') }}"
                                            wire:click="pause({{ $call->id }})"
                                            x-bind:disabled="loading">
                                            <span x-show="!loading"><x-icon class="h-5 w-5" name="pause-circle" solid /></span>
                                            <span x-show="loading" class="flex items-center justify-center"><svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></span>
                                        </x-jetstream.secondary-button>
                                    @else
                                        {{-- Non-admin: publish button (shown when paused or expired) --}}
                                        <x-jetstream.secondary-button
                                            no-spinner
                                            title="{{ $canPublish ? __('Publish') : trans_with_platform(__('You need @PLATFORM_CURRENCY_NAME_PLURAL@ to post a call.')) }}"
                                            wire:click="publish({{ $call->id }})"
                                            x-bind:disabled="{{ $canPublish ? 'false' : 'true' }} || loading">
                                            <span x-show="!loading"><x-icon class="h-5 w-5" name="play-circle" solid /></span>
                                            <span x-show="loading" class="flex items-center justify-center"><svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></span>
                                        </x-jetstream.secondary-button>
                                    @endif

                                    @if ($isAdminView)
                                        {{-- Block / Unblock --}}
                                        @if ($call->is_suppressed)
                                            <x-jetstream.danger-button
                                                title="{{ __('Unblock') }}"
                                                wire:click="unblock({{ $call->id }})"
                                                wire:target="unblock({{ $call->id }})"
                                                wire:loading.attr="disabled">
                                                <x-icon class="h-5 w-5" name="exclamation-triangle" solid />
                                            </x-jetstream.danger-button>
                                        @else
                                            <x-jetstream.secondary-button
                                                title="{{ __('Block publication') }}"
                                                wire:click="block({{ $call->id }})"
                                                wire:target="block({{ $call->id }})"
                                                wire:loading.attr="disabled">
                                                <x-icon class="h-5 w-5" name="exclamation-triangle" />
                                            </x-jetstream.secondary-button>
                                        @endif
                                    @else
                                        {{-- Edit --}}
                                        <x-jetstream.secondary-button
                                            title="{{ __('Edit') }}"
                                            x-on:click.stop="$wire.call('openEdit', {{ $call->id }})"
                                            wire:target="openEdit({{ $call->id }})"
                                            wire:loading.attr="disabled">
                                            <x-icon class="h-5 w-5" name="pencil-square" />
                                        </x-jetstream.secondary-button>
                                    @endif

                                    {{-- View --}}
                                    <x-jetstream.secondary-button
                                        title="{{ __('View') }}"
                                        x-on:click.stop="window.open('{{ route('call.show', ['id' => $call->id]) }}', '_blank')">
                                        <x-icon class="h-5 w-5" mini name="arrow-top-right-on-square" />
                                    </x-jetstream.secondary-button>
                                </div>
                            @else
                                {{-- Deleted: show only View button --}}
                                <div class="flex items-center justify-center gap-1 flex-nowrap">
                                    <x-jetstream.secondary-button
                                        title="{{ __('View') }}"
                                        x-on:click.stop="window.open('{{ route('call.show', ['id' => $call->id]) }}', '_blank')">
                                        <x-icon class="h-5 w-5" mini name="arrow-top-right-on-square" />
                                    </x-jetstream.secondary-button>
                                </div>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ $isAdminView ? 9 : 7 }}" class="px-6 py-12 text-center text-gray-500">
                            {{ __('No results found') }}
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    @if ($calls->hasPages())
        <div class="bg-white shadow-sm rounded-lg mt-4">
            <div class="py-3 border-t border-gray-200 flex items-center justify-between px-4">
                <div class="flex items-center">
                    <select class="w-20 rounded-md border border-theme-primary bg-theme-background px-3 py-2 text-theme-primary shadow-sm focus:border-theme-accent focus:outline-none focus:ring-1 focus:ring-theme-accent sm:text-sm"
                            wire:model.live="perPage">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                    </select>
                    <span class="ml-2 text-sm text-theme-secondary">{{ __('per page') }}</span>
                </div>
                {{ $calls->links('livewire.long-paginator') }}
            </div>
        </div>
    @endif

    {{-- Inline Edit Modal --}}
    @if ($showEditModal && $editCall)
        <x-jetstream.dialog-modal wire:model.live="showEditModal" wire:key="manage-edit-modal-{{ $editCallId }}" closeButton="true">
            <x-slot name="title">
                {{ trans_with_platform('Edit @PLATFORM_NAME@ call') }}
            </x-slot>

            <x-slot name="content">
                <div class="space-y-6">

                    {{-- Tag picker --}}
                    <livewire:calls.call-skill-input :initial-tag-id="$editTagId" wire:key="manage-edit-tag-{{ $editCallId }}" />
                    @error('editTagId') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror

                    {{-- Content --}}
                    @php $contentMax = timebank_config('calls.content_max_input', 200); @endphp
                    <div wire:key="manage-edit-content-{{ $editCallId }}"
                         x-data="{ remaining: {{ $contentMax - mb_strlen($editContent) }} }"
                         x-init="$nextTick(() => { const ta = $el.querySelector('textarea'); if (ta) { ta.addEventListener('input', () => { remaining = {{ $contentMax }} - ta.value.length; }); } })">
                        <label class="block text-sm text-theme-primary mb-2">
                            {{ __('Description') }}
                            <span class="text-theme-secondary text-xs ml-1" x-text="remaining + ' {{ __('characters left') }}'"></span>
                        </label>
                        <x-textarea
                            placeholder="{{ __('Describe your request in more detail...') }}"
                            rows="4"
                            maxlength="{{ $contentMax }}"
                            class="!text-base"
                            wire:model.blur="editContent" />
                        @error('editContent') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                    </div>

                    {{-- Location --}}
                    <div wire:key="manage-edit-location-{{ $editCallId }}">
                        <label class="block text-sm text-theme-primary mb-2">{{ __('Exchange location') }}</label>
                        <livewire:locations.locations-dropdown
                            :hide-label="true"
                            :country="$editCountry"
                            :city="$editCity"
                            :division="$editDivision"
                            :district="$editDistrict"
                            wire:key="manage-edit-location-dropdown-{{ $editCountry }}-{{ $editCity }}" />
                        @error('editCountry') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                    </div>

                    {{-- Expiry date --}}
                    <div wire:key="manage-edit-till-{{ $editCallId }}">
                        <label class="block text-sm text-theme-primary mb-2">{{ __('Expires on') }}</label>
                        @php
                            $tillMinDate = now()->addDay()->format('Y-m-d');
                            $callableType = $editCall->callable_type ?? session('activeProfileType');
                            $tillMaxDays = ($callableType && $callableType !== \App\Models\User::class)
                                ? timebank_config('calls.till_max_days_non_user')
                                : timebank_config('calls.till_max_days');
                            $tillMaxDate = $tillMaxDays !== null ? now()->addDays($tillMaxDays)->format('Y-m-d') : null;
                        @endphp
                        <div wire:ignore x-data x-init="$nextTick(() => { document.querySelectorAll('.flatpickr-input').forEach(el => window.LaravelFlatpickr.initializeFlatpickr(el)) })">
                            <x-flatpickr
                                dateFormat="Y-m-d"
                                altFormat="d-m-Y"
                                :minDate="$tillMinDate"
                                :maxDate="$tillMaxDate"
                                :value="$editTill"
                                placeholder="{{ __('Select a date') }}"
                                wire:model.defer="editTill"
                                class="mt-1 block border-theme-border focus:border-theme-accent focus:ring-1 focus:ring-theme-accent rounded-md shadow-sm" />
                        </div>
                        @error('editTill') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                    </div>

                    {{-- Visibility --}}
                    <div wire:key="manage-edit-public-{{ $editCallId }}">
                        <x-checkbox
                            id="manage-edit-is-public-{{ $editCallId }}"
                            label="{{ __('Public, visible for search engines and sharable on social media') }}"
                            wire:model.live="editIsPublic" />
                        @if ($editIsPublic)
                            <p class="mt-2 text-sm text-red-600">
                                {{ str_replace(':username', $editCall->callable?->name ?? '', __('Heads up: this exposes your username (:username) and exchange location.')) }}
                            </p>
                        @endif
                    </div>

                </div>
            </x-slot>

            <x-slot name="footer">
                <div class="flex w-full items-center justify-between">
                    <x-jetstream.danger-button
                        wire:click="confirmDelete()"
                        wire:loading.attr="disabled">
                        {{ __('Delete') }}
                    </x-jetstream.danger-button>

                    <div class="flex items-center gap-3">
                        <x-jetstream.secondary-button
                            wire:click="$set('showEditModal', false)"
                            wire:loading.attr="disabled">
                            {{ __('Cancel') }}
                        </x-jetstream.secondary-button>
                        <x-jetstream.button
                            wire:click.prevent="saveEdit()"
                            wire:loading.attr="disabled"
                            wire:loading.class="opacity-75">
                            {{ __('Save') }}
                        </x-jetstream.button>
                    </div>
                </div>
            </x-slot>
        </x-jetstream.dialog-modal>
    @endif

    {{-- Delete confirmation modal --}}
    <x-jetstream.dialog-modal wire:model.live="showDeleteConfirm" wire:key="manage-delete-confirm">
        <x-slot name="title">{{ __('Delete Call') }}</x-slot>
        <x-slot name="content">
            <p class="text-theme-primary">{{ __('Are you sure you want to delete this call? You can undelete this call later.') }}</p>
        </x-slot>
        <x-slot name="footer">
            <x-jetstream.secondary-button
                wire:click="$set('showDeleteConfirm', false)"
                wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-jetstream.secondary-button>
            <x-jetstream.danger-button
                class="ml-3"
                wire:click="deleteCall()"
                wire:loading.attr="disabled">
                {{ __('Yes, delete') }}
            </x-jetstream.danger-button>
        </x-slot>
    </x-jetstream.dialog-modal>

    {{-- Non-admin bulk delete confirmation modal --}}
    @if (!$isAdminView)
        <x-jetstream.dialog-modal wire:model.live="showDeleteConfirmModal" closeButton="true">
            <x-slot name="title">
                {{ __('Delete selection?') }}
            </x-slot>
            <x-slot name="content">
                <p class="text-theme-primary">
                    {{ trans_choice('Are you sure you want to delete :count call? This can always be undone later.|Are you sure you want to delete :count calls? This can always be undone later.', count($bulkSelected), ['count' => count($bulkSelected)]) }}
                </p>
            </x-slot>
            <x-slot name="footer">
                <div class="flex items-center gap-3 justify-end">
                    <x-jetstream.secondary-button
                        wire:click="$set('showDeleteConfirmModal', false)"
                        wire:loading.attr="disabled">
                        {{ __('Cancel') }}
                    </x-jetstream.secondary-button>
                    <x-jetstream.danger-button
                        wire:click="deleteSelected()"
                        wire:loading.attr="disabled">
                        {{ trans_choice('Delete :count call|Delete :count calls', count($bulkSelected), ['count' => count($bulkSelected)]) }}
                    </x-jetstream.danger-button>
                </div>
            </x-slot>
        </x-jetstream.dialog-modal>
    @endif

    {{-- Admin bulk delete confirmation modal --}}
    @if ($isAdminView)
        <x-jetstream.dialog-modal wire:model.live="showAdminDeleteConfirm" closeButton="true">
            <x-slot name="title">
                {{ __('Delete selection?') }}
            </x-slot>
            <x-slot name="content">
                <p class="text-theme-primary">
                    {{ trans_choice('Delete :count call?|Delete :count calls?', count($bulkSelected), ['count' => count($bulkSelected)]) }}
                </p>
                <p class="mt-3 text-theme-primary">
                    {{ __('Do you have permission of :names to take this action?', ['names' => $adminDeleteCallableNames]) }}
                </p>
            </x-slot>
            <x-slot name="footer">
                <div class="flex items-center gap-3 justify-end">
                    <x-jetstream.secondary-button
                        wire:click="$set('showAdminDeleteConfirm', false)"
                        wire:loading.attr="disabled">
                        {{ __('Cancel') }}
                    </x-jetstream.secondary-button>
                    <x-jetstream.danger-button
                        wire:click="deleteSelected()"
                        wire:loading.attr="disabled">
                        {{ trans_choice('Delete :count call|Delete :count calls', count($bulkSelected), ['count' => count($bulkSelected)]) }}
                    </x-jetstream.danger-button>
                </div>
            </x-slot>
        </x-jetstream.dialog-modal>
    @endif

    {{-- Admin pause/publish confirmation modal --}}
    @if ($isAdminView)
        <x-jetstream.dialog-modal wire:model.live="showAdminActionConfirm" closeButton="true">
            <x-slot name="title">
                {{ $adminActionType === 'pause' ? __('Pause call') : __('Publish call') }}
            </x-slot>
            <x-slot name="content">
                <p class="text-theme-primary">
                    {{ $adminActionType === 'pause'
                        ? __('Pause this call on behalf of :name?', ['name' => $adminActionCallableName])
                        : __('Publish this call on behalf of :name?', ['name' => $adminActionCallableName]) }}
                </p>
                <p class="mt-3 text-theme-primary">
                    {{ __('Do you have permission of :name to take this action?', ['name' => $adminActionCallableName]) }}
                </p>
            </x-slot>
            <x-slot name="footer">
                <div class="flex items-center gap-3 justify-end">
                    <x-jetstream.secondary-button
                        wire:click="$set('showAdminActionConfirm', false)"
                        wire:loading.attr="disabled">
                        {{ __('Cancel') }}
                    </x-jetstream.secondary-button>
                    <x-jetstream.button
                        wire:click="executeAdminAction()"
                        wire:loading.attr="disabled">
                        {{ $adminActionType === 'pause' ? __('Pause call') : __('Publish call') }}
                    </x-jetstream.button>
                </div>
            </x-slot>
        </x-jetstream.dialog-modal>
    @endif

</div>
