<div class="breadcrumbs"><a href="/teachers">Teachers</a> <span class="sep">/</span> <%= teacher.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(--violet), var(--brand));"><%= teacher.name.split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase() %></div>
    <div>
      <h2 style="font-size:20px;"><%= teacher.name %></h2>
      <div style="color:var(--muted); font-size:13px; margin-top:4px;">
        <span class="id-code"><%= teacher.employee_id %></span> · <%= teacher.subject %> ·
        <span class="badge <%= teacher.status === 'active' ? 'badge-green' : 'badge-gray' %>"><%= teacher.status %></span>
      </div>
    </div>
  </div>
  <div style="display:flex; gap:10px;">
    <a href="/teachers/<%= teacher.id %>/edit" class="btn btn-outline"><i class="fa-solid fa-pen"></i> Edit</a>
    <form method="POST" action="/teachers/<%= teacher.id %>?_method=DELETE" onsubmit="return confirm('Remove this teacher record permanently?');">
      <button class="btn btn-danger" type="submit"><i class="fa-solid fa-trash"></i> Delete</button>
    </form>
  </div>
</div>

<div class="grid-2">
  <div class="card card-pad">
    <h3 style="margin-bottom:16px;">Profile Details</h3>
    <div class="form-grid" style="gap:14px 20px;">
      <div><div class="hint">EMAIL</div><div class="row-title"><%= teacher.email || '—' %></div></div>
      <div><div class="hint">PHONE</div><div class="row-title"><%= teacher.phone || '—' %></div></div>
      <div><div class="hint">QUALIFICATION</div><div class="row-title"><%= teacher.qualification || '—' %></div></div>
      <div><div class="hint">JOINING DATE</div><div class="row-title"><%= teacher.joining_date || '—' %></div></div>
      <div><div class="hint">MONTHLY SALARY</div><div class="row-title">$<%= (teacher.salary || 0).toLocaleString() %></div></div>
    </div>
  </div>
  <div class="card">
    <div class="card-head"><h3>Assigned Classes</h3></div>
    <div class="card-body">
      <% if (classes.length === 0) { %><div class="empty-state" style="padding:20px;"><i class="fa-solid fa-school"></i><h4>No classes assigned</h4></div><% } %>
      <ul>
        <% classes.forEach(function(c) { %>
          <li style="display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border);">
            <span class="row-title"><%= c.name %> <%= c.section %></span>
            <span class="badge badge-brand"><%= c.room %></span>
          </li>
        <% }); %>
      </ul>
    </div>
  </div>
</div>
