{% extends "base.html" %}
{% block title %} {{ action|default:"Create" }} Assessment {% endblock %}
{% load widget_tweaks %}
{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="bi bi-clipboard-plus"></i> 
                        {{ action|default:"Create New" }} Assessment
                    </h4>
                </div>
                <div class="card-body">
                    <form method="post" novalidate>
                        {% csrf_token %}

                        {% if form.non_field_errors %}
                            <div class="alert alert-danger">
                                {{ form.non_field_errors }}
                            </div>
                        {% endif %}

                        <div class="row g-3">
                            <!-- Title -->
                            <div class="col-12">
                                <label class="form-label fw-semibold">Assessment Title</label>
                                {{ form.title|add_class:"form-control" }}
                                <div class="form-text">{{ form.title.help_text }}</div>
                            </div>

                            <div class="col-md-6">
                                <label for="{{ form.year.id_for_label }}" class="form-label fw-semibold">Exam Year</label>
                                {{ form.year|add_class:"form-control" }}
                                <div class="form-text">Year used to group assessment results.</div>
                            </div>

                            <!-- Description -->
                            <div class="col-12">
                                <label class="form-label fw-semibold">Description</label>
                                {{ form.description|add_class:"form-control" }}
                                <div class="form-text">{{ form.description.help_text }}</div>
                            </div>

                            <!-- Duration -->
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Duration (minutes)</label>
                                {{ form.duration_minutes|add_class:"form-control" }}
                            </div>

                            <!-- Randomize Questions -->
                            <div class="col-md-6">
                                <div class="form-check form-switch mt-4">
                                    {{ form.randomize_questions|add_class:"form-check-input" }}
                                    <label class="form-check-label fw-semibold">
                                        Randomize Questions
                                    </label>
                                </div>
                            </div>

                            <!-- Question Count -->
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Number of Questions (if randomized)</label>
                                {{ form.question_count|add_class:"form-control" }}
                                <div class="form-text">{{ form.question_count.help_text }}</div>
                            </div>

                            <!-- Active Status -->
                            <div class="col-md-6">
                                <div class="form-check form-switch mt-4">
                                    {{ form.is_active|add_class:"form-check-input" }}
                                    <label class="form-check-label fw-semibold">
                                        Available to candidates
                                    </label>
                                    <div class="form-text">When checked, candidates can see and take this assessment.</div>
                                </div>
                            </div>
                        </div>

                        <div class="d-grid d-md-flex justify-content-md-end gap-2 mt-5">
                            <a href="{% url 'cbt:assessment_list' %}" class="btn btn-secondary">Cancel</a>
                            <button type="submit" class="btn btn-success px-5">
                                <i class="bi bi-save"></i> Save Assessment
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}