@php
    $attention = (array) ($approvalWorkspace['attention'] ?? []);
    $items = (array) ($attention['items'] ?? []);
    $allApproved = (bool) ($attention['all_approved'] ?? false);
    $approvedCount = (int) ($attention['approved_count'] ?? 0);
    $requiredCount = (int) ($attention['required_count'] ?? 0);
    $deskLabel = trim((string) ($attention['desk_label'] ?? data_get($approvalWorkspace, 'attention_desk.label', '')));
    $deskIsFirst = (bool) ($attention['desk_is_first'] ?? data_get($approvalWorkspace, 'attention_desk.is_first', true));
    $requiresConfirmation = (bool) ($attention['requires_confirmation'] ?? data_get($approvalWorkspace, 'attention_desk.requires_confirmation', true));
    $canAct = ($canActOnWorkflow ?? false) && ! ($approveBlockedByAppraisal ?? false);
    $canConfirm = $canAct && $requiresConfirmation;
    $approveUrl = route('loan.book.applications.approval.attention.approve', $application);
    $rejectUrl = route('loan.book.applications.approval.attention.reject', $application);

    $pendingKeys = [];
    foreach ($items as $item) {
        $children = (array) ($item['children'] ?? []);
        if ($children !== []) {
            foreach ($children as $child) {
                $childStatus = (string) ($child['status'] ?? 'pending');
                $childKey = (string) ($child['key'] ?? '');
                if ($childKey !== '' && ! in_array($childStatus, ['approved', 'rejected'], true)) {
                    $pendingKeys[] = $childKey;
                }
            }
            continue;
        }

        $status = (string) ($item['status'] ?? 'pending');
        $key = (string) ($item['key'] ?? '');
        if ($key !== '' && ! in_array($status, ['approved', 'rejected'], true)) {
            $pendingKeys[] = $key;
        }
    }
@endphp

@if ($items !== [])
    <section
        id="loan-approval-attention"
        class="loan-approval-attention"
        x-data="{
            selected: [],
            expandedPastLoanId: null,
            busyKey: null,
            toggle(key) {
                if (this.selected.includes(key)) {
                    this.selected = this.selected.filter((item) => item !== key);
                } else {
                    this.selected = [...this.selected, key];
                }
            },
            selectAll(keys) {
                this.selected = keys.slice();
            },
            clearSelection() {
                this.selected = [];
            },
            togglePastLoan(id) {
                this.expandedPastLoanId = this.expandedPastLoanId === id ? null : id;
            },
            isBusy(key) {
                return this.busyKey === key;
            },
            isAnyBusy() {
                return this.busyKey !== null;
            },
            beginSubmit(event, key) {
                if (event.defaultPrevented || this.isAnyBusy()) {
                    event.preventDefault();
                    return;
                }
                this.busyKey = key;
            },
            injectSelectedKeys(event) {
                if (this.selected.length === 0) {
                    event.preventDefault();
                    alert('Select at least one item.');
                    return;
                }
                if (this.isAnyBusy()) {
                    event.preventDefault();
                    return;
                }
                const form = event.target;
                if (! (form instanceof HTMLFormElement)) {
                    return;
                }
                form.querySelectorAll('[data-attention-batch-key]').forEach((el) => el.remove());
                this.selected.forEach((key) => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'attention_keys[]';
                    input.value = key;
                    input.dataset.attentionBatchKey = '1';
                    form.appendChild(input);
                });
                this.busyKey = 'batch-selected';
            },
            init() {
                this._onSubmitEnd = (event) => {
                    const form = event.target;
                    if (! (form instanceof HTMLFormElement) || ! this.$el.contains(form)) {
                        return;
                    }
                    const action = form.getAttribute('action') || '';
                    if (! action.includes('/approval/attention/')) {
                        return;
                    }
                    // Success path force-refreshes the workspace; clear busy on failure so
                    // the officer can retry without a full page reload.
                    if (! event.detail?.success) {
                        this.busyKey = null;
                    }
                };
                document.addEventListener('turbo:submit-end', this._onSubmitEnd);
            },
            destroy() {
                if (this._onSubmitEnd) {
                    document.removeEventListener('turbo:submit-end', this._onSubmitEnd);
                }
            },
        }"
    >
        <div class="loan-approval-attention__header">
            <div class="loan-approval-attention__header-copy">
                <h3 class="loan-approval-section__label">Review attentions</h3>
                <p class="loan-approval-attention__hint loan-approval-attention__hint--desktop">
                    @if ($canConfirm)
                        Confirm each row on this desk{{ $deskLabel !== '' ? ' ('.$deskLabel.')' : '' }}, even if a prior desk already signed them off.
                    @elseif ($canAct)
                        Prior desks already confirmed these items. Your work is to approve the application below.
                    @elseif ($canSubmitForApproval ?? false)
                        Preview for approvers — submit the application below to start the review chain.
                    @elseif ($approvalCreditComplete ?? false)
                        Credit approval is complete. Review items below are historical.
                    @else
                        Waiting for the current desk approver to review these items.
                    @endif
                </p>
                <p class="loan-approval-attention__hint loan-approval-attention__hint--mobile">
                    @if ($canConfirm)
                        Confirm each row on this desk before you approve.
                    @elseif ($canAct)
                        Prior desks confirmed these items. Approve below.
                    @elseif ($canSubmitForApproval ?? false)
                        Submit below — approvers will sign off each item on their desk.
                    @elseif ($approvalCreditComplete ?? false)
                        Credit approval complete.
                    @else
                        Pending review by the current approver.
                    @endif
                </p>
            </div>
            <div class="loan-approval-attention__count">
                {{ $approvedCount }} of {{ $requiredCount }} confirmed
                @if ($deskLabel !== '' && $canConfirm)
                    <span class="loan-approval-attention__count-desk">on {{ $deskLabel }}</span>
                @endif
            </div>
        </div>

        <div
            x-show="isAnyBusy()"
            x-cloak
            class="loan-approval-attention__processing"
            role="status"
            aria-live="polite"
        >
            <span class="loan-submit-spinner loan-submit-spinner--sm" aria-hidden="true"></span>
            <span>Processing your review action…</span>
        </div>

        @if ($canConfirm && ! $deskIsFirst)
            <p class="loan-approval-attention__gate rounded-md border border-sky-200 bg-sky-50 px-3 py-2 text-xs text-sky-950">
                A prior desk already signed these items. Confirm each row on this desk before you can approve.
            </p>
        @elseif ($canAct && ! $canConfirm)
            <p class="loan-approval-attention__gate rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-950">
                Review items were confirmed on earlier desks. You only need to approve the application.
            </p>
        @endif

        @if (($canSubmitForApproval ?? false) && ! $canAct)
            <p class="loan-approval-attention__gate rounded-md border border-sky-200 bg-sky-50 px-3 py-2 text-xs text-sky-950">
                @if ($awaitingLoanOfficerResubmit ?? false)
                    Review items stay pending until you <strong>resubmit for approval</strong> below. Unit Manager and later desks confirm each row when the file reaches them — you do not tick these boxes on the loan officer desk.
                @else
                    Review items stay pending until you <strong>Submit for approval</strong> below. Later desks (Unit Manager and after) check each row when the file reaches them.
                @endif
            </p>
        @elseif (
            ! ($canSubmitForApproval ?? false)
            && ! $canAct
            && ! ($approvalCreditComplete ?? false)
            && ! (($approvalRequest ?? null)?->isOpen() ?? false)
        )
            <p class="loan-approval-attention__gate rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-950">
                Waiting for the loan officer to submit this file for approval. You will be able to review these items when the file reaches your desk.
            </p>
        @endif

        @if ($canConfirm && $pendingKeys !== [])
            <div class="loan-approval-attention__batch">
                <button type="button" class="loan-approval-attention__batch-link" @click="selectAll(@js($pendingKeys))">Select all</button>
                <button type="button" class="loan-approval-attention__batch-link loan-approval-attention__batch-link--muted" @click="clearSelection()">Clear</button>
                <form
                    method="post"
                    action="{{ $approveUrl }}"
                    class="loan-approval-attention__batch-form"
                    data-turbo-frame="{{ \App\Support\Navigation\WorkspaceEmbed::workflowActionTurboFrame() }}"
                    data-preserve-workspace-scroll="1"
                    @submit="injectSelectedKeys($event)"
                >
                    @csrf
                    <x-loan.workspace-embed-field />
                    <button
                        type="submit"
                        class="loan-approval-attention__btn loan-approval-attention__btn--approve loan-approval-attention__btn--batch"
                        :disabled="isAnyBusy()"
                        :aria-busy="isBusy('batch-selected') ? 'true' : 'false'"
                        :class="{ 'loan-approval-attention__btn--busy': isBusy('batch-selected') }"
                    >
                        <span x-show="!isBusy('batch-selected')">Approve selected</span>
                        <span x-show="isBusy('batch-selected')" x-cloak class="inline-flex items-center gap-1">
                            <span class="loan-submit-spinner loan-submit-spinner--sm" aria-hidden="true"></span>
                            <span>Approving…</span>
                        </span>
                    </button>
                </form>
                <form
                    method="post"
                    action="{{ $approveUrl }}"
                    class="loan-approval-attention__batch-form"
                    data-turbo-frame="{{ \App\Support\Navigation\WorkspaceEmbed::workflowActionTurboFrame() }}"
                    data-preserve-workspace-scroll="1"
                    @submit="beginSubmit($event, 'batch-all')"
                >
                    @csrf
                    <x-loan.workspace-embed-field />
                    @foreach ($pendingKeys as $pendingKey)
                        <input type="hidden" name="attention_keys[]" value="{{ $pendingKey }}">
                    @endforeach
                    <button
                        type="submit"
                        class="loan-approval-attention__btn loan-approval-attention__btn--approve loan-approval-attention__btn--batch"
                        :disabled="isAnyBusy()"
                        :aria-busy="isBusy('batch-all') ? 'true' : 'false'"
                        :class="{ 'loan-approval-attention__btn--busy': isBusy('batch-all') }"
                    >
                        <span x-show="!isBusy('batch-all')">Approve all</span>
                        <span x-show="isBusy('batch-all')" x-cloak class="inline-flex items-center gap-1">
                            <span class="loan-submit-spinner loan-submit-spinner--sm" aria-hidden="true"></span>
                            <span>Approving…</span>
                        </span>
                    </button>
                </form>
            </div>
        @endif

        @foreach ($items as $item)
            @php
                $status = (string) ($item['status'] ?? 'pending');
                $key = (string) ($item['key'] ?? '');
                $isApproved = $status === 'approved';
                $isRejected = $status === 'rejected';
                $children = (array) ($item['children'] ?? []);
                $pendingChildKeys = collect($children)
                    ->filter(fn ($child) => ! in_array((string) ($child['status'] ?? 'pending'), ['approved', 'rejected'], true))
                    ->pluck('key')
                    ->filter()
                    ->values()
                    ->all();
            @endphp

            <article @class([
                'loan-approval-attention__row',
                'loan-approval-attention__row--approved' => $isApproved,
                'loan-approval-attention__row--rejected' => $isRejected,
                'loan-approval-attention__row--selected' => false,
            ]) :class="{ 'loan-approval-attention__row--selected': selected.includes(@js($key)), 'loan-approval-attention__row--busy': isBusy(@js($key)) || isBusy('reject-{{ md5($key) }}') }">
                <div class="loan-approval-attention__main">
                    <div class="loan-approval-attention__pick">
                        @if ($isApproved)
                            <span class="loan-approval-attention__mark loan-approval-attention__mark--approved" aria-label="Approved">✓</span>
                        @elseif ($isRejected)
                            <span class="loan-approval-attention__mark loan-approval-attention__mark--rejected" aria-label="Rejected">✕</span>
                        @elseif ($canConfirm && $children === [])
                            <label class="loan-approval-attention__pick-label">
                                <input
                                    type="checkbox"
                                    class="loan-approval-attention__pick-input"
                                    :checked="selected.includes(@js($key))"
                                    @change="toggle(@js($key))"
                                >
                                <span class="loan-approval-attention__pick-box" aria-hidden="true"></span>
                                <span class="sr-only">Select {{ $item['label'] ?? 'item' }} for batch approval</span>
                            </label>
                        @else
                            <span class="loan-approval-attention__mark loan-approval-attention__mark--pending" aria-hidden="true"></span>
                        @endif
                    </div>

                    <div class="loan-approval-attention__copy">
                        <p class="loan-approval-attention__label">{{ $item['label'] ?? 'Attention' }}</p>
                        <p class="loan-approval-attention__summary">{{ $item['summary'] ?? '' }}</p>
                        @if (! empty($item['detail']))
                            <p class="loan-approval-attention__detail">{{ $item['detail'] }}</p>
                        @endif
                        @if (! empty($item['review_lines']))
                            <ul class="loan-approval-attention__review-lines mt-1.5 space-y-1">
                                @foreach ((array) $item['review_lines'] as $reviewLine)
                                    <li class="text-xs leading-snug text-slate-700">{{ $reviewLine }}</li>
                                @endforeach
                            </ul>
                        @endif
                        @if (($item['key'] ?? '') === 'guarantor')
                            @include('loan.book.applications.partials.approval-attention-guarantor-otp', ['item' => $item])
                        @endif
                    </div>

                    @if ($canConfirm && ! $isApproved && ! $isRejected && $children === [])
                        <div class="loan-approval-attention__actions">
                            <form
                                method="post"
                                action="{{ $approveUrl }}"
                                data-turbo-frame="{{ \App\Support\Navigation\WorkspaceEmbed::workflowActionTurboFrame() }}"
                                data-preserve-workspace-scroll="1"
                                @submit="beginSubmit($event, @js($key))"
                            >
                                @csrf
                                <x-loan.workspace-embed-field />
                                <input type="hidden" name="attention_keys[]" value="{{ $key }}">
                                <button
                                    type="submit"
                                    class="loan-approval-attention__btn loan-approval-attention__btn--approve"
                                    :disabled="isAnyBusy()"
                                    :aria-busy="isBusy(@js($key)) ? 'true' : 'false'"
                                    :class="{ 'loan-approval-attention__btn--busy': isBusy(@js($key)) }"
                                >
                                    <span x-show="!isBusy(@js($key))">Approve</span>
                                    <span x-show="isBusy(@js($key))" x-cloak class="inline-flex items-center gap-1">
                                        <span class="loan-submit-spinner loan-submit-spinner--sm" aria-hidden="true"></span>
                                        <span>Approving…</span>
                                    </span>
                                </button>
                            </form>
                            <button
                                type="button"
                                class="loan-approval-attention__btn loan-approval-attention__btn--reject"
                                :disabled="isAnyBusy()"
                                @click="$refs['reject-{{ md5($key) }}'].showModal()"
                            >Reject</button>
                            <dialog x-ref="reject-{{ md5($key) }}" class="loan-approval-attention__dialog rounded-xl border border-slate-200 p-0 shadow-xl backdrop:bg-slate-900/40">
                                <form
                                    method="post"
                                    action="{{ $rejectUrl }}"
                                    class="w-[min(100vw-2rem,28rem)] space-y-3 p-4"
                                    data-turbo-frame="{{ \App\Support\Navigation\WorkspaceEmbed::workflowActionTurboFrame() }}"
                                    data-preserve-workspace-scroll="1"
                                    @submit="beginSubmit($event, 'reject-{{ md5($key) }}')"
                                >
                                    @csrf
                                    <x-loan.workspace-embed-field />
                                    <input type="hidden" name="attention_key" value="{{ $key }}">
                                    <input type="hidden" name="reject_target" value="{{ $item['reject_target'] ?? 'appraisal' }}">
                                    <p class="text-sm font-semibold text-slate-900">Reject {{ strtolower($item['label'] ?? 'item') }}</p>
                                    <p class="text-xs text-slate-600">{{ $item['reject_hint'] ?? 'Send back for correction.' }}</p>
                                    <textarea name="comments" rows="3" required minlength="10" maxlength="2000" class="loan-ent-textarea mt-1" placeholder="What must the loan officer fix?"></textarea>
                                    <div class="flex justify-end gap-2">
                                        <button type="button" class="loan-ent-btn loan-ent-btn--secondary loan-ent-btn--sm" @click="$refs['reject-{{ md5($key) }}'].close()">Cancel</button>
                                        <button
                                            type="submit"
                                            class="loan-approval-attention__btn loan-approval-attention__btn--reject"
                                            :disabled="isBusy('reject-{{ md5($key) }}')"
                                            :aria-busy="isBusy('reject-{{ md5($key) }}') ? 'true' : 'false'"
                                            :class="{ 'loan-approval-attention__btn--busy': isBusy('reject-{{ md5($key) }}') }"
                                        >
                                            <span x-show="!isBusy('reject-{{ md5($key) }}')">Send back</span>
                                            <span x-show="isBusy('reject-{{ md5($key) }}')" x-cloak class="inline-flex items-center gap-1">
                                                <span class="loan-submit-spinner loan-submit-spinner--sm" aria-hidden="true"></span>
                                                <span>Sending…</span>
                                            </span>
                                        </button>
                                    </div>
                                </form>
                            </dialog>
                        </div>
                    @endif
                </div>

                @if ($children !== [])
                    <div class="loan-approval-attention__children">
                        @foreach ($children as $child)
                            @php
                                $childStatus = (string) ($child['status'] ?? 'pending');
                                $childKey = (string) ($child['key'] ?? '');
                                $childLoanId = (int) ($child['loan_id'] ?? 0);
                                $childApproved = $childStatus === 'approved';
                                $childRejected = $childStatus === 'rejected';
                                $hasPastLoanDetail = ($child['installment_rows'] ?? []) !== [] || trim((string) ($child['review'] ?? '')) !== '';
                            @endphp
                            <div
                                class="loan-approval-attention__child-wrap"
                                :class="{ 'loan-approval-attention__child-wrap--selected': selected.includes(@js($childKey)) }"
                            >
                                <div
                                    class="loan-approval-attention__child"
                                    :class="{ 'loan-approval-attention__child--selected': selected.includes(@js($childKey)) }"
                                >
                                    <div class="loan-approval-attention__pick">
                                        @if ($childApproved)
                                            <span class="loan-approval-attention__mark loan-approval-attention__mark--approved" aria-label="Approved">✓</span>
                                        @elseif ($childRejected)
                                            <span class="loan-approval-attention__mark loan-approval-attention__mark--rejected" aria-label="Rejected">✕</span>
                                        @elseif ($canConfirm)
                                            <label class="loan-approval-attention__pick-label">
                                                <input
                                                    type="checkbox"
                                                    class="loan-approval-attention__pick-input"
                                                    :checked="selected.includes(@js($childKey))"
                                                    @change="toggle(@js($childKey))"
                                                >
                                                <span class="loan-approval-attention__pick-box" aria-hidden="true"></span>
                                                <span class="sr-only">Select {{ $child['label'] ?? 'past loan' }} for batch approval</span>
                                            </label>
                                        @endif
                                    </div>

                                    @if ($hasPastLoanDetail)
                                        <button
                                            type="button"
                                            class="loan-approval-attention__expand"
                                            :aria-expanded="expandedPastLoanId === {{ $childLoanId }}"
                                            @click="togglePastLoan({{ $childLoanId }})"
                                        >
                                            <span x-text="expandedPastLoanId === {{ $childLoanId }} ? '−' : '+'"></span>
                                        </button>
                                    @else
                                        <span class="loan-approval-attention__expand loan-approval-attention__expand--placeholder" aria-hidden="true"></span>
                                    @endif

                                    <div class="loan-approval-attention__child-copy">
                                        <p class="loan-approval-attention__child-label">{{ $child['label'] ?? 'Past loan' }}</p>
                                        @if (! empty($child['headline']))
                                            <p class="loan-approval-attention__child-meta">{{ $child['headline'] }}</p>
                                        @endif
                                        @if (! empty($child['metrics']))
                                            <p class="loan-approval-attention__child-summary">{{ $child['metrics'] }}</p>
                                        @elseif (! empty($child['summary']))
                                            <p class="loan-approval-attention__child-summary">{{ $child['summary'] }}</p>
                                        @endif
                                        @if (trim((string) ($child['review'] ?? '')) !== '')
                                            <p class="loan-approval-attention__child-review-preview">{{ \Illuminate\Support\Str::limit(trim((string) $child['review']), 120) }}</p>
                                        @endif
                                    </div>

                                    @if ($canConfirm && ! $childApproved && ! $childRejected)
                                        <div class="loan-approval-attention__child-actions">
                                            <form
                                                method="post"
                                                action="{{ $approveUrl }}"
                                                data-turbo-frame="{{ \App\Support\Navigation\WorkspaceEmbed::workflowActionTurboFrame() }}"
                                                data-preserve-workspace-scroll="1"
                                                @submit="beginSubmit($event, @js($childKey))"
                                            >
                                                @csrf
                                                <x-loan.workspace-embed-field />
                                                <input type="hidden" name="attention_keys[]" value="{{ $childKey }}">
                                                <button
                                                    type="submit"
                                                    class="loan-approval-attention__btn loan-approval-attention__btn--approve loan-approval-attention__btn--icon"
                                                    title="Approve"
                                                    :disabled="isAnyBusy()"
                                                    :aria-busy="isBusy(@js($childKey)) ? 'true' : 'false'"
                                                    :class="{ 'loan-approval-attention__btn--busy': isBusy(@js($childKey)) }"
                                                >
                                                    <span x-show="!isBusy(@js($childKey))">✓</span>
                                                    <span x-show="isBusy(@js($childKey))" x-cloak class="loan-submit-spinner loan-submit-spinner--sm" aria-hidden="true"></span>
                                                </button>
                                            </form>
                                            <button
                                                type="button"
                                                class="loan-approval-attention__btn loan-approval-attention__btn--reject loan-approval-attention__btn--icon"
                                                title="Reject"
                                                :disabled="isAnyBusy()"
                                                @click="$refs['reject-{{ md5($childKey) }}'].showModal()"
                                            >✕</button>
                                            <dialog x-ref="reject-{{ md5($childKey) }}" class="loan-approval-attention__dialog rounded-xl border border-slate-200 p-0 shadow-xl backdrop:bg-slate-900/40">
                                                <form
                                                    method="post"
                                                    action="{{ $rejectUrl }}"
                                                    class="w-[min(100vw-2rem,28rem)] space-y-3 p-4"
                                                    data-turbo-frame="{{ \App\Support\Navigation\WorkspaceEmbed::workflowActionTurboFrame() }}"
                                                    data-preserve-workspace-scroll="1"
                                                    @submit="beginSubmit($event, 'reject-{{ md5($childKey) }}')"
                                                >
                                                    @csrf
                                                    <x-loan.workspace-embed-field />
                                                    <input type="hidden" name="attention_key" value="{{ $childKey }}">
                                                    <input type="hidden" name="reject_target" value="{{ $child['reject_target'] ?? 'appraisal' }}">
                                                    <p class="text-sm font-semibold text-slate-900">Reject past loan review</p>
                                                    <textarea name="comments" rows="3" required minlength="10" maxlength="2000" class="loan-ent-textarea mt-1" placeholder="What must the loan officer fix?"></textarea>
                                                    <div class="flex justify-end gap-2">
                                                        <button type="button" class="loan-ent-btn loan-ent-btn--secondary loan-ent-btn--sm" @click="$refs['reject-{{ md5($childKey) }}'].close()">Cancel</button>
                                                        <button
                                                            type="submit"
                                                            class="loan-approval-attention__btn loan-approval-attention__btn--reject"
                                                            :disabled="isBusy('reject-{{ md5($childKey) }}')"
                                                            :aria-busy="isBusy('reject-{{ md5($childKey) }}') ? 'true' : 'false'"
                                                            :class="{ 'loan-approval-attention__btn--busy': isBusy('reject-{{ md5($childKey) }}') }"
                                                        >
                                                            <span x-show="!isBusy('reject-{{ md5($childKey) }}')">Send back</span>
                                                            <span x-show="isBusy('reject-{{ md5($childKey) }}')" x-cloak class="inline-flex items-center gap-1">
                                                                <span class="loan-submit-spinner loan-submit-spinner--sm" aria-hidden="true"></span>
                                                                <span>Sending…</span>
                                                            </span>
                                                        </button>
                                                    </div>
                                                </form>
                                            </dialog>
                                        </div>
                                    @endif
                                </div>

                                @if ($hasPastLoanDetail)
                                    <div
                                        class="loan-approval-attention__child-detail"
                                        x-show="expandedPastLoanId === {{ $childLoanId }}"
                                        x-cloak
                                    >
                                        @include('loan.book.applications.partials.approval-attention-past-loan-detail', ['child' => $child])
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endif
            </article>
        @endforeach

        @if ($canConfirm && ! $allApproved)
            <p class="loan-approval-attention__gate">
                Approve every attention above before you record the final workflow decision below.
            </p>
        @endif
    </section>
@endif