@php
    $approvals = $lead->cp_approvals->where('section', $sectionKey);
@endphp
<div class="no-page-break">
    <div class="row">
        <div class="col-12">
            <div class="bg-dark text-white text-center">
                {{ $title }}
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <table class="table table-bordered mb-0 cp-compact-table">
                <tbody>
                    @forelse($approvals as $approval)
                    <tr>
                        <td style="width: 50%;">Status:</td>
                        <td>
                            <label class="me-3"><i class="mdi {{ $approval->status === 'approved' ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}"></i> Approved</label>
                            <label class="me-3"><i class="mdi {{ $approval->status === 'disapproved' ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}"></i> Disapproved</label>
                            <label><i class="mdi {{ $approval->status === 'conditional' ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}"></i> Conditional</label>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; height: 110px;">
                            {{ $approval->role_label }} by :
                            <div class="mt-4">
                                <div>Name: {{ $approval->signer_name }}</div>
                                <div>Position: {{ $approval->signer_position }}</div>
                                <div>Date: {{ $approval->signer_date ? $approval->signer_date->format('d/m/Y') : '' }}</div>
                            </div>
                        </td>
                        <td style="vertical-align: top;">
                            Reasons :
                            <div style="white-space: pre-line;">{{ $approval->reasons }}</div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td style="width: 50%;">Status:</td>
                        <td>
                            <label class="me-3"><i class="mdi mdi-checkbox-blank-outline"></i> Approved</label>
                            <label class="me-3"><i class="mdi mdi-checkbox-blank-outline"></i> Disapproved</label>
                            <label><i class="mdi mdi-checkbox-blank-outline"></i> Conditional</label>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; height: 110px;">&nbsp;</td>
                        <td style="vertical-align: top;">&nbsp;</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>