{% 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>
  <p class="page-subtitle">{% if student %}Update student information{% else %}Enroll a new student{% endif %}</p>
</div>
<a href="{% url 'student_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:760px;">
<div class="card-body">
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label">First Name *</label>
        <input type="text" name="first_name" value="{{ form.first_name.value|default:'' }}" class="form-control" placeholder="First name" required />
        {% if form.first_name.errors %}<div style="color:var(--danger);font-size:12px;margin-top:4px;">{{ form.first_name.errors.0 }}</div>{% endif %}
      </div>
      <div class="form-group">
        <label class="form-label">Last Name *</label>
        <input type="text" name="last_name" value="{{ form.last_name.value|default:'' }}" class="form-control" placeholder="Last name" required />
      </div>
    </div>
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label">Student ID *</label>
        <input type="text" name="student_id" value="{{ form.student_id.value|default:'' }}" class="form-control" placeholder="e.g. STU-2024-001" required />
        {% if form.student_id.errors %}<div style="color:var(--danger);font-size:12px;margin-top:4px;">{{ form.student_id.errors.0 }}</div>{% endif %}
      </div>
      <div class="form-group">
        <label class="form-label">Email *</label>
        <input type="email" name="email" value="{{ form.email.value|default:'' }}" class="form-control" placeholder="student@school.edu" required />
        {% if form.email.errors %}<div style="color:var(--danger);font-size:12px;margin-top:4px;">{{ form.email.errors.0 }}</div>{% endif %}
      </div>
    </div>
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label">Phone</label>
        <input type="text" name="phone" value="{{ form.phone.value|default:'' }}" class="form-control" placeholder="+1 234 567 8900" />
      </div>
      <div class="form-group">
        <label class="form-label">Date of Birth</label>
        <input type="date" name="date_of_birth" value="{{ form.date_of_birth.value|default:'' }}" class="form-control" />
      </div>
    </div>
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label">Gender</label>
        <select name="gender" class="form-control">
          <option value="M" {% if form.gender.value == 'M' %}selected{% endif %}>Male</option>
          <option value="F" {% if form.gender.value == 'F' %}selected{% endif %}>Female</option>
          <option value="O" {% if form.gender.value == 'O' %}selected{% endif %}>Other</option>
        </select>
      </div>
      <div class="form-group">
        <label class="form-label">Class</label>
        <select name="school_class" class="form-control">
          <option value="">— Not assigned —</option>
          {% for cls in form.school_class.field.queryset %}
          <option value="{{ cls.pk }}" {% if form.school_class.value|stringformat:"s" == cls.pk|stringformat:"s" %}selected{% endif %}>{{ cls }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="form-grid">
      <div class="form-group">
        <label class="form-label">Status</label>
        <select name="status" class="form-control">
          <option value="active" {% if form.status.value == 'active' %}selected{% endif %}>Active</option>
          <option value="inactive" {% if form.status.value == 'inactive' %}selected{% endif %}>Inactive</option>
          <option value="graduated" {% if form.status.value == 'graduated' %}selected{% endif %}>Graduated</option>
        </select>
      </div>
      <div class="form-group">
        <label class="form-label">Photo</label>
        <input type="file" name="photo" class="form-control" accept="image/*" />
      </div>
    </div>
    <div class="form-group">
      <label class="form-label">Address</label>
      <textarea name="address" class="form-control" rows="3" placeholder="Student's home address">{{ form.address.value|default:'' }}</textarea>
    </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>
        {% if student %}Update Student{% else %}Add Student{% endif %}
      </button>
      <a href="{% url 'student_list' %}" class="btn btn-secondary">Cancel</a>
    </div>
  </form>
</div>
</div>
{% endblock %}