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

{% block title %}{% trans "Respond to Observation" %} - {{ observation.tracking_code }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 py-12 px-4">
    <div class="max-w-2xl mx-auto">
        <div class="bg-white rounded-3xl shadow-2xl p-8 md:p-10">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                    <i data-lucide="eye" class="w-5 h-5 text-blue"></i>
                </div>
                <div>
                    <h1 class="text-xl font-bold text-navy">{% trans "Department Response" %}</h1>
                    <p class="text-sm text-slate-500">{{ observation.tracking_code }}</p>
                </div>
            </div>

            <div class="bg-slate-50 rounded-2xl p-5 mb-6">
                <h3 class="text-sm font-bold text-navy mb-2">{% trans "Observation Details" %}</h3>
                <p class="text-sm text-slate-700 whitespace-pre-wrap">{{ observation.description }}</p>
                {% if observation.title %}
                <p class="text-xs text-slate-500 mt-2"><strong>{% trans "Title" %}:</strong> {{ observation.title }}</p>
                {% endif %}
                <p class="text-xs text-slate-500"><strong>{% trans "Severity" %}:</strong> {{ observation.get_severity_display }}</p>
            </div>

            {% if error %}
            <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-4">
                <p class="text-sm text-red-700">{{ error }}</p>
            </div>
            {% endif %}

            <form method="post">
                {% csrf_token %}
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-slate mb-2">{% trans "Response (English)" %}</label>
                    <textarea name="response_en" rows="5" class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none" placeholder="{% trans 'Enter your response in English...' %}"></textarea>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-slate mb-2">{% trans "Response (Arabic)" %}</label>
                    <textarea name="response_ar" rows="5" class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none" dir="rtl" placeholder="{% trans 'أدخل ردك بالعربية...' %}"></textarea>
                </div>
                <button type="submit" class="w-full px-6 py-3 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition">
                    {% trans "Submit Response" %}
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %}