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

{% block title %}{% if is_create %}{% trans "Add Task" %}{% else %}{% trans "Edit Task" %}{% endif %} - PX360{% endblock %}

{% block content %}
<!-- Back Button -->
<div class="mb-6">
    <a href="{% url 'projects:project_detail' pk=project.pk %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
        <i data-lucide="arrow-left" class="w-4 h-4"></i>
        <span class="text-sm font-medium">{% trans "Back to Project" %}</span>
    </a>
</div>

<!-- Header -->
<header class="mb-6">
    <div class="flex justify-between items-start">
        <div>
            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
                <i data-lucide="check-square" class="w-6 h-6"></i>
                {% if is_create %}{% trans "Add Task" %}{% else %}{% trans "Edit Task" %}{% endif %}
            </h1>
            <p class="text-sm text-slate mt-1">
                {% if is_create %}
                    {% trans "Create a new task for" %} <strong>{{ project.name }}</strong>
                {% else %}
                    {% trans "Update task details" %}
                {% endif %}
            </p>
        </div>
    </div>
</header>

<!-- Form Card -->
<div class="bg-white rounded-2xl border shadow-sm overflow-hidden max-w-2xl">
    <div class="px-6 py-4 border-b">
        <h2 class="text-sm font-bold text-navy">{% trans "Task Information" %}</h2>
    </div>
    <div class="p-6">
        <form method="post" novalidate>
            {% csrf_token %}
            
            <!-- Title -->
            <div>
                <label for="{{ form.title.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                    {% trans "Task Title" %} <span class="text-red-500">*</span>
                </label>
                {{ form.title }}
                {% if form.title.errors %}
                <p class="text-red-500 text-xs mt-1">{{ form.title.errors.0 }}</p>
                {% endif %}
            </div>

            <!-- Description -->
            <div class="mt-6">
                <label for="{{ form.description.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                    {% trans "Description" %}
                </label>
                {{ form.description }}
                {% if form.description.errors %}
                <p class="text-red-500 text-xs mt-1">{{ form.description.errors.0 }}</p>
                {% endif %}
            </div>

            <div class="grid grid-cols-2 gap-6 mt-6">
                <!-- Status -->
                <div>
                    <label for="{{ form.status.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                        {% trans "Status" %} <span class="text-red-500">*</span>
                    </label>
                    {{ form.status }}
                    {% if form.status.errors %}
                    <p class="text-red-500 text-xs mt-1">{{ form.status.errors.0 }}</p>
                    {% endif %}
                </div>
                
                <!-- Assigned To -->
                <div>
                    <label for="{{ form.assigned_to.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                        {% trans "Assigned To" %}
                    </label>
                    {{ form.assigned_to }}
                    {% if form.assigned_to.errors %}
                    <p class="text-red-500 text-xs mt-1">{{ form.assigned_to.errors.0 }}</p>
                    {% endif %}
                </div>
            </div>

            <div class="mt-6">
                <label for="{{ form.due_date.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                    {% trans "Due Date" %}
                </label>
                {{ form.due_date }}
                {% if form.due_date.errors %}
                <p class="text-red-500 text-xs mt-1">{{ form.due_date.errors.0 }}</p>
                {% endif %}
            </div>

            <!-- Submit Buttons -->
            <div class="flex items-center gap-3 mt-8 pt-6 border-t">
                <button type="submit" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue flex items-center gap-2 transition">
                    <i data-lucide="save" class="w-4 h-4"></i>
                    {% if is_create %}{% trans "Add Task" %}{% else %}{% trans "Save Changes" %}{% endif %}
                </button>
                <a href="{% url 'projects:project_detail' pk=project.pk %}" class="bg-slate-100 text-slate px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-slate-200 transition">
                    {% trans "Cancel" %}
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}