@props([
    'id',
    'title',
    'body',
    'action',
    'method' => 'DELETE',
    'confirmLabel',
    'cancelLabel' => null,
    'frictionCheckbox' => null, // Optional: ['name' => '...', 'label' => '...']
    'extraFields' => [], // Optional: ['name' => 'value']
])

@php
    $cancelLabel ??= __('account-security.confirm.cancel');
    $frictionInputId = $frictionCheckbox ? $id.'-friction' : null;
@endphp

<div class="modal fade" id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $id }}-title" aria-hidden="true" role="alertdialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="{{ $action }}" method="POST">
                @csrf
                @if (in_array(strtoupper($method), ['DELETE', 'PUT', 'PATCH'], true))
                    @method($method)
                @endif

                @foreach ($extraFields as $name => $value)
                    <input type="hidden" name="{{ $name }}" value="{{ $value }}">
                @endforeach

                <div class="modal-header">
                    <h5 class="modal-title" id="{{ $id }}-title">{{ $title }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ $cancelLabel }}"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">{{ $body }}</p>

                    {{ $slot }}

                    @if ($frictionCheckbox)
                        <div class="form-check mt-3">
                            <input class="form-check-input" type="checkbox"
                                   id="{{ $frictionInputId }}"
                                   name="{{ $frictionCheckbox['name'] }}"
                                   value="1"
                                   data-confirm-friction="{{ $id }}"
                                   required>
                            <label class="form-check-label small" for="{{ $frictionInputId }}">
                                {{ $frictionCheckbox['label'] }}
                            </label>
                        </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ $cancelLabel }}</button>
                    <button type="submit"
                            class="btn btn-danger"
                            @if ($frictionCheckbox) data-confirm-target="{{ $id }}" disabled @endif>
                        {{ $confirmLabel }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@once
    @push('scripts_after')
    <script>
        document.querySelectorAll('[data-confirm-friction]').forEach(function (cb) {
            cb.addEventListener('change', function () {
                var target = document.querySelector('[data-confirm-target="' + cb.dataset.confirmFriction + '"]');
                if (target) target.disabled = !cb.checked;
            });
        });
    </script>
    @endpush
@endonce