<div class="flex flex-wrap items-center justify-between gap-3">
  <div><h3 class="text-lg font-semibold text-slate-900">My Alert</h3><p class="mt-1 text-sm text-slate-600">Open your alert centre to view notifications and follow-ups.</p></div>
  <a href="/alerts" class="af-btn af-btn-primary">Open Alerts</a>
</div>
<div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-soft">
  <div class="text-sm text-slate-600">{% if unread_alert_count is defined and unread_alert_count > 0 %}You have <strong class="text-slate-900">{{ unread_alert_count }}</strong> unread alert(s).{% else %}No unread alert count is pending in this workspace context.{% endif %}</div>
  <div class="mt-4 grid gap-3 md:grid-cols-3">
    <a href="/alerts" class="rounded-2xl border border-slate-200 bg-slate-50 p-4 font-semibold text-slate-700 hover:bg-brand-50 hover:border-brand-200">View Alerts</a>
    <a href="/employee/work" class="rounded-2xl border border-slate-200 bg-slate-50 p-4 font-semibold text-slate-700 hover:bg-brand-50 hover:border-brand-200">Open Work Board</a>
    <a href="/employee/attendance" class="rounded-2xl border border-slate-200 bg-slate-50 p-4 font-semibold text-slate-700 hover:bg-brand-50 hover:border-brand-200">Open Attendance</a>
  </div>
</div>
