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

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

{% block content %}
{# === TEAM EDIT/CREATE PAGE ===
     Serves both /teams/new/ and /teams/<id>/edit/.
     Form sections: Team Basics · Pay Schedule · Workers. #}

<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 Team{% else %}Edit: {{ team.name }}{% endif %}
        </h1>
        <div class="d-flex gap-2">
            {% if not is_new %}
                <a href="{% url 'team_detail' team.id %}" class="btn btn-outline-secondary btn-sm shadow-sm">
                    <i class="fas fa-times me-1"></i> Cancel
                </a>
            {% else %}
                <a href="{% url 'team_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 %}

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

        <div class="row g-3">

            {# === TEAM 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>Team 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.supervisor.id_for_label }}">Supervisor</label>
                            {{ form.supervisor }}
                            {% if form.supervisor.errors %}<div class="text-danger small mt-1">{{ form.supervisor.errors.0 }}</div>{% endif %}
                            <div class="form-text small text-muted">
                                The user who manages this team — admin or member of the Work Logger group.
                            </div>
                        </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 teams are hidden from attendance logging forms.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# === PAY SCHEDULE === #}
            <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>Pay Schedule</h6>
                    </div>
                    <div class="card-body">
                        <p class="small text-muted">
                            Optional. If set, the app can calculate pay periods automatically.
                            Both fields must be filled together (or both left blank).
                        </p>
                        <div class="mb-3">
                            <label class="form-label" for="{{ form.pay_frequency.id_for_label }}">Pay Frequency</label>
                            {{ form.pay_frequency }}
                            {% if form.pay_frequency.errors %}<div class="text-danger small mt-1">{{ form.pay_frequency.errors.0 }}</div>{% endif %}
                        </div>
                        <div class="mb-0">
                            <label class="form-label" for="{{ form.pay_start_date.id_for_label }}">Pay Start Date</label>
                            {{ form.pay_start_date }}
                            {% if form.pay_start_date.errors %}<div class="text-danger small mt-1">{{ form.pay_start_date.errors.0 }}</div>{% endif %}
                            <div class="form-text small text-muted">
                                Anchor date — the first day of the very first pay period. Never needs updating.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# === WORKERS PICKER === #}
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="fas fa-hard-hat me-2 text-muted"></i>Workers</h6>
                        <span class="small text-muted">
                            Inactive workers appear with a grey badge and are still selectable.
                        </span>
                    </div>
                    <div class="card-body">
                        {% if form.workers.errors %}
                            <div class="text-danger small mb-2">{{ form.workers.errors.0 }}</div>
                        {% endif %}
                        <div class="row g-2">
                            {% for choice in form.workers %}
                                <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 workers exist yet.</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 'team_detail' team.id %}" class="btn btn-outline-secondary">Cancel</a>
            {% else %}
                <a href="{% url 'team_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 Team{% else %}Save Changes{% endif %}
            </button>
        </div>
    </form>

</div>
{% endblock %}