{% extends "base.html" %}
{% block title %}Subjects{% endblock %}
{% block page_title %}Subjects{% endblock %}
{% set active = "subjects" %}
{% block content %}
<div class="split-layout">
  <div class="card">
    <div class="card-header"><h3>Add Subject</h3></div>
    <div class="card-body">
      <form hx-post="/subjects/add" hx-target="#subject-list" hx-swap="outerHTML">
        <div class="form-group">
          <label class="form-label">Subject Name</label>
          <input type="text" name="name" class="form-input" required placeholder="Mathematics">
        </div>
        <div class="form-row-2">
          <div class="form-group">
            <label class="form-label">Code</label>
            <input type="text" name="code" class="form-input" required placeholder="MATH" maxlength="8">
          </div>
          <div class="form-group">
            <label class="form-label">Type</label>
            <select name="subject_type" class="form-select">
              <option value="theory">Theory</option>
              <option value="lab">Lab</option>
              <option value="PT">PT/Games</option>
              <option value="activity">Activity</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Color (for timetable)</label>
          <div class="color-row">
            {% for c in ['#4F8EF7','#10b981','#f59e0b','#ef4444','#8b5cf6','#ec4899','#06b6d4','#84cc16'] %}
            <label class="color-swatch" style="background:{{ c }}">
              <input type="radio" name="color" value="{{ c }}" {% if loop.first %}checked{% endif %} style="display:none">
            </label>
            {% endfor %}
          </div>
        </div>
        <button type="submit" class="btn btn-primary w-full">Add Subject</button>
      </form>
    </div>
  </div>
  <div id="subject-list">{% include "partials/subject_list.html" %}</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
document.querySelectorAll('.color-swatch').forEach(s => {
  s.addEventListener('click', () => {
    document.querySelectorAll('.color-swatch').forEach(x => x.classList.remove('selected'));
    s.classList.add('selected');
  });
});
</script>
{% endblock %}