{# Dashboard widget: Pending approvals and unread notifications action cards #}
{% if pending_approvals_count > 0 or unread_notifications_count > 0 %}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    {% if pending_approvals_count > 0 %}
    <div class="bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-600 dark:to-blue-700 p-6 rounded-xl shadow-lg text-white transform hover:scale-105 transition-all duration-300">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-blue-100 mb-2">{{ _('Action Required') }}</p>
                <p class="text-2xl font-bold mb-1">{{ pending_approvals_count }} {{ _('Pending Approvals') }}</p>
                <p class="text-sm text-blue-100/80">{{ _('Time entries awaiting your review') }}</p>
            </div>
            <a href="{{ url_for('client_portal.time_entry_approvals') }}" 
               class="inline-flex items-center px-5 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-blue-50 transition-colors shadow-md">
                <i class="fas fa-check-circle mr-2"></i>{{ _('Review Now') }}
            </a>
        </div>
    </div>
    {% endif %}
    {% if unread_notifications_count > 0 %}
    <div class="bg-gradient-to-r from-green-500 to-green-600 dark:from-green-600 dark:to-green-700 p-6 rounded-xl shadow-lg text-white transform hover:scale-105 transition-all duration-300">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-green-100 mb-2">{{ _('New Updates') }}</p>
                <p class="text-2xl font-bold mb-1">{{ unread_notifications_count }} {{ _('Unread') }}</p>
                <p class="text-sm text-green-100/80">{{ _('Notifications waiting for you') }}</p>
            </div>
            <a href="{{ url_for('client_portal.notifications') }}" 
               class="inline-flex items-center px-5 py-3 bg-white text-green-600 font-semibold rounded-lg hover:bg-green-50 transition-colors shadow-md">
                <i class="fas fa-bell mr-2"></i>{{ _('View All') }}
            </a>
        </div>
    </div>
    {% endif %}
</div>
{% endif %}