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

{% block title %}{% if is_new %}Add Project{% else %}Edit {{ project.name }}{% endif %} | FoxFitt{% endblock %}

{% block content %}
<div class="container py-4">

<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4">
    <div>
        <h1 class="page-title">
            <i class="fas fa-project-diagram me-2" style="color: var(--accent);"></i>
            {% if is_new %}Add Project{% else %}Edit {{ project.name }}{% endif %}
        </h1>
        <p class="mb-0" style="color: var(--text-secondary); font-size: 0.85rem;">
            {% if is_new %}All fields except Name are optional.
            {% else %}Update any section and Save.{% endif %}
        </p>
    </div>
    <div class="d-flex gap-2 mt-3 mt-md-0">
        <a href="{% if project %}{% url 'project_detail' project.id %}{% else %}{% url 'project_list' %}{% endif %}" class="btn btn-outline-secondary">
            <i class="fas fa-times me-1"></i>Cancel
        </a>
    </div>
</div>

{% if form.errors %}
<div class="alert alert-danger">
    <strong>Please fix the errors below.</strong>
    {% if form.non_field_errors %}<div>{{ form.non_field_errors }}</div>{% endif %}
</div>
{% endif %}

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

    <div class="card mb-3">
        <div class="card-header"><h6 class="m-0 fw-bold"><i class="fas fa-info-circle me-2" style="color: var(--accent);"></i>Project Basics</h6></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-8">
                    <label class="form-label fw-semibold">Name *</label>
                    {{ form.name }}
                    {% if form.name.errors %}<div class="invalid-feedback d-block">{{ form.name.errors|first }}</div>{% endif %}
                </div>
                <div class="col-md-4 align-self-end">
                    <div class="form-check form-switch pt-2">
                        {{ form.active }}
                        <label class="form-check-label fw-semibold" for="{{ form.active.id_for_label }}">Active</label>
                    </div>
                </div>
                <div class="col-12">
                    <label class="form-label fw-semibold">Description</label>
                    {{ form.description }}
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header"><h6 class="m-0 fw-bold"><i class="fas fa-calendar-alt me-2" style="color: var(--accent);"></i>Timeline</h6></div>
        <div class="card-body">
            <p class="text-muted small mb-3">Optional. Use to record when the project started and expected completion date.</p>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Start Date</label>
                    {{ form.start_date }}
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">End Date</label>
                    {{ form.end_date }}
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header"><h6 class="m-0 fw-bold"><i class="fas fa-user-shield me-2" style="color: var(--accent);"></i>Supervisors</h6></div>
        <div class="card-body">
            <p class="text-muted small mb-2">Tick staff users responsible for this project. A project can have multiple supervisors.</p>
            <div style="max-height: 320px; overflow-y: auto; padding-right: 6px;">
                {% for choice in form.supervisors %}
                <div class="form-check">
                    {{ choice.tag }}
                    <label class="form-check-label" for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
                </div>
                {% empty %}
                <p class="text-muted small mb-0">No staff users available to assign. Create users in Django admin first.</p>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-between align-items-center mb-5">
        <a href="{% if project %}{% url 'project_detail' project.id %}{% else %}{% url 'project_list' %}{% endif %}" class="btn btn-outline-secondary">Cancel</a>
        <button type="submit" class="btn btn-accent btn-lg">
            <i class="fas fa-save me-1"></i>
            {% if is_new %}Create Project{% else %}Save Changes{% endif %}
        </button>
    </div>
</form>

</div>
{% endblock %}