<section>
  <div class="admin-header">
    <h1>Attendance</h1>
  </div>

  <div class="detail-panel">
    <h3>Today</h3>
    <% if (!todayRecord.clockInAt) { %>
      <form method="POST" action="/admin/hr/attendance/clock-in">
        <label>
          Note <span class="hint">(optional)</span>
          <input type="text" name="note" placeholder="e.g. working from home">
        </label>
        <button type="submit" class="button button-primary" style="margin-top:0.5rem;">Clock in</button>
      </form>
    <% } else if (!todayRecord.clockOutAt) { %>
      <p>Clocked in at <strong><%= new Date(todayRecord.clockInAt).toLocaleTimeString('en-GB', {hour:'2-digit', minute:'2-digit'}) %></strong><% if (todayRecord.note) { %> - <%= todayRecord.note %><% } %></p>
      <form method="POST" action="/admin/hr/attendance/clock-out">
        <button type="submit" class="button button-primary">Clock out</button>
      </form>
    <% } else { %>
      <p>Done for today: <strong><%= new Date(todayRecord.clockInAt).toLocaleTimeString('en-GB', {hour:'2-digit', minute:'2-digit'}) %></strong> to <strong><%= new Date(todayRecord.clockOutAt).toLocaleTimeString('en-GB', {hour:'2-digit', minute:'2-digit'}) %></strong></p>
    <% } %>
  </div>

  <div class="detail-panel">
    <h3><%= canManage ? 'All staff - recent records' : 'Your recent records' %></h3>
    <table class="admin-table">
      <thead><tr><% if (canManage) { %><th>Staff</th><% } %><th>Date</th><th>Clock in</th><th>Clock out</th><th>Note</th></tr></thead>
      <tbody>
        <% records.forEach(function(r) { %>
          <tr>
            <% if (canManage) { %><td><%= r.User ? r.User.name : '-' %></td><% } %>
            <td><%= r.workDate %></td>
            <td><%= r.clockInAt ? new Date(r.clockInAt).toLocaleTimeString('en-GB', {hour:'2-digit', minute:'2-digit'}) : '-' %></td>
            <td><%= r.clockOutAt ? new Date(r.clockOutAt).toLocaleTimeString('en-GB', {hour:'2-digit', minute:'2-digit'}) : '-' %></td>
            <td><%= r.note || '-' %></td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
</section>
