{% extends "management/base.html" %}
{% load i18n lucide static %}

{% block heading %}{% trans "Add multiple people" %}{% endblock heading %}
{% block topbar_context %}<span class="badge badge-outline">{{ team.name }}</span>{% endblock topbar_context %}

{% block actions %}
    <a class="btn btn-outline gap-2" href="{% url 'management:team_detail' team.pk %}?season={{ season.pk }}">{% lucide "arrow-left" size=16 %} {% trans "Back" %}</a>
{% endblock actions %}

{% block panel %}
    <form method="post">
        {% csrf_token %}
        {{ formset.management_form }}

        <div class="card">
            <div class="card-body">
                <p class="text-sm text-muted">
                    {% blocktrans %}Only members who are active (paid up) for this club this season or next can be added. The position you pick decides the role: a staff position adds them to the staff, any other position adds them to the roster. To add someone as both a player and staff, give them two rows.{% endblocktrans %}
                </p>

                {% for error in formset.non_form_errors %}
                    <div class="alert alert-error">
                        <span>{{ error }}</span>
                    </div>
                {% endfor %}

                <table class="table">
                    <thead>
                        <tr>
                            <th>{% trans "Member" %}</th>
                            <th>{% trans "Position" %}</th>
                            <th>{% trans "Jersey #" %}</th>
                            <th class="text-center">{% trans "Captain" %}</th>
                            <th class="text-center">{% trans "Alternate" %}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="bulk-add-rows" data-prefix="{{ formset.prefix }}">
                        {% for form in formset %}
                            {% include "management/_team_bulk_add_row.html" with form=form %}
                        {% endfor %}
                    </tbody>
                </table>

                <template id="bulk-add-row-template">
                    {% include "management/_team_bulk_add_row.html" with form=formset.empty_form %}
                </template>

                <div class="flex flex-wrap items-center gap-2">
                    <button class="btn btn-outline btn-sm gap-2" type="button" id="add-row">{% lucide "plus" size=14 %} {% trans "Add another row" %}</button>
                    <button class="btn btn-primary btn-sm gap-2" type="submit">{% lucide "users" size=14 %} {% trans "Add to team" %}</button>
                </div>
            </div>
        </div>
    </form>
{% endblock panel %}

{% block extra_body %}
    <script src="{% static 'js/searchable-select.js' %}"></script>
    <script src="{% static 'js/bulk-add-rows.js' %}"></script>
{% endblock extra_body %}