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

{% block title %}{{ phase_label }} - {{ project.name }} - PX360{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <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>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-navy to-blue text-white">
            <h1 class="text-xl font-bold flex items-center gap-3">
                <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
                    <i data-lucide="target" class="w-5 h-5"></i>
                </div>
                {% blocktrans with phase_label=phase_label project_name=project.name %}
                {{ phase_label }} Phase - {{ project_name }}
                {% endblocktrans %}
            </h1>
            <p class="text-blue-100 text-sm mt-1">{% trans "FOCUS Methodology" %}</p>
        </div>

        <form method="post" class="p-6 space-y-6">
            {% csrf_token %}

            <div class="grid grid-cols-2 gap-6">
                <div>
                    <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Phase Title" %}</label>
                    <input type="text" name="title" value="{{ focus_phase.title }}" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Status" %}</label>
                    <select name="status" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">
                        {% for status_val, status_label in status_choices %}
                        <option value="{{ status_val }}" {% if focus_phase.status == status_val %}selected{% endif %}>{{ status_label }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Description" %}</label>
                <textarea name="description" rows="4" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">{{ focus_phase.description }}</textarea>
            </div>

            <div class="grid grid-cols-3 gap-6">
                <div>
                    <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Owner" %}</label>
                    <select name="owner" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">
                        <option value="">{% trans "Unassigned" %}</option>
                        {% for member in team_members %}
                        <option value="{{ member.pk }}" {% if focus_phase.owner_id == member.pk %}selected{% endif %}>{{ member.get_full_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Start Date" %}</label>
                    <input type="date" name="start_date" value="{{ focus_phase.start_date|date:'Y-m-d' }}" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">
                </div>
                <div>
                    <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Due Date" %}</label>
                    <input type="date" name="due_date" value="{{ focus_phase.due_date|date:'Y-m-d' }}" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">
                </div>
            </div>

            <div>
                <label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Findings" %}</label>
                <textarea name="findings" rows="4" class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition" placeholder="{% trans 'Key findings and observations for this phase...' %}">{{ focus_phase.findings }}</textarea>
            </div>

            <div class="flex gap-3 pt-4 border-t border-slate-100">
                <button type="submit" class="px-6 py-3 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center gap-2">
                    <i data-lucide="save" class="w-4 h-4"></i> {% trans "Save Phase" %}
                </button>
                <a href="{% url 'projects:project_detail' pk=project.pk %}" class="px-6 py-3 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition">
                    {% trans "Cancel" %}
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();
});
</script>
{% endblock %}