{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% if question %}{% trans "Edit Question" %}{% else %}{% trans "Create Question" %}{% endif %} - PX360{% endblock %}

{% block content %}
<div class="p-6 max-w-2xl mx-auto">
    <div class="flex items-center gap-2 text-sm text-slate-500 mb-4">
        <a href="{% url 'organizations:manager_review_questions' %}" class="hover:text-navy transition">{% trans "Manager Review Questions" %}</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span class="text-navy font-semibold">{% if question %}{% trans "Edit" %}{% else %}{% trans "Create" %}{% endif %}</span>
    </div>

    <div class="flex items-center gap-3 mb-6">
        <div class="w-10 h-10 bg-navy/10 rounded-xl flex items-center justify-center">
            <i data-lucide="help-circle" class="w-5 h-5 text-navy"></i>
        </div>
        <h1 class="text-xl font-bold text-navy">{% if question %}{% trans "Edit Question" %}{% else %}{% trans "Create Question" %}{% endif %}</h1>
    </div>

    <form method="post" class="bg-white rounded-2xl border border-slate-200 p-6 space-y-5">
        {% csrf_token %}

        <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">
                {% trans "Question Text (English)" %} <span class="text-red-500">*</span>
            </label>
            <textarea name="text_en" rows="2" required
                class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-sm focus:outline-none focus:border-navy focus:ring-2 focus:ring-navy/20 resize-none"
                placeholder="{% trans 'Enter the question in English...' %}">{{ question.text_en|default:'' }}</textarea>
        </div>

        <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">
                {% trans "Question Text (Arabic)" %}
            </label>
            <textarea name="text_ar" rows="2" dir="rtl"
                class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-sm focus:outline-none focus:border-navy focus:ring-2 focus:ring-navy/20 resize-none"
                placeholder="{% trans 'أدخل السؤال باللغة العربية...' %}">{{ question.text_ar|default:'' }}</textarea>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">{% trans "Question Type" %}</label>
                <select name="question_type"
                    class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-sm focus:outline-none focus:border-navy focus:ring-2 focus:ring-navy/20">
                    {% for value, label in question_types %}
                    <option value="{{ value }}" {% if question.question_type == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">{% trans "Order" %}</label>
                <input type="number" name="order" value="{{ question.order|default:'0' }}" min="0"
                    class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-sm focus:outline-none focus:border-navy focus:ring-2 focus:ring-navy/20">
            </div>
        </div>

        <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">
                {% trans "Choices (for Multiple Choice)" %}
            </label>
            <input type="text" name="choices_json"
                value="{% if question.choices_json %}{{ question.choices_json|safe }}{% endif %}"
                class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-sm focus:outline-none focus:border-navy focus:ring-2 focus:ring-navy/20"
                placeholder='{% trans "e.g. Option A, Option B, Option C" %}'>
            <p class="text-xs text-slate-400 mt-1">{% trans "Comma-separated values or JSON array. Only used for Multiple Choice type." %}</p>
        </div>

        <div class="flex items-center gap-2">
            <input type="checkbox" name="is_active" id="is_active" {% if question.is_active or not question %}checked{% endif %}
                class="w-4 h-4 text-navy border-slate-300 rounded focus:ring-navy">
            <label for="is_active" class="text-sm font-semibold text-slate-700">{% trans "Active" %}</label>
        </div>

        <div class="flex gap-3 pt-2">
            <button type="submit"
                class="px-6 py-2.5 bg-gradient-to-r from-navy to-blue text-white font-semibold rounded-xl hover:opacity-90 transition">
                {% if question %}{% trans "Update" %}{% else %}{% trans "Create" %}{% endif %}
            </button>
            <a href="{% url 'organizations:manager_review_questions' %}"
                class="px-6 py-2.5 bg-slate-100 text-slate-700 font-semibold rounded-xl hover:bg-slate-200 transition">
                {% trans "Cancel" %}
            </a>
        </div>
    </form>
</div>
{% endblock %}