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

{% block title %}{% if is_new %}Add Team{% else %}Edit {{ team.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-users me-2" style="color: var(--accent);"></i>
            {% if is_new %}Add Team{% else %}Edit {{ team.name }}{% endif %}
        </h1>
        <p class="mb-0" style="color: var(--text-secondary); font-size: 0.85rem;">
            {% if is_new %}Give the team a name; supervisor and workers are optional but recommended.
            {% else %}Update any section and Save.{% endif %}
        </p>
    </div>
    <div class="d-flex gap-2 mt-3 mt-md-0">
        <a href="{% if team %}{% url 'team_detail' team.id %}{% else %}{% url 'team_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>Team Basics</h6></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <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-6">
                    <label class="form-label fw-semibold">
                        Supervisor
                        <i class="fas fa-info-circle text-muted ms-1" style="font-size: 0.8em;"
                           data-bs-toggle="tooltip" title="Staff user responsible for this team's daily work logs and payroll"></i>
                    </label>
                    {{ form.supervisor }}
                </div>
                <div class="col-12">
                    <div class="form-check form-switch">
                        {{ form.active }}
                        <label class="form-check-label fw-semibold" for="{{ form.active.id_for_label }}">Active (shown in forms and dropdowns)</label>
                    </div>
                </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>Pay Schedule</h6></div>
        <div class="card-body">
            <p class="text-muted small mb-3">Optional. If set, payroll calculations use this schedule to determine pay periods. Leave both blank if this team doesn't have a fixed schedule.</p>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Pay Frequency</label>
                    {{ form.pay_frequency }}
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        Pay Start Date
                        <i class="fas fa-info-circle text-muted ms-1" style="font-size: 0.8em;"
                           data-bs-toggle="tooltip" title="Anchor date — the FIRST day of the very first pay period. Future periods are calculated forward from this date. Never needs updating once set."></i>
                    </label>
                    {{ form.pay_start_date }}
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header"><h6 class="m-0 fw-bold"><i class="fas fa-hard-hat me-2" style="color: var(--accent);"></i>Workers</h6></div>
        <div class="card-body">
            <p class="text-muted small mb-2">Tick workers to include in this team. Inactive workers are marked with a grey badge — you can still select them.</p>
            <div style="max-height: 400px; overflow-y: auto; padding-right: 6px;">
                {% for choice in form.workers %}
                <div class="form-check">
                    {{ choice.tag }}
                    <label class="form-check-label" for="{{ choice.id_for_label }}">
                        {{ choice.choice_label }}
                        {% with worker=choice.choice_value %}
                        {# show an inactive badge next to inactive workers for visual scanning #}
                        {% endwith %}
                    </label>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-between align-items-center mb-5">
        <a href="{% if team %}{% url 'team_detail' team.id %}{% else %}{% url 'team_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 Team{% else %}Save Changes{% endif %}
        </button>
    </div>
</form>

</div>
{% endblock %}