{% extends "exams/base.html" %}
{% block content %}

<div class="container mt-4">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4>{{ title }}</h4>

    <a href="{% url 'exams:subject_list' %}" class="btn btn-secondary btn-sm">
      <i class="fas fa-arrow-left"></i> Back
    </a>
  </div>

  <div class="card shadow-sm">
    <div class="card-body">

      <form method="POST">
        {% csrf_token %}

        <div class="row">
          <div class="col-md-4 mb-3">
            <label class="fw-bold">Subject Code</label>
            {{ form.subject_code }}
          </div>

          <div class="col-md-4 mb-3">
            <label class="fw-bold">Short Name</label>
            {{ form.subject_shortname }}
          </div>

          <div class="col-md-4 mb-3">
            <label class="fw-bold">Subject Type</label>
            {{ form.subject_type }}
          </div>

          <div class="col-md-4 mb-3">
            <label class="fw-bold">Academic Level</label>
            {{ form.academic_level }}
          </div>
        </div>

        <div class="row">
          <div class="col-md-6 mb-3">
            <label class="fw-bold">Name (English)</label>
            {{ form.subject_name_eng }}
          </div>

          <div class="col-md-6 mb-3">
            <label class="fw-bold">Name (Swahili)</label>
            {{ form.subject_name_sw }}
          </div>
        </div>

        <div class="row">
          <div class="col-md-4 mb-3">
            <label class="fw-bold">Subject Level</label>
            {{ form.subject_level }}
          </div>

          <div class="col-md-4 mb-3">
            <label class="fw-bold">Number of Papers</label>
            {{ form.number_of_papers }}
          </div>

          <div class="col-md-4 mb-3">
            <label class="fw-bold">Color Code</label>
            {{ form.color_code }}
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-3 form-check">
            {{ form.is_principal }}
            <label class="form-check-label">Principal</label>
          </div>

          <div class="col-md-3 form-check">
            {{ form.is_practical }}
            <label class="form-check-label">Practical</label>
          </div>

          <div class="col-md-3 form-check">
            {{ form.is_active }}
            <label class="form-check-label">Active</label>
          </div>
        </div>

        <button class="btn btn-primary w-100">
          <i class="fas fa-save"></i> Save Subject
        </button>

      </form>

    </div>
  </div>

</div>

{% endblock %}