{% extends 'base.html' %}
{% block title %}{{ title }}{% endblock %}
{% block page_title %}{{ title }}{% endblock %}

{% block content %}
<div class="page-header">
<div class="page-header-left"><h1 class="page-title">{{ title }}</h1></div>
<a href="{% url 'class_list' %}" class="btn btn-secondary"><i data-lucide="arrow-left" style="width:15px;height:15px;"></i> Back</a>
</div>
<div class="card" style="max-width:520px;">
<div class="card-body">
<form method="post">
  {% csrf_token %}
  <div class="form-group">
    <label class="form-label">Class Name *</label>
    <input type="text" name="name" value="{{ form.name.value|default:'' }}" class="form-control" placeholder="e.g. Grade 10 Science" required />
  </div>
  <div class="form-grid">
    <div class="form-group">
      <label class="form-label">Grade Level *</label>
      <input type="number" name="grade_level" value="{{ form.grade_level.value|default:'' }}" class="form-control" min="1" max="13" required />
    </div>
    <div class="form-group">
      <label class="form-label">Section</label>
      <input type="text" name="section" value="{{ form.section.value|default:'A' }}" class="form-control" placeholder="A" />
    </div>
  </div>
  <div class="form-grid">
    <div class="form-group">
      <label class="form-label">Room Number</label>
      <input type="text" name="room_number" value="{{ form.room_number.value|default:'' }}" class="form-control" placeholder="e.g. 204" />
    </div>
    <div class="form-group">
      <label class="form-label">Academic Year</label>
      <input type="text" name="academic_year" value="{{ form.academic_year.value|default:'2024-2025' }}" class="form-control" />
    </div>
  </div>
  <div style="display:flex;gap:10px;margin-top:8px;">
    <button type="submit" class="btn btn-primary"><i data-lucide="save" style="width:15px;height:15px;"></i> Save Class</button>
    <a href="{% url 'class_list' %}" class="btn btn-secondary">Cancel</a>
  </div>
</form>
</div>
</div>
{% endblock %}