{% extends "base.html" %}
{% load widget_tweaks %}

{% block title %}
    {% if object %}Edit Assessment{% else %}Create Assessment{% endif %}
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-primary text-white">
                    <h3 class="h5 mb-0">
                        <i class="bi bi-clipboard-plus me-2"></i>
                        {% if object %}Edit Assessment{% else %}Create New Assessment{% endif %}
                    </h3>
                </div>
                <div class="card-body p-4">
                    <form method="post" novalidate>
                        {% csrf_token %}

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

                        <div class="row g-3">
                            <div class="col-12">
                                <label for="{{ form.year.id_for_label }}" class="form-label fw-semibold">Assessment Year</label>
                                {{ form.year|add_class:"form-control" }}
                                {% if form.year.help_text %}
                                    <div class="form-text">{{ form.year.help_text }}</div>
                                {% endif %}
                                {% if form.year.errors %}
                                    <div class="text-danger small mt-1">{{ form.year.errors|join:", " }}</div>
                                {% endif %}
                            </div>
                            <div class="col-12">
                                <label for="{{ form.title.id_for_label }}" class="form-label fw-semibold">Assessment Title</label>
                                {{ form.title|add_class:"form-control" }}
                                {% if form.title.help_text %}
                                    <div class="form-text">{{ form.title.help_text }}</div>
                                {% endif %}
                                {% if form.title.errors %}
                                    <div class="text-danger small mt-1">{{ form.title.errors|join:", " }}</div>
                                {% endif %}
                            </div>

                            <div class="col-12">
                                <label for="{{ form.description.id_for_label }}" class="form-label fw-semibold">Description</label>
                                {{ form.description|add_class:"form-control"|attr:"rows:4" }}
                                {% if form.description.help_text %}
                                    <div class="form-text">{{ form.description.help_text }}</div>
                                {% endif %}
                                {% if form.description.errors %}
                                    <div class="text-danger small mt-1">{{ form.description.errors|join:", " }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6">
                                <label for="{{ form.duration_minutes.id_for_label }}" class="form-label fw-semibold">Duration (minutes)</label>
                                {{ form.duration_minutes|add_class:"form-control" }}
                                {% if form.duration_minutes.errors %}
                                    <div class="text-danger small mt-1">{{ form.duration_minutes.errors|join:", " }}</div>
                                {% endif %}
                            </div>

                            <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" for="{{ form.randomize_questions.id_for_label }}">
                                        Randomize Questions
                                    </label>
                                </div>
                                {% if form.randomize_questions.errors %}
                                    <div class="text-danger small mt-1">{{ form.randomize_questions.errors|join:", " }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6">
                                <label for="{{ form.question_count.id_for_label }}" class="form-label fw-semibold">Number of Questions (if randomized)</label>
                                {{ form.question_count|add_class:"form-control" }}
                                {% if form.question_count.help_text %}
                                    <div class="form-text">{{ form.question_count.help_text }}</div>
                                {% endif %}
                                {% if form.question_count.errors %}
                                    <div class="text-danger small mt-1">{{ form.question_count.errors|join:", " }}</div>
                                {% endif %}
                            </div>

                            <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" for="{{ form.is_active.id_for_label }}">
                                        Available to candidates
                                    </label>
                                    <div class="form-text">When checked, candidates can see and take this assessment.</div>
                                </div>
                                {% if form.is_active.errors %}
                                    <div class="text-danger small mt-1">{{ form.is_active.errors|join:", " }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <a href="{% url 'cbt:assessment_list' %}" class="btn btn-outline-secondary">
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary px-4">
                                <i class="bi bi-save me-2"></i>
                                {% if object %}Save Changes{% else %}Create Assessment{% endif %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}