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

{% block title %}{% trans "Convert to Action" %} - {{ observation.tracking_code }} - PX360{% endblock %}

{% block content %}
<!-- Back Link -->
<div class="mb-6">
    <a href="{% url 'observations:observation_detail' observation.id %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition font-medium">
        <i data-lucide="arrow-left" class="w-4 h-4"></i> {{ observation.tracking_code }}
    </a>
    <span class="mx-2 text-slate">/</span>
    <span class="text-navy font-semibold">{% trans "Convert to Action" %}</span>
</div>

<div class="max-w-3xl mx-auto">
    <!-- Convert Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
        <!-- Card Header -->
        <div class="px-6 py-4 bg-green-500 text-white">
            <h2 class="text-lg font-bold flex items-center gap-2">
                <i data-lucide="arrow-right-circle" class="w-5 h-5"></i>
                {% trans "Convert Observation to PX Action" %}
            </h2>
        </div>

        <div class="p-6">
            <!-- Observation Summary -->
            <div class="bg-blue-50 border border-blue-100 rounded-xl p-4 mb-6">
                <h3 class="text-sm font-bold text-navy mb-3">{% trans "Observation Summary" %}</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Reference Number" %}</p>
                        <p class="text-sm font-bold text-navy font-mono">{{ observation.tracking_code }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Severity" %}</p>
                        <span class="px-3 py-1 rounded-full text-sm font-semibold
                            {% if observation.severity == 'low' %}bg-green-100 text-green-700
                            {% elif observation.severity == 'medium' %}bg-yellow-100 text-yellow-700
                            {% elif observation.severity == 'high' %}bg-red-100 text-red-700
                            {% elif observation.severity == 'critical' %}bg-red-500 text-white
                            {% else %}bg-gray-100 text-gray-600{% endif %}">
                            {{ observation.get_severity_display }}
                        </span>
                    </div>
                </div>
                <hr class="border-blue-100 my-3">
                <p class="text-xs font-semibold text-slate uppercase tracking-wide mb-1">{% trans "Description" %}</p>
                <p class="text-sm text-gray-700">{{ observation.description|truncatewords:50 }}</p>
            </div>

            <!-- Convert Form -->
            <form method="post">
                {% csrf_token %}

                <div class="mb-4">
                    <label class="block text-sm font-semibold text-slate mb-2">{% trans "Action Title" %} <span class="text-red-500">*</span></label>
                    {{ form.title }}
                    <p class="text-xs text-slate mt-1">{% trans "A clear, actionable title for the PX Action" %}</p>
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-semibold text-slate mb-2">{% trans "Description" %} <span class="text-red-500">*</span></label>
                    {{ form.description }}
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-sm font-semibold text-slate mb-2">{% trans "Category" %} <span class="text-red-500">*</span></label>
                        {{ form.category }}
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-slate mb-2">{% trans "Priority" %} <span class="text-red-500">*</span></label>
                        {{ form.priority }}
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div>
                        <label class="block text-sm font-semibold text-slate mb-2">{% trans "Assign to Department" %}</label>
                        {{ form.assigned_department }}
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-slate mb-2">{% trans "Assign to User" %}</label>
                        {{ form.assigned_to }}
                    </div>
                </div>

                <hr class="border-slate-100 mb-6">

                <div class="flex justify-end gap-3">
                    <a href="{% url 'observations:observation_detail' observation.id %}" class="px-4 py-2.5 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-slate-50 transition inline-flex items-center gap-2">
                        <i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Cancel" %}
                    </a>
                    <button type="submit" class="bg-green-500 text-white px-6 py-2.5 rounded-xl font-semibold hover:bg-green-600 transition inline-flex items-center gap-2">
                        <i data-lucide="check-circle" class="w-4 h-4"></i> {% trans "Create PX Action" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}