<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <div class="bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-700 dark:border-gray-900 text-xs">
            <div class="w-full dark:bg-gray-800">
                <div class="grid grid-cols-12 text-xs px-3 py-1.5 font-bold text-sm text-gray-800 dark:text-gray-100 border-b border-gray-200 dark:border-gray-900 shadow">
                    <div class="col-span-6 flex items-center">{{t "iam.common.permission"}}</div>
                    <div class="col-span-6 flex items-center">{{t "iam.common.description"}}</div>
                </div>
            </div>
            <div class="h-48 overflow-y-scroll">
                {{#each @options.user.allPermissions as |permission|}}
                    <div class="grid grid-cols-12 text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100">
                        <div class="col-span-6 flex items-center truncate">{{permission.name}}</div>
                        <div class="col-span-6 flex items-center truncate text-xs">{{permission.description}}</div>
                    </div>
                {{/each}}
            </div>
        </div>
    </div>
</Modal::Default>