<div class="breadcrumbs"><a href="/students">Students</a> <span class="sep">/</span> <%= student.name %></div>

<div class="card card-pad" style="margin-bottom:18px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;">
  <div style="display:flex; align-items:center; gap:16px;">
    <div class="avatar" style="width:64px; height:64px; font-size:22px; background:linear-gradient(135deg, var(--sky), var(--brand));"><%= student.name.split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase() %></div>
    <div>
      <h2 style="font-size:20px;"><%= student.name %></h2>
      <div style="color:var(--muted); font-size:13px; margin-top:4px;">
        <span class="id-code"><%= student.admission_no %></span> ·
        <%= student.class_name ? student.class_name + ' ' + student.class_section : 'Unassigned class' %> ·
        <span class="badge <%= student.status === 'active' ? 'badge-green' : 'badge-gray' %>"><%= student.status %></span>
      </div>
    </div>
  </div>
  <div style="display:flex; gap:10px;">
    <a href="/students/<%= student.id %>/edit" class="btn btn-outline"><i class="fa-solid fa-pen"></i> Edit</a>
    <form method="POST" action="/students/<%= student.id %>?_method=DELETE" onsubmit="return confirm('Remove this student record permanently?');">
      <button class="btn btn-danger" type="submit"><i class="fa-solid fa-trash"></i> Delete</button>
    </form>
  </div>
</div>

<div class="grid-main-side">
  <div>
    <div class="card" style="margin-bottom:18px;">
      <div class="card-head"><h3>Recent Attendance</h3></div>
      <div class="table-wrap">
        <table class="data-table">
          <thead><tr><th>Date</th><th>Status</th></tr></thead>
          <tbody>
            <% if (attendance.length === 0) { %><tr><td colspan="2"><div class="empty-state"><i class="fa-regular fa-calendar"></i><h4>No attendance recorded</h4></div></td></tr><% } %>
            <% attendance.forEach(function(a) { %>
              <tr>
                <td><%= new Date(a.date).toLocaleDateString('en-US', { weekday:'short', month:'short', day:'numeric' }) %></td>
                <td>
                  <span class="badge <%= a.status === 'present' ? 'badge-green' : a.status === 'absent' ? 'badge-red' : a.status === 'late' ? 'badge-amber' : 'badge-violet' %>"><%= a.status %></span>
                </td>
              </tr>
            <% }); %>
          </tbody>
        </table>
      </div>
    </div>

    <div class="card">
      <div class="card-head"><h3>Exam Results</h3></div>
      <div class="table-wrap">
        <table class="data-table">
          <thead><tr><th>Exam</th><th>Subject</th><th>Marks</th><th>Grade</th></tr></thead>
          <tbody>
            <% if (results.length === 0) { %><tr><td colspan="4"><div class="empty-state"><i class="fa-regular fa-file-lines"></i><h4>No results recorded</h4></div></td></tr><% } %>
            <% results.forEach(function(r) { %>
              <tr>
                <td><%= r.exam_name %></td>
                <td><%= r.subject %></td>
                <td><%= r.marks_obtained %> / <%= r.max_marks %></td>
                <td><span class="badge badge-brand"><%= r.grade %></span></td>
              </tr>
            <% }); %>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div>
    <div class="card">
      <div class="card-head"><h3>Fee Payments</h3></div>
      <div class="card-body" style="padding:10px 0;">
        <% if (payments.length === 0) { %><div class="empty-state" style="padding:30px 20px;"><i class="fa-solid fa-sack-dollar"></i><h4>No fee records</h4></div><% } %>
        <% payments.forEach(function(p) { %>
          <div class="notice-item" style="padding:12px 22px;">
            <div class="n-icon" style="background:var(--green-light); color:var(--green);"><i class="fa-solid fa-receipt"></i></div>
            <div style="flex:1;">
              <div class="n-title">$<%= p.amount_due.toLocaleString() %> due</div>
              <div class="n-meta"><%= p.payment_date ? new Date(p.payment_date).toLocaleDateString('en-US', { month:'short', day:'numeric', year:'numeric' }) : 'Not paid yet' %></div>
            </div>
            <span class="badge <%= p.status === 'paid' ? 'badge-green' : p.status === 'overdue' ? 'badge-red' : 'badge-amber' %>"><%= p.status %></span>
          </div>
        <% }); %>
      </div>
    </div>
  </div>
</div>
