{% extends "mobile/coach/base.html" %}
{% load i18n %}

{% comment %}
    Squad screen's staff "Add" entry point -- see CoachAddStaffView's own
    docstring for why this needs a shared position picker up top, unlike
    CoachAddPlayerView/C6's plain checkbox list (a roster spot's position is
    optional; StaffAssignment's is required).
{% endcomment %}

{% block header_extra %}
    <div class="mt-3 flex items-center justify-between">
        <span class="font-display text-lg font-extrabold text-white uppercase">{% blocktrans with team=active_team.name %}Add staff to {{ team }}{% endblocktrans %}</span>
    </div>
{% endblock header_extra %}

{% block content %}
    <form method="post" action="{% url "mobile:coach_add_staff" %}" x-data="{ count: 0 }" hx-boost="false">
        {% csrf_token %}

        <div class="m-card p-3.5">
            <label class="mb-1 block text-xs font-semibold text-muted uppercase tracking-wide">{% trans "Position" %}</label>
            <select class="h-11 w-full rounded-lg border border-stroke bg-paper px-3 text-[15px] text-ink focus:border-ink focus:outline-none" name="position" required>
                <option value="">{% trans "Choose a position" %}</option>
                {% for position in positions %}
                    <option value="{{ position.pk }}">{{ position.name }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="m-card mt-3 flex flex-col overflow-hidden">
            {% for candidate in candidates %}
                <label class="flex items-center gap-3 px-4 py-2.5 {% if not forloop.last %}border-b border-rule{% endif %}">
                    {% include "mobile/_avatar.html" with person=candidate size_class="h-9 w-9" text_class="text-xs" %}
                    <span class="min-w-0 flex-1 text-sm font-semibold text-ink">{{ candidate.get_full_name }}</span>
                    <input class="h-5 w-5 shrink-0 accent-ink" type="checkbox" name="member" value="{{ candidate.pk }}" @change="count = $el.form.querySelectorAll('input[name=member]:checked').length">
                </label>
            {% empty %}
                <div class="px-4 py-6 text-center text-sm text-muted">{% trans "No one is eligible to be added." %}</div>
            {% endfor %}
        </div>

        <button class="btn btn-dark mt-4 w-full" type="submit" :disabled="count === 0">
            <span x-show="count === 0">{% trans "Select people to add" %}</span>
            <span x-show="count > 0" x-cloak>{% trans "Add" %} (<span x-text="count"></span>)</span>
        </button>
    </form>
{% endblock content %}