{% extends 'base.html' %}
{% load static %}

{% block title %}{% if is_new %}New Project{% else %}Edit {{ project.name }}{% endif %} | Fox Fitt{% endblock %}

{% block content %}
{# === PROJECT EDIT/CREATE PAGE ===
     Serves both /projects/new/ and /projects/<id>/edit/.
     Form sections: Project Basics · Timeline · Supervisors. #}

<div class="container py-4">

    {# === PAGE HEADER === #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0" style="font-family: 'Poppins', sans-serif;">
            <i class="fas fa-{% if is_new %}plus{% else %}edit{% endif %} me-2"></i>
            {% if is_new %}New Project{% else %}Edit: {{ project.name }}{% endif %}
        </h1>
        <div class="d-flex gap-2">
            {% if not is_new %}
                <a href="{% url 'project_detail' project.id %}" class="btn btn-outline-secondary btn-sm shadow-sm">
                    <i class="fas fa-times me-1"></i> Cancel
                </a>
            {% else %}
                <a href="{% url 'project_list' %}" class="btn btn-outline-secondary btn-sm shadow-sm">
                    <i class="fas fa-times me-1"></i> Cancel
                </a>
            {% endif %}
        </div>
    </div>

    <form method="POST" novalidate>
        {% csrf_token %}

        {% if form.non_field_errors %}
            <div class="alert alert-danger shadow-sm">
                {{ form.non_field_errors }}
            </div>
        {% endif %}

        <div class="row g-3">

            {# === PROJECT BASICS === #}
            <div class="col-lg-6">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white">
                        <h6 class="mb-0"><i class="fas fa-id-card me-2 text-muted"></i>Project Basics</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label" for="{{ form.name.id_for_label }}">Name *</label>
                            {{ form.name }}
                            {% if form.name.errors %}<div class="text-danger small mt-1">{{ form.name.errors.0 }}</div>{% endif %}
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="{{ form.description.id_for_label }}">Description</label>
                            {{ form.description }}
                            {% if form.description.errors %}<div class="text-danger small mt-1">{{ form.description.errors.0 }}</div>{% endif %}
                        </div>
                        <div class="form-check form-switch">
                            {{ form.active }}
                            <label class="form-check-label" for="{{ form.active.id_for_label }}">
                                Active
                            </label>
                            <div class="form-text small text-muted">
                                Inactive projects are hidden from attendance logging forms.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# === TIMELINE === #}
            <div class="col-lg-6">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white">
                        <h6 class="mb-0"><i class="fas fa-calendar-alt me-2 text-muted"></i>Timeline</h6>
                    </div>
                    <div class="card-body">
                        <p class="small text-muted">
                            Optional. Used for reporting and filtering.
                        </p>
                        <div class="mb-3">
                            <label class="form-label" for="{{ form.start_date.id_for_label }}">Start Date</label>
                            {{ form.start_date }}
                            {% if form.start_date.errors %}<div class="text-danger small mt-1">{{ form.start_date.errors.0 }}</div>{% endif %}
                        </div>
                        <div class="mb-0">
                            <label class="form-label" for="{{ form.end_date.id_for_label }}">End Date</label>
                            {{ form.end_date }}
                            {% if form.end_date.errors %}<div class="text-danger small mt-1">{{ form.end_date.errors.0 }}</div>{% endif %}
                            <div class="form-text small text-muted">
                                Leave blank for ongoing projects.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# === SUPERVISORS PICKER === #}
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white">
                        <h6 class="mb-0"><i class="fas fa-user-tie me-2 text-muted"></i>Supervisors</h6>
                    </div>
                    <div class="card-body">
                        <p class="small text-muted mb-3">
                            Any number of supervisors may be assigned.
                            Only admins and members of the "Work Logger" group are listed.
                        </p>
                        {% if form.supervisors.errors %}
                            <div class="text-danger small mb-2">{{ form.supervisors.errors.0 }}</div>
                        {% endif %}
                        <div class="row g-2">
                            {% for choice in form.supervisors %}
                                <div class="col-md-4 col-lg-3">
                                    <div class="form-check">
                                        {{ choice.tag }}
                                        <label class="form-check-label" for="{{ choice.id_for_label }}">
                                            {{ choice.choice_label }}
                                        </label>
                                    </div>
                                </div>
                            {% empty %}
                                <div class="col-12 text-muted small">
                                    No eligible supervisors. Add a user to the "Work Logger" group or grant them staff access first.
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# === SUBMIT ROW === #}
        <div class="d-flex justify-content-end gap-2 mt-4">
            {% if not is_new %}
                <a href="{% url 'project_detail' project.id %}" class="btn btn-outline-secondary">Cancel</a>
            {% else %}
                <a href="{% url 'project_list' %}" class="btn btn-outline-secondary">Cancel</a>
            {% endif %}
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save me-1"></i>
                {% if is_new %}Create Project{% else %}Save Changes{% endif %}
            </button>
        </div>
    </form>

</div>
{% endblock %}