<%- include('_sidebar', { active: 'subjects' }) %>
<div class="main">
  <div class="topbar">
    <h2>Subjects</h2>
    <span style="font-size:13px;color:#9A9890;"><%= subjects.length %> subject<%= subjects.length !== 1 ? 's' : '' %></span>
  </div>
  <div class="content">

    <% if (success && success.length) { %>
      <div class="flash flash-success"><%= success %></div>
    <% } %>
    <% if (error && error.length) { %>
      <div class="flash flash-error"><%= error %></div>
    <% } %>

    <div style="display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;">

      <!-- ── Subjects table ── -->
      <div class="card">
        <div class="card-header">
          <h3>All Subjects</h3>
        </div>
        <% if (subjects.length === 0) { %>
          <div style="padding:32px;text-align:center;color:#9A9890;">No subjects yet. Create one using the form.</div>
        <% } else { %>
          <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Code</th>
                <th>Slug</th>
                <th>Created</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <% subjects.forEach(function(s) { %>
                <tr>
                  <td><strong><%= s.name %></strong></td>
                  <td>
                    <% if (s.code) { %>
                      <span class="badge badge-tutor"><%= s.code %></span>
                    <% } else { %>
                      <span style="color:#ccc;">—</span>
                    <% } %>
                  </td>
                  <td style="font-family:monospace;font-size:12px;color:#5F5E5A;"><%= s.slug || '—' %></td>
                  <td style="color:#9A9890;font-size:12px;">
                    <%= new Date(s.createdAt).toLocaleDateString('en-GB') %>
                  </td>
                  <td>
                    <form method="POST" action="/admin/subjects/<%= s.id %>/delete" style="display:inline;">
                      <button type="submit" class="btn btn-deactivate"
                        onclick="return confirm('Delete subject \"<%= s.name %>\"? This will also remove all enrollments linked to it.')">
                        Delete
                      </button>
                    </form>
                  </td>
                </tr>
              <% }) %>
            </tbody>
          </table>
        <% } %>
      </div>

      <!-- ── Create subject form ── -->
      <div class="card" style="overflow:visible;">
        <div class="card-header">
          <h3>Add New Subject</h3>
        </div>
        <form method="POST" action="/admin/subjects/create" style="padding:20px;">

          <div style="margin-bottom:14px;">
            <label style="display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:#5F5E5A;margin-bottom:5px;">
              Subject Name <span style="color:#A32D2D;">*</span>
            </label>
            <input type="text" name="name" required placeholder="e.g. Mathematics"
              value="<%= fields.name || '' %>"
              style="width:100%;padding:9px 12px;border:1px solid #E4E2DC;border-radius:7px;font-size:13px;outline:none;">
            <p style="font-size:11px;color:#9A9890;margin-top:4px;">Slug is auto-generated from the name.</p>
          </div>

          <div style="margin-bottom:20px;">
            <label style="display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:#5F5E5A;margin-bottom:5px;">
              Short Code <span style="font-weight:400;text-transform:none;letter-spacing:0;">(optional)</span>
            </label>
            <input type="text" name="code" placeholder="e.g. MATH"
              value="<%= fields.code || '' %>"
              style="width:100%;padding:9px 12px;border:1px solid #E4E2DC;border-radius:7px;font-size:13px;outline:none;">
          </div>

          <button type="submit"
            style="width:100%;padding:10px;background:#1A56A0;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;">
            Create Subject
          </button>
        </form>
      </div>

    </div>
  </div>
</div>
