@php
    $showApproval = auth()->user()->can('is-admin-or-approver');
    $columnClass = $showApproval ? 'col-lg-4 col-6' : 'col-lg-6 col-6';
@endphp

<div class="row">
    <!-- Overdue Action Card -->
    <div class="{{ $columnClass }}">
        <a href="{{ route('threat-action.overdue-actions') }}" class="text-decoration-none">
            <div class="small-box bg-danger">
                <div class="inner">
                    <h3>{{ $threatActionOverdueCount }}</h3>
                    <p>Overdue Action</p>
                </div>
                <div class="icon">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="small-box-footer">
                    More info <i class="fas fa-arrow-circle-right"></i>
                </div>
            </div>
        </a>
    </div>

    <!-- Needs Attention Card -->
    <div class="{{ $columnClass }}">
        <a href="{{ route('threats.index', ['status' => 'needs_attention']) }}" class="text-decoration-none">

            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3>{{ $needsAttentionCount }}</h3>
                    <p>Threat - Needs Attention</p>
                </div>
                <div class="icon">
                    <i class="fas fa-exclamation-circle"></i>
                </div>
                <div class="small-box-footer">
                    More info <i class="fas fa-arrow-circle-right"></i>
                </div>
            </div>
        </a>
    </div>

    @can('is-admin-or-approver')
        <!-- Approval Card -->
        <div class="{{ $columnClass }}">
            <a href="{{ route('threat-my-approvals.index', ['filter' => 'Pending']) }}" class="text-decoration-none">
                <div class="small-box bg-blue">
                    <div class="inner">
                        <h3>{{ $approvalCount }}</h3>
                        <p>Pending Approval</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="small-box-footer">
                        More info <i class="fas fa-arrow-circle-right"></i>
                    </div>
                </div>
            </a>
        </div>
    @endcan
</div>