<div class="flex flex-wrap items-center justify-between gap-3">
  <div>
    <h3 class="text-lg font-semibold text-slate-900">My Attendance</h3>
    <p class="mt-1 text-sm text-slate-600">Punch in/out and view your recent attendance records.</p>
  </div>
  <a href="/employee/attendance" class="af-btn af-btn-secondary">Open Full Attendance Page</a>
</div>

{% if not employee %}
<div class="rounded-2xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-900 shadow-soft">Your login is not linked to an employee profile yet. Please request employee linkage first.</div>
{% else %}
<section class="grid gap-4 md:grid-cols-3">
  <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Today</div><div class="mt-1 text-lg font-semibold text-slate-900">{{ today_attendance.attendance_date if today_attendance else 'Not marked' }}</div></div>
  <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Punch In</div><div class="mt-1 text-lg font-semibold text-slate-900">{{ today_attendance.punch_in_local_at.strftime('%H:%M') if today_attendance and today_attendance.punch_in_local_at else (today_attendance.punch_in_utc.strftime('%H:%M UTC') if today_attendance and today_attendance.punch_in_utc else '-') }}</div></div>
  <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Punch Out</div><div class="mt-1 text-lg font-semibold text-slate-900">{{ today_attendance.punch_out_local_at.strftime('%H:%M') if today_attendance and today_attendance.punch_out_local_at else (today_attendance.punch_out_utc.strftime('%H:%M UTC') if today_attendance and today_attendance.punch_out_utc else '-') }}</div></div>
</section>

{% include "modules/employees/templates/employees/portal_partials/attendance_punch_card.html" %}

<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft">
  <table class="min-w-full divide-y divide-slate-200 text-sm">
    <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
      <tr><th class="px-4 py-3">Date</th><th class="px-4 py-3">Punch In</th><th class="px-4 py-3">Punch Out</th><th class="px-4 py-3">Duration</th><th class="px-4 py-3">Status</th><th class="px-4 py-3">Approval</th><th class="px-4 py-3">Geo/IP</th></tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for row in attendance_rows %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3 font-medium text-slate-900">{{ row.attendance_date }}</td>
        <td class="px-4 py-3 text-slate-600">{{ row.punch_in_local_at.strftime('%H:%M') if row.punch_in_local_at else (row.punch_in_utc.strftime('%H:%M UTC') if row.punch_in_utc else '-') }}</td>
        <td class="px-4 py-3 text-slate-600">{{ row.punch_out_local_at.strftime('%H:%M') if row.punch_out_local_at else (row.punch_out_utc.strftime('%H:%M UTC') if row.punch_out_utc else '-') }}</td>
        <td class="px-4 py-3 text-slate-600">{{ (row.work_duration_minutes ~ ' min') if row.work_duration_minutes else '-' }}</td>
        <td class="px-4 py-3">{{ row.status.replace('_',' ').title() }}</td>
        <td class="px-4 py-3">{{ row.approval_status.replace('_',' ').title() }}</td>
        <td class="px-4 py-3 text-xs text-slate-600"><div>Geo: {{ (row.punch_in_geo_status or '-').replace('_',' ').title() }}</div><div>IP: {{ (row.punch_in_ip_status or '-').replace('_',' ').title() }}</div></td>
      </tr>
      {% else %}
      <tr><td colspan="7" class="px-4 py-8 text-center text-slate-500">No attendance records available yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}
