{% load i18n %}
<form method="post" 
      action="{% if is_create %}{% url 'projects:htmx_task_create' project_pk=project.pk phase_type=phase_type phase=phase.phase %}{% else %}{% url 'projects:htmx_task_edit_form' project_pk=project.pk task_pk=task.pk %}{% endif %}"
      hx-post="{% if is_create %}{% url 'projects:htmx_task_create' project_pk=project.pk phase_type=phase_type phase=phase.phase %}{% else %}{% url 'projects:htmx_task_edit_form' project_pk=project.pk task_pk=task.pk %}{% endif %}"
      hx-target="this"
      hx-swap="outerHTML"
      class="space-y-4"
      @htmx:afterRequest="if(event.detail.successful && !event.detail.xhr.response.includes('<form')) { closeTaskModal(); refreshPhaseColumn('{{ phase_type }}', '{{ phase.phase }}'); }">
    {% csrf_token %}
    
    <!-- Title -->
    <div>
        <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-1.5">
            {% 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>
        <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-1.5">{% 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-4">
        <!-- Status -->
        <div>
            <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-1.5">
                {% 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 class="block text-xs font-bold text-slate uppercase tracking-wider mb-1.5">{% 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="grid grid-cols-2 gap-4">
        <!-- Due Date -->
        <div>
            <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-1.5">{% 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>
        
        <!-- Order -->
        <div>
            <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-1.5">{% trans "Order" %}</label>
            {{ form.order }}
            {% if form.order.errors %}
            <p class="text-red-500 text-xs mt-1">{{ form.order.errors.0 }}</p>
            {% endif %}
        </div>
    </div>

    <!-- Phase Selection (shown for flexibility) -->
    <div class="grid grid-cols-2 gap-4">
        <div>
            <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-1.5">{% trans "PDCA Phase" %}</label>
            {{ form.pdca_phase }}
            {% if form.pdca_phase.errors %}
            <p class="text-red-500 text-xs mt-1">{{ form.pdca_phase.errors.0 }}</p>
            {% endif %}
        </div>
        
        <div>
            <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-1.5">{% trans "FOCUS Phase" %}</label>
            {{ form.focus_phase }}
            {% if form.focus_phase.errors %}
            <p class="text-red-500 text-xs mt-1">{{ form.focus_phase.errors.0 }}</p>
            {% endif %}
        </div>
    </div>

    <!-- Submit Buttons -->
    <div class="flex items-center gap-3 pt-4 border-t border-slate-200">
        <button type="submit" class="px-4 py-2 bg-navy text-white rounded-xl text-sm font-bold hover:bg-blue transition flex items-center gap-2">
            <i data-lucide="save" class="w-4 h-4"></i>
            {% if is_create %}{% trans "Add Task" %}{% else %}{% trans "Save Changes" %}{% endif %}
        </button>
        <button type="button" @click="closeTaskModal()" class="px-4 py-2 border border-slate-200 text-slate rounded-xl text-sm font-bold hover:bg-slate-50 transition">
            {% trans "Cancel" %}
        </button>
    </div>
</form>